File uploading with Dojo - Infrequently Noted

I don't know if I am at the right place to expose my problem.

With your technique, my file is correctly uploaded to the server. However I am unable to handle the data received by my "load" method. A simple load (t, d, e) {alert(d);} returns me an "undefined" value.

The same form in the classic submit way returns me the correct response.

The same form with dojo transport forced to xmlhhtp doesn't send the file (this is correct) but the load method alerts my correct customized error message.

Dojo is really powerfull but I wonder what's wrong with my script :(

Thanks for your good work and sorry for my poor english!

So one of the changes that's required to accommodate the iframe-based nature of the IframeIO system is that the return for the transport needs to be an HTML document. The contents of the first textarea element encountered in that document will be passed in as the data to your load() function.

Hopefully that should get your app working the way you expect.

Regards

Thank you.

The load() function persists in containing "undefined" with your correction. I checked with the DOM inspector and the iframe has a node text with my server response. I think that I will recover (directly with DOM manipulation) the contents of this node to solve my problem.

that it is a text node and not an HTML document containing a element as I specified would indicate the root of the problem.

Please see the test files at:

http://download.dojotoolkit.org/release-0.2.1/dojo-0.2.1-ajax/tests/io/

Regards

Yes, I had done the dom manuplation and get back the result on load like this:

load: function(type, data, evt){ // handle successful response here res = dojo.byId("dojoIoIframe").contentWindow.document.getElementById("output").innerHTML; alert(res);

}

On script i am outputting:

echo 'Date came from script...';

May be helpfull to someone who is new to dojo.

Hi Alex,

The formNode with the Iframe works great for sending forms asynchronously.

I would like to set request headers for the form I am sending so I don't have to parse the entire output to get the information. The standard bind allows headers to be set by using and associative array for the "headers" property.

How can I use this same functionality with IframeIO?

Thanks in advance for any help you can give - Mark

function submitForm(formx, retMimeType, retFunction) {

var headersx=new Array(); headersx["Mark1"]="TEST1"; headersx["Mark2"]="TEST2"; headersx["Mark3"]="TEST3"; headersx["Mark4"]="TEST4";

var bindArgs = { url: "ProcessFileUpload", mimetype: retMimeType, formNode: formx, headers: headersx, method: "post", handle: eval(retFunction) };

// dispatch the request req=dojo.io.bind(bindArgs); return false; }

Hey Mark,

I'm not sure that it's going to be possible to affect the headers when using IframeIO. = (

Everything else should work as noted above.

Regards

Will all this work in an https page?

Hi Alex,

I was able to get around my problem by using javascript to set a cookie. So when the request is sent by the Dojo iframe, the cookie goes with it.

Just wanted to communicate the workaround.

Thanks - Mark

Alex,

I am able to upload the file using iframe.That's great and thanks.

But after uploading file i am not able to handle the response 'data' some times it si giving undefined.But when i am using mimetype="application/xml" it is giving 'object' but i am not able to manipulate this object using DOM. for mimetype="plain/text" it is udefined. please suggest a solution.

Anish, take a look at comments #2 & #3. You will see that you cannot use an XML Response with file uploads. Rather you should generate an HTML response as follows: Your response here... Quoting alex: > The contents of the first textarea element encountered in that document will be passed in as the data to your load() function.

Hello, I am from Costa Rica, please excuse my bad English, I am trying to passing a form with files (Upload files) but I cant get any response, I saw the the last answers and I try the html response, but doesnt work, I really dont know why, I am using struts:

var request = dojo.io.bind(bindArgs); }

**The method in my struts action is call, that is fine but I can get any response :'( this is my struts response

StringBuffer infoHtml = new StringBuffer(); infoHtml.append("\n" + "\t\n" + "\t\n" + "\t\n" + "\t Please work!!.\n" + "\t\t\n" + "\t Please...\n" + "\t\n" + "");

//Prepare the response byte [] data = infoHtml.toString().getBytes();

response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setContentType("text/html");

ServletOutputStream sos = response.getOutputStream(); sos.write(data); sos.flush(); sos.close();

response.flushBuffer();

**What is wrong with my code, please help me.

Me again in the strust response, I send two textArea fields, I guess the validator of the page remove that code. but I am sending them :).

Another thing :P , when I remove the formNode I received the responses perfectly, I have the problem only when try to pass the form with files. thanks

Does it work with Safari? I tried the demo at http://download.dojotoolkit.org/release-0.2.2/dojo-0.2.2-ajax/tests/io/test_IframeIO.html and when I press Send It I get no response back (unlike IE and Firefox).

I hope it does work on Safari :-)

Hi all,

Samething here, upload works but the response is undefined.

My upload page:

header("Content-Type: text/html");

if(move_uploaded_file($_FILES['test']['tmp_name'], $_SERVER['DOCUMENT_ROOT'].'/'.$_FILES['test']['name'])) { $retval = 'ok'; } else { $retval = 'ops'; }

echo "

$retval

";

Thanks for any help

html was removed from the post, but It's the samething of the upload.cgi example

'

$retval

'

If I set dojo mimetype with text/plain it shows: DEBUG: Type: load DEBUG: Response: undefined

with text/javascript: DEBUG: Type: error DEBUG: Response: [object Object]

and in this case I don't know what to do with the object

Phillip - There's a bug with text/plain (causing it to return undefined) but you can work around it by extracting the IFrame contents manually - http://trac.dojotoolkit.org/ticket/674

Hi,

I am trying to upload files ... although I can easily get the response but the file upload does not work.

server side code (in PHP) is as folllows

header('Content-type: text/html');

$uploadDir = './'; $uploadFile = $uploadDir.basename($_FILES['file_name']['name']);

