File Upload with AJAX

[1DMF]

Hi,

Is it possible to acheive the same as using a 'file' type input field on a form and submit it?

I want to use AJAX for a form and it includes a PDF file upload, how do I get the file from the users HD and post it via the XMLHttpRequest post method?

Is this possible?

Cheers 1DMF.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[feherke]

Hi

When POSTing with [tt]XMLHttpRequest[/tt], the JavaScript code prepares the data to send. So the JavaScript code has to read the file and encode it.

The problem is with the first part : read the file. JavaScript can not do it by default.

You could take a look at the TiddlyWiki source and its How To/Configure your browser to allow saves to disk for tricks to access the local file system from JavaScript. ( I am not sure if those tricks are valid if JavaScript was loaded from a remote server. )

Feherke.

http://free.rootshell.be/~feherke/

 

[Diancecht]

I'd think twice before starting this. Do you have any special requirement to not use the "traditional" form?

Cheers,
Dian

 

[1DMF]

Thanks guys,

I was pondering this in the bath this morning, I didn't think it was possible as you say feherke, the problem lies with getting the file, encoding it, and then sending the file on the querystring via the XMLHTTPRequest.

Yes I know Dian, and no, there is no reason other than the entire app is AJAX. I was merily writing the app to send all the other form data via AJAX, without thinking a force of habit I guess!

I'd spent a few hours writing all the form validation, perl backend and then I came to the file upload bit and suddenly...dang...what an idiot i've been!

So the question is do I re-write what i've done, problem is for the top interface to stay on screen, i'd now need to write it using frames, but I don't use frames anymore, a habbit i was taught to get out of as frames are evil.

At the end of the day I want the app to be AJAX, I don't like page reloads, one of the real ugly clunkyness of the entire internet.

So I had an Archimedes moment, and will be using a hidden iFrame where I copy over the visible value of the file field to the hidden iFrame, use JS to submit the file, then when the file is uploaded, fire the AJAX on the parent frame to submit the rest of the form data and marry the two up server side.

Bit of a pain, and it's really just smoke and mirrors, but I think it should do the job.

Any thoughts or advice on this method?





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[feherke]

Hi

I don't like page reloads,

Quite strange attitude.

I copy over the visible value of the file field

I do not understand this, but I think it is not needed anyway. What I would do is either
[ul]
[li]From the CGI script send HTTP status 204 and no actual content back to the browser, and the browser will ( should ? ) keep the previous document displayed :

[b]print[/b] [navy]$cgi[/navy][teal]->[/teal][COLOR=darkgoldenrod]header[/color][teal](-[/teal]status[teal]=>[/teal][green][i]'[highlight]204 No content[/highlight]'[/i][/green][teal]);[/teal]

[/li]
[li]Just set the [tt]form[/tt]'s [tt]target[/tt] to the hidden [tt]iframe[/tt] :

[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][green][i]"uploadehandler.cgi"[/i][/green] [maroon]target[/maroon][teal]=[/teal][green][i]"[highlight]cantseeme[/highlight]"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"file"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"uploadme"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"submit"[/i][/green][b]>[/b]
[b]</form>[/b]
[b]<iframe[/b] [maroon]name[/maroon][teal]=[/teal][green][i]"[highlight]cantseeme[/highlight]"[/i][/green] [maroon]style[/maroon][teal]=[/teal][green][i]"display:none"[/i][/green][b]></iframe>[/b]

[/li]
[/ul]

Feherke.

http://free.rootshell.be/~feherke/

 

[1DMF]

Quite strange attitude.

why, it's just a personal preference. what's so strange about it?

The problem with your method is, if nothing is returned, how do I display error messages?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[feherke]

Hi

The problem with your method is, if nothing is returned, how do I display error messages?

With the first alternative there is no way. Using 204 supposes that everything was fine. If the upload fails, just deliver a document as normally.

Feherke.

http://free.rootshell.be/~feherke/

 

[1DMF]

I've got it working sweet

OK it's not exactly what I wanted, and even my first attempts to copy/clone the node over to the hidden iframe proved fruitless, apparently FF3 & IE8 have a new security feature with JS, and that stops you cloning or copying input objects of type 'file'.

so in the end i used an iframe which looked like part of the main form, which had just the input of type file, and then used a bit of cross frame scripting to facilitate the full upload & AJAX submitted form.

OK , took me 3 hours to re-write what I had already coded and then complete the rest of the coding, HTML, JS & perl, but now it works great and behaves just like it would if i'd sent the file via XMLHTTPReqest.

What a palaver, but I got there in the end, and at lest I know for next time!




"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts