multipart/form-data upload via ajax

[Phil Petree]

Anyone have any idea how to do a file upload using ajax?

 

If I do this using the normal submit it works just fine but having it call the dosubmit function and I get the form data but no file. ($_FILE is empty with no errors)

 

function dosubmit(url)
{
  // append extension to form processor to keep chinese out of your stuff
  new Ajax.Updater( 'result', url +".php", { method: 'post', parameters: $('myform').serialize(), onSuccess: fill_in, onFailure: ajax_err} );
}

<form name='anisForm' id='myform' action='image_upload' method='post' enctype="multipart/form-data">
  <fieldset>
    <legend>Step 3: Provide An Image</legend>
    <label id='labfldr_image' for='ajfldr_image'>Choose A Folder Cover Image:</label>
    <input type='file' name='fldr_image' size='81' maxlength='256' id='ajfldr_image'>
    <input type='hidden' name='MAX_FILE_SIZE' value='10M'>   
  </fieldset>
    <input type='button' id='submit' onclick='dosubmit("image_upload")' value='Save'>
    <!-- <input type='submit' id='submit' value='Save'> -->
    <input type='reset' value='Reset'>
</form>

[fntzr]

It not possible, use Flash Uploader for it, for example
http://demo.swfupload.org/v220/simpledemo/index.php.

But with HTML5\xhr2 it will be possible.
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface .

[Jason Westbrook]

It is possible but you have to realize it will only work on browsers that have the FileAPI available - Chrome/Firefox/Safari

new Ajax.Request("fileupload.php?filename=myfile",{"postBody":$("inputfield").files[0]});

will post the contents of the file to fileupload.php

then you can use 

file_get_contents("php://input");

to get the contents of the file

and the filename will be $_GET['filename']

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to prototype-scriptaculous+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[Walter Lee Davis]

On Jan 9, 2013, at 3:45 PM, Jason Westbrook wrote:

> It is possible but you have to realize it will only work on browsers that have the FileAPI available - Chrome/Firefox/Safari
>
>
> new Ajax.Request("fileupload.php?filename=myfile",{"postBody":$("inputfield").files[0]});
>
> will post the contents of the file to fileupload.php
>
> then you can use
>
> file_get_contents("php://input");

Note that this style of upload will not have the same security treatment by PHP as the $_FILES superglobal variable, and move_uploaded_file() and friends will not be active for it either. This can become an awful security hole if you aren't careful.

>
> to get the contents of the file
>
> and the filename will be $_GET['filename']
>
>

If you want to use the normal upload mechanism, you can use a "keyhole" iframe as the target in your form action to post your file contents normally, and a callback function in the window scope of the containing page to signal back your updates. It looks like Ajax, but it's really just a multipart form post.

Walter

>
>
> Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com
>
>
> On Wed, Jan 9, 2013 at 12:27 PM, fntzr <fant...@gmail.com> wrote:
> It not possible, use Flash Uploader for it, for example http://demo.swfupload.org/v220/simpledemo/index.php.
>
> But with HTML5\xhr2 it will be possible.
> http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface .
>
>
> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.

> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
>

> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.

[Jason Westbrook]

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com

On Wed, Jan 9, 2013 at 12:55 PM, Walter Lee Davis <wa...@wdstudio.com> wrote:

On Jan 9, 2013, at 3:45 PM, Jason Westbrook wrote:

> It is possible but you have to realize it will only work on browsers that have the FileAPI available - Chrome/Firefox/Safari
>
>
> new Ajax.Request("fileupload.php?filename=myfile",{"postBody":$("inputfield").files[0]});
>
> will post the contents of the file to fileupload.php
>
> then you can use
>
> file_get_contents("php://input");

Note that this style of upload will not have the same security treatment by PHP as the $_FILES superglobal variable, and move_uploaded_file() and friends will not be active for it either. This can become an awful security hole if you aren't careful.

Agreed

[Phil Petree]

I think the keyhole method seems to be the best mechanism.  I'll play around with the callback for a bit and see what I can cobble together.

 

My overall problem is, the user is creating a "folder" and I want to make adding the initial contents as easy as possible... in other words, I don't want the user to create an empty folder and then go to another place on the page to manage that folder.

 

If the user can create the folder, add a cover photo and some contents (files) all in one swoop it will make for a better user experience.

[Wojtek Zadora]

Try this solution:

http://www.webtoolkit.info/ ----> Ajax file upload
http://www.webtoolkit.info/ajax-file-upload.html