HELP! http POST kills javascript function
6 views
Skip to first unread message
Richard Langner
Mar 23, 2022, 10:05:25 AM3/23/22
to Sheffield Hardware Hackers
Can anyone suggest a way around this issue?
The fileUpload() javascript function running in the browser never reaches line 149.
Line 146 submits the data OK using the HTTP POST method.
Then this alert dialog appears for ~1sec then disappears.
Notice the console shows the line 147 after the submit was done.
The file is actually uploaded OK, and the page is refreshed with window.location.reload();
However the page is blank! Refreshing manually with f5 brings up this dialog.
Re-sending brings up the same dialog. Cancel leaves the page blank.
The only way to get the page back is to re-type the address in the address bar.
It seems the HTTP POST kills the javascript, although I could be wrong.
Any ideas?
Richard
The fileUpload() javascript function running in the browser never reaches line 149.
Line 146 submits the data OK using the HTTP POST method.
Then this alert dialog appears for ~1sec then disappears.
Notice the console shows the line 147 after the submit was done.
The file is actually uploaded OK, and the page is refreshed with window.location.reload();
However the page is blank! Refreshing manually with f5 brings up this dialog.
Re-sending brings up the same dialog. Cancel leaves the page blank.
The only way to get the page back is to re-type the address in the address bar.
It seems the HTTP POST kills the javascript, although I could be wrong.
Any ideas?
Richard
Paul M
Mar 23, 2022, 8:14:22 PM3/23/22
to sheffield-har...@googlegroups.com
Hi Richard,
This is to be expected. When you submit a form, that stops the current page's execution and starts loading the new page.
If you want to post data to the server but still continue execution on the current page you'll need to do it via AJAX.
Have a read of https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript
Regards,
Paul
This is to be expected. When you submit a form, that stops the current page's execution and starts loading the new page.
If you want to post data to the server but still continue execution on the current page you'll need to do it via AJAX.
Have a read of https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript
Regards,
Paul
--
You received this message because you are subscribed to the Google Groups "Sheffield Hackspace" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sheffield-hardware-...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/sheffield-hardware-hackers/30a3b728-cd63-5047-c055-4fa4e6a7a9eb%40gmail.com.
Richard Langner
Mar 24, 2022, 5:05:55 PM3/24/22
to sheffield-har...@googlegroups.com
Thanks for getting back to me Paul.
It makes sense now you mention that the current page stops executing on the submit.
With this in mind I decided to go to a confirmation page instead of staying on the same page.
But there is still a problem!
Here is my simplified javascript
and here is the HTML form
They upload the file (YAY!) but return a blank page, so I added action="fileUploaded.html" in the HTML form and although it redirects as expected to the confirmation page, the file does NOT upload.
This should be a simple and straight forward POST!
Any idea why this fails?
Richard
It makes sense now you mention that the current page stops executing on the submit.
With this in mind I decided to go to a confirmation page instead of staying on the same page.
But there is still a problem!
Here is my simplified javascript
and here is the HTML form
They upload the file (YAY!) but return a blank page, so I added action="fileUploaded.html" in the HTML form and although it redirects as expected to the confirmation page, the file does NOT upload.
This should be a simple and straight forward POST!
Any idea why this fails?
Richard
On 24/03/2022 00:14, Paul M wrote:
Hi Richard,
This is to be expected. When you submit a form, that stops the current page's execution and starts loading the new page.
If you want to post data to the server but still continue execution on the current page you'll need to do it via AJAX.
Have a read of https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript
Regards,
Paul
On 23/03/2022 14:05, Richard Langner wrote:
Can anyone suggest a way around this issue?
The fileUpload() javascript function running in the browser never reaches line 149.
Line 146 submits the data OK using the HTTP POST method.
Then this alert dialog appears for ~1sec then disappears.
Notice the console shows the line 147 after the submit was done.
The file is actually uploaded OK, and the page is refreshed with window.location.reload();
However the page is blank! Refreshing manually with f5 brings up this dialog.
Re-sending brings up the same dialog. Cancel leaves the page blank.
The only way to get the page back is to re-type the address in the address bar.
It seems the HTTP POST kills the javascript, although I could be wrong.
Any ideas?
Richard
--
You received this message because you are subscribed to the Google Groups "Sheffield Hackspace" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sheffield-hardware-...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/sheffield-hardware-hackers/30a3b728-cd63-5047-c055-4fa4e6a7a9eb%40gmail.com.
--
You received this message because you are subscribed to the Google Groups "Sheffield Hackspace" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sheffield-hardware-...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/sheffield-hardware-hackers/9fe000d6-6023-9b99-3fc0-5ea35ea667d0%40whitefall.co.uk.
Paul M
Mar 24, 2022, 8:07:24 PM3/24/22
to sheffield-har...@googlegroups.com
Hi Richard,
Do you have any server side code to handle receiving the uploaded file? I'm suspecting not with the action parameter pointing to a static HTML page.
For an example where you are hosting the site on PHP see https://www.w3schools.com/php/php_file_upload.asp
Also you do realise that password prompt provides zero security right? You need to put that security server side and not client side.
Regards,
Paul
Do you have any server side code to handle receiving the uploaded file? I'm suspecting not with the action parameter pointing to a static HTML page.
For an example where you are hosting the site on PHP see https://www.w3schools.com/php/php_file_upload.asp
Also you do realise that password prompt provides zero security right? You need to put that security server side and not client side.
Regards,
Paul
To view this discussion on the web, visit https://groups.google.com/d/msgid/sheffield-hardware-hackers/eac7b235-ce37-1b55-6674-56109f027be3%40gmail.com.
Richard Langner
Mar 25, 2022, 5:22:23 AM3/25/22
to sheffield-har...@googlegroups.com
Hi Paul
The server is an ESP8266 micro-controller, which writes to internal flash memory. I suspect the write times would be sluggish.
My initial thoughts were that the writes were not completed by the time the webpage change occurred. As larger files would be uploaded in multiple chunks, I tried files of only a few bytes and had the same problem.
The password security is to prevent dumb users accidentally messing up the system. It's not imperative.
Here's the server set-up
The full server upload code-
The server is an ESP8266 micro-controller, which writes to internal flash memory. I suspect the write times would be sluggish.
My initial thoughts were that the writes were not completed by the time the webpage change occurred. As larger files would be uploaded in multiple chunks, I tried files of only a few bytes and had the same problem.
The password security is to prevent dumb users accidentally messing up the system. It's not imperative.
Here's the server set-up
webServer.on("/files.html", HTTP_POST, []() { webServer.send(200, "text/plain", "");}, handleFileUpload);
The full server upload code-
void handleFileUpload(){
Serial.printf("Line %4d inside handleFileUpload\n",__LINE__); // upload a new file to the LittleFS
HTTPUpload& upload = webServer.upload();
String path;
if(upload.status == UPLOAD_FILE_START){
path = upload.filename;
if(!path.startsWith("/")) path = "/"+path;
if(!path.endsWith(".gz")) { // The file server always prefers a compressed version of a file
String pathWithGz = path+".gz"; // So if an uploaded file is not compressed, the existing compressed
if(LittleFS.exists(pathWithGz)) // version of that file must be deleted (if it exists)
LittleFS.remove(pathWithGz);
}
Serial.print("handleFileUpload Name: "); Serial.println(path);
fsUploadFile = LittleFS.open(path, "w"); // Open the file for writing in LittleFS (create if it doesn't exist)
path = String();
} else if(upload.status == UPLOAD_FILE_WRITE){
if(fsUploadFile)
fsUploadFile.write(upload.buf, upload.currentSize); // Write the received bytes to the file
} else if(upload.status == UPLOAD_FILE_END){
if(fsUploadFile) { // If the file was successfully created
fsUploadFile.close(); // Close the file again
Serial.print("handleFileUpload Size: ");
Serial.println(upload.totalSize);
} else {
webServer.send(500, "text/plain", "500: couldn't create file");
}
}
}
To view this discussion on the web, visit https://groups.google.com/d/msgid/sheffield-hardware-hackers/9497f7b4-5efe-fe17-1f89-df40b52d75dc%40whitefall.co.uk.
Reply all
Reply to author
Forward
0 new messages