if ( move_uploaded_file( $_FILES['file_name']['tmp_name'], $uploadFile) ) { echo ""; echo "".$_FILES['file_name']['name']." uploaded successfully...."; echo ""; } else { echo ""; echo "".$_FILES['file_name']['name']." could not be uploaded successfully...."; echo ""; }

client side is as follows

dojo.require("dojo.io.*"); dojo.require("dojo.io.IframeIO");

var ctr = 0; var foo;

function sendIt(){ var bindArgs = { formNode: document.getElementById("uploadForm"), mimetype: "text/html", content: { increment: ctr++, fileFields: "ul1" },

handler: function(type, data, evt){ // handle successful response here if(type == "error") { alert("Unknown error occurred."); } else { res = dojo.byId("dojoIoIframe").contentWindow.document.getElementById("output").innerHTML; alert(res); } // alert(data); } }; var request = dojo.io.bind(bindArgs); }

When I run this code I get "[filename] could not be uploaded successfully...." error.

Please help me with this thanks in advance.

Hi, I tried to upload a multipart form with file and got an IFrameTransport error, however the file is uploaded correctly onto the server. any idea why? Here's my code: [code] function upload_file(formNode){

var bindArgs = { url: "foo.php", mimetype: "text/javascript", error: function(type, errObj){ // handle error here alert("error "+errObj.message); }, load: function(type, data, evt){ // handle successful response here alert("done");

}, formNode: formNode };

// dispatch the request var requestObj = dojo.io.bind(bindArgs); } [/code]

How do you partially upload a large file? Suppose you have 50 MB file on dialup link. Can we do partiall upload? ADODB.Stream is not the answer, because it open IE security hole.

Can dojo check file size before uploading it? Yes, it is always possbile to check on server side, but bandwidth has been wasted.

Like many posting here, I had a great deal of trouble working out how to upload files. The documentation is not explicit enough. I've finally worked something out, and I have put the files I used on my website (though they don't actually run from there - you'll have to download them and install them on your own system). There is an HTML file and a PHP file.

I found that to get the upload working requires several things:

The form must contain these attributes: method="post" enctype="multipart/form-data"The script on the server must report that it is returning HTML - with php this is done as follows: header('Content-type: text/html');The script then must return an HTML document, which contains a textarea. Place the actual message that you want delivered within the textarea. If you don't do this you'll get an error of some sort, such as an "IFrameTransportError", or error messages from dojo.

Gentle request to Dojo documenters - more live working examples please?

I don't think dojo can check file size. But, we can use small activeX instead.

Great post Alex, thanks! Now I am wondering if anyone can shed some light on a debug error message that shows up. At first I thought it was a bug with my code but when I try http://download.dojotoolkit.org/release-0.3.1/dojo-0.3.1-ajax/tests/io/test_IframeIO.html I receive this:

DEBUG: Type: errorDEBUG: Response: [object Object]

Which I can faithfully reproduce with my own code :)

Oh, the file does get successfully uploaded.

Hi All, In Internet Explorer i could not able get all the style classes and fonts. Every time I login, I am getting errors as "This object cannot be loaded". In my colleagues system it is showing all the syle classes related to it and fonts clearly. This problem didnt get resolved even if i reinstall my Internet Explorer. Can you please resolve this problem.... Thanks, Ravindranath.

To retrieve text from an iframe you have to specify minetype: text/plain in the request AND return html with an textarea in the response. Also, IFrameIO seem to ignore the handler-function, so always use load().

dojo.require('dojo.io.IFrameIO'); ... dojo.io.bind({ formNode: dojo.byId('myForm'), mimetype: 'text/plain', load: function(type, msg) { window.alert('Success: ' + msg); } error: function(type, err) { window.alert('Failure: ' + err.message); } }); ... <form id="myForm" action="myscript.php" method="post"> <input type="submit" /> </form>

And then the resonse have to look something like:

<html> <body> <textarea>Hello World!</textarea> </body> </html>

If you specify mimetype: text/html you will get the document-object itself.

dojo.io.bind({
    formNode: dojo.byId( 'myForm' ),

    mimetype: 'text/html',

    load: function(type, doc) {

        window.alert( doc.getElementsByTagName( 'textarea' )[0].value );

    }     error: function(type, err) {

        window.alert('Failure: ' + err.message);     }

});

Ticket info about 'text/javascript' bug.

Hi Alex,

I'm having an interesting problem related to IFrameIO. When I have a input of type="file" and do an upload via IframeIO I get strange rendering problems in Firefox 2. After any IFrameIO action is carried out, switching to other tabs in my tab container causes the entire browser screen to flash white as certain widgets are rendered.

I've narrowed it down to the presence of widgets created through script versus versus widgets defined in HTML markup in my test page. Only script created widgets cause the screen flash and it only happens in Firefox.

Thank you, Nathan

Concurrent file upload problem!!!

Hi, everybody!

I've met strange problem using dojo to upload files. I have simple form with an input of type 'file', and using dojo.bind() to submit this form. It works perfect if I'm uploading a single file. But if I submit this form once, and right after that (don't wait until the file is uploaded) select another file and submit the form again, I have next result: the first file is in fact uploaded, but second is not, and if after that I try to upload another file it fails as well without any notifications/errors.

I tried to investigate this issue using sniffer and found that browser stucks and does not send any data in such situation.

Note: This article is not valid for the current version of dojo. If you are getting an error like

Could not load 'dojo.io.'; last tried '.io/.js' or Could not load 'dojo.io.IframeIO'; last tried '.io/IframeIO.js'

it's because you're using a later version of dojo.

For io with these versions, see this link: http://www.dojotoolkit.org/book/dojo-porting-guide-0-4-x-0-9/io-transports-ajax or http://www.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/ajax-transports/alternate-transports