Opened 10 years ago

Closed 10 years ago

#8110 closed defect (invalid)

dojo.io.iframe.send in one form with a submit button

Reported by: Zebulon Owned by: anonymous
Priority: high Milestone: tbd
Component: General Version: 1.2.0
Keywords: Cc:
Blocked By: Blocking:

Description

  • Imagine you want to upload a file via "browse" button.

When 'onchange' event is triggered, sendForm function is called and upload the file by triggering this action "/funala-web/ajax/imageUpload.action"

Upload successfully work, i got a response from my servlet in a textarea like this: <textarea> { "id" : "27620", "name" : "js3250.dll", "mimetype" : "application/octet-stream", "size" : "681 Ko" } </textarea>

So ok, the file is uploaded on the server. Now you want, by clicking on "submit" button target : "redirectToHome.action" This action aims at redirect the user away.

When i click on submit, the browser attempt to redirect the user away but fail. It seems that a Javascript error block the redirection. You can see a screenshot of the failure with httpfox : http://zaibe.ath.cx/dojo.jpg

Here is the code u can quickly reproduce the bug.

<script type="text/javascript" src="/funala-web/js/dojo-release-1.2.0/dojo/dojo.js"></script>

<form method="post" id="testAjaxId" enctype="multipart/form-data" action="redirectToHome.action" validate="false">

<input type="file" name="upload" id="upload_1" onchange="sendForm()"/> <input type="submit"/>

</form>

<script type="text/javascript">

function sendForm() {

dojo.require("dojo.io.iframe"); dojo.addOnLoad(function() {

dojo.io.iframe.send({

url: "/funala-web/ajax/imageUpload.action", method: "post", handleAs: "text", form: dojo.byId("testAjaxId"), handle: function(data){

console.debug("Uploaded")

}, error: function (error) {

alert ("Uknown error has occurred:\n" +error);

}

});

});

} </script>

If i use two forms, upload and redirection work like a charm. Here is the code with two forms.

<form id="uploadForm" method="post" enctype="multipart/form-data" > <input type="file" name="upload" id="upload_1" onchange="sendForm()"/> </form>

<form id="submitForm" method="post" action="redirectToHome.action" validate="false"> <input type="submit"/> </form>

<script type="text/javascript" src="/funala-web/js/dojo-release-1.2.0/dojo/dojo.js"></script>

<script type="text/javascript">

function sendForm() {

console.debug("sendFormTriggered");

dojo.require("dojo.io.iframe"); dojo.addOnLoad(function() {

dojo.io.iframe.send({

url: "/funala-web/ajax/imageUpload.action", method: "post", handleAs: "text", form: dojo.byId("uploadForm"), handle: function(data){

console.debug("Uploaded");

}, error: function (error) {

alert ("Uknown error has occurred:\n" +error);

}

});

});

} </script>

do you have any idea why its not working with one form ? is it really a bug ?

Florent Valdelievre

Attachments (5)

upload.html (1.4 KB) - added by Zebulon 10 years ago.
ajaxUpload.php (161 bytes) - added by Zebulon 10 years ago.
redirection.php (60 bytes) - added by Zebulon 10 years ago.
httpFox.JPG (143.7 KB) - added by Zebulon 10 years ago.
fixed_upload.html (870 bytes) - added by nic 10 years ago.

Download all attachments as: .zip

Change History (9)

Changed 10 years ago by Zebulon

Attachment: upload.html added

Changed 10 years ago by Zebulon

Attachment: ajaxUpload.php added

Changed 10 years ago by Zebulon

Attachment: redirection.php added

Changed 10 years ago by Zebulon

Attachment: httpFox.JPG added

comment:1 Changed 10 years ago by Zebulon

Ok i investigated in order to have the straightforward example for testing. I bundled an example ( for slacker ;) here on a server ready to use : http://zaibe.ath.cx/dojoBug/upload.html This example is split into 3 parts.

upload.html; which is composed with a form including :

-> input type = file -> onchange which trigger sendForm() function -> submit button

ajaxUpload.php; which is composed with an echo of a textarea composed of a JSON string like my examples above

redirection.php; which is composed of a server side redirection using 'header()' function to www.example.com

upload.html <html> <form method="post" id="testAjaxId" enctype="multipart/form-data" action="/dojoBug/redirection.php">

<input type="file" name="upload" id="upload_1" onchange="sendForm()"/>

<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js"></script> <input type="submit"/>

</form>

<script type="text/javascript">

function sendForm() {

dojo.require("dojo.io.iframe"); dojo.addOnLoad(function() {

dojo.io.iframe.send({

url: "/dojoBug/ajaxUpload.php", method: "post", handleAs: "text",

form: dojo.byId("testAjaxId"),

handle: function(data){

console.debug("Uploaded")

}, error: function (error) {

alert ("Uknown error has occurred:\n" +error);

}

});

});

}

</script>

</html>

ajaxUpload.php <html>

<?php

echo "<textarea> { \"id\" : \"27620\", \"name\" : \"js3250.dll\", \"mimetype\" : \"application/octet-stream\", \"size\" : \"681 Ko\" } </textarea>";

?> </html>

redirection.php <html> <?php

header("Location: http://www.example.com/" );

?> </html>

comment:2 Changed 10 years ago by Zebulon

I updated dojo in 1.2.2, same bug :(

comment:3 Changed 10 years ago by nic

wonfix I think.
The html provided isn't correct (without <html>, <head>, <body>...).
Why only one form? Dojo uses an hidden iframe as target to do asynchronous uploads, so you can use the same form but you have to change the form target (imho it's better to use two forms).
I'll attach a working example.

Nicola

Changed 10 years ago by nic

Attachment: fixed_upload.html added

comment:4 Changed 10 years ago by dante

Resolution: invalid
Status: newclosed
Note: See TracTickets for help on using tickets.