upload image with ajax + no page reload ?? possible ?????

ChicoMendez

hi- does anyone know is it possible to upload an image without a page load ?
ive been searching around and cant see it done anywhere

im using xajax (as a joomla plugin - http://www.xajax-joomla.com )


tnx

ron_darrell

Depends on where you are storing the image. If the image was being saved to a database then yes more than likely ajax could handle this, otherwise not so sure. It would be a pretty big security issue allowing people to just upload files without any kind of check (you're saying images but what stops people from entering a batch file or exe to the uploader?)

May I ask why you need an upload with no page reload in the first instance?

-RD

Liam Byrne

Essentially, you need to catch the form submit button click and submit the form via Ajax.

http://www.malsup.com/jquery/form/#

You can even do multiple images:

http://swfupload.mammon.se/

Goodshape

ron_darrell wrote:

Depends on where you are storing the image. If the image was being saved to a database then yes more than likely ajax could handle this, otherwise not so sure. It would be a pretty big security issue allowing people to just upload files without any kind of check (you're saying images but what stops people from entering a batch file or exe to the uploader?)

May I ask why you need an upload with no page reload in the first instance?

-RD

As I understand AJAX, you can still perform the required checks without needing to reload the [entire] page.

Google Mail does this when attaching files to an email.

cgarvey

Last time I looked in to this (and Google implies not much has changed since), POSTing multipart forms is not possible with AJAX. That's pretty much a slam dunk right there!

There was one workaround for Firefox/Mozilla users (involved lowering security levels in about:config), but that wasn't an option for me.

The other workarounds were to use popup windows or iframes. In one project I used the SWFUpload workaround above (with our own SWF, mind). In another project (that required broader client access specs), I went with:
+ Click on "Upload Image" or "Attach File" link (depending on the UI context)
+ Display popup window with simple form including a FILE input
+ When Upload/Attach is pressed, an "Uploading...<br />Do not close this window" <div> is displayed, the window is blurred, and the form is submitted (upload begins)
+ In the main/opener window, an AJAX call is initiated (from within the popup) to repeatedly query the server for upload progress, and displays an upload progress bar.
+ When the upload has completed, the popup window's results are just Javascript lines to functions in the main/opener window to stop progress bar display, to call another AJAX method to refresh the file list / thumbnails on the page (not a page refresh), and to close the window (which is still blurred)

So, not ideal, but doesn't require Java or Flash to be installed, and degrades gracefully if Javascript is disabled.

HTH