1

It has an embedded system, which operates with an IP (example: 192.168.0.237) different from each device, where the Import/Load file functionality depends on JQuery. The goal is to get this feature to work without needing an internet connection, it is currently using pointing to https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js and it works without problems. Changing the code, to access the "jquery.js" file locally. The page that loads the UPLOAD functionality is operating on port 8989. This, the path can be placed in the HEAD of the files, like this:

<script type='text/javascript' src='jquery.js'></script>

When running, inspecting the NETWORK tab, we have the result path:

"192.168.0.237:8989\jquery.js"

that is, it maps through port 8989, it fails to find the file, as it is stored in the root with port 80. Therefore, to validate the solution FORCE doing:

<script src='http://192.168.0.237/jquery.js'></script>

I added this instruction at the top of the file inside HEAD, AND the file UPLOAD feature WORKED correctly. Validating, which solution is suitable. But, in order to work correctly, it must obtain the IP of the device, so a SCRIPT was made using "window.location.hostname" to obtain the IP of the device and assemble the URL.

<script>
let k2 = '#http://';
let k3 = window.location.hostname;
let k4 = '@jquery.js';
let fim = `${k2} ${k3} ${k4}`;
fim = fim.replace(' @', '/');
fim = fim.replace('#', ' ');
fim = fim.replace('// ', '//');
fim = fim.trim();
document.getElementById('demo').innerHTML = window.jQuery;
document.getElementById('kkk').innerHTML = fim;
document.head.appendChild(document.createElement('script')).src = fim;
</script>

In this SCRIPT we have the last line "document.head.appendChild(document.createElement('script')).src = fim" which inserts the statement to load JQuery into the HEAD. Clicking on the "Check JQuery Status" button, the message that JQuery is loaded and available appears.

But now comes the problem, when pressing the submit button, update, the shown below occurs:
Imagem upload1
Imagem upload2
Imagem upload3
In short, an error occurs because it points to "serverIndex:1" and the correct would be only "serverIndex".

In other words, we have the INITIATOR pointing to "serverIndex:1" which doesn't exist (it doesn't even have to adjust the instruction, a syntax error will happen).

So, in short, with statement adding "jquery.js" STATIC = WORKS, but with statement ADDING "jquery.js" DYNAMICLY DOES NOT WORK.

With the STATIC instruction inserted in the HEAD, we have the expected operation as indicated below: (Note the INITIATOR = serverIndex)
WORKS OK RESULT

I need guidance as I don't know how to solve and also if this solution is suitable. Below is the rendered code:

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <script>  
        function checa() {
        if(jQuery) {
            alert('Jquery ONLOAD!');
        } else {
            alert('Jquery NOT HAVE - NUNCA EXECUTA');
        }
    }
    </script>
    <script src='http://192.168.0.237/jquery.js'></script>
</head>
<button onclick='checa()'>Check Status JQuery</button>
<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>
    <h4>valor:</h4>
    <p id='demo'> </p>
    <p id='kkk'></p>
    <h3>Verificador de preço</h3>
    <h3>Update Firmware</h3>
    <input type='file' name='update' id='file' onchange='sub(this)' style=display:none accept='.bin' required>
    <label id='file-input' for='file'> Selecione o arquivo ...</label>
    <input type='submit' class=btn value='Atualizar'>
    <br>
    <br>
    <div id='prg'></div>
    <br>
    <div id='prgbar'>
        <div id='bar'></div>
    </div>
    <br>
</form>
<script>
let k2 = '#http://';
let k3 = window.location.hostname;
let k4 = '@jquery.js';
let fim = `${k2} ${k3} ${k4}`;
fim = fim.replace(' @', '/');
fim = fim.replace('#', ' ');
fim = fim.replace('// ', '//');
fim = fim.trim();
document.getElementById('demo').innerHTML = window.jQuery;
document.getElementById('kkk').innerHTML = fim;
document.head.appendChild(document.createElement('script')).src = fim;
</script>
<script> <!-- DOWN IS SCRIPT  UPLOAD FILE !-->
function sub(obj) {
    var fileName = obj.value.split('\\');
    document.getElementById('file-input').innerHTML = '   ' + fileName[fileName.length - 1];

How the code is structured: (it is enclosed in QUOTES because as soon as it is stored in the String)
Code up
Code bottom
Code call String serverIndex

Finally, I hope to be guided on how to resolve the situation and whether this solution is adequate and correct.

  • You have to use the `file://` protocol to access files local to the client. – Barmar Oct 24 '22 at 20:48
  • No NEED for RANDOM capitalization OF words. It's bad enough that nowadays every man and their dog does that on YouTube already. – CherryDT Oct 24 '22 at 21:31
  • All the codes are either HTML and JavaScript, how is this has anything to do with Arduino? – hcheung Oct 25 '22 at 00:43
  • Using file:// doesn't work, fails to find the file. Clarifying, what code is inside ESP32, working as WebServer. Application, has code: HTML, CSS, Javascript and C. – Daniel Andrade Oct 25 '22 at 11:16
  • If you are using ESP32 as a web server, and you want to load the "local" copy of jQuery, you need to create a data/ directory in your SPIFFS and serve it as static content. See an example from [my project](https://www.e-tinkers.com/2019/11/build-an-esp32-web-server-and-ir-remote/) on how to serve the content from the SPIFFS. – hcheung Oct 26 '22 at 01:01

0 Answers0