Multiupload of files using flash uploader and php and saving into mysql database

Question

I want to develop a backend admin solution to save images for a post using some multiupload flash uploader. I mean that kind o f uploader, where when you click on browse and than in the open dialogue box you can choodse mulitple files using CTRL plus LEFT MOUSE CLICK).

I would like to save every new image to the database. With saving I mean, creating a new row for every item(image) in my table called images:

1.id (automatically increasing)
2.file_name
3.user_who_uploaded_that_book

I would like also to limit the number of files that can a user uplaod (e.g. max 20 files) somewhere in the config file.

Answer 1

Personally I'm a fan of Plupload which include a nice set of examples on how to set it up for multiple files upload. It also includes an upload.php script, as example for backend setup.

HTML4 doesn't support multiple selection of files, so you need to rely on either HTML5 or extension (like flash or silverlight) for that. Plupload supports all of the above, so it should save you some legwork.

Answer 2

I think you've got 2 basic questions here:

1. How to select local files for upload via flash?
2. How to send multiple files to server as POST?

For #1 You need to use flash.net.FileReference.

For #2 There's no built-in 'Multipart' loader in flash, which I'm pretty sure is what you need. The best one I've found is by this genius developer named Eugene: http://blog.inspirit.ru/?p=198. This works great, though personally had I've some issues with the onComplete handler in IE8 & IE9. I'm sure it's IE's fault and not Eugene's. I worked around this my listening for the HTTPStatusEvent event like so:

var ml:MultipartURLLoader = new MultipartURLLoader();           
ml.addEventListener(HTTPStatusEvent.HTTP_STATUS, onHTTPStatusEvent);
ml.addVariable('Content-Type', "image/png");
ml.addFile(pngStream, filename, "file", "image/png");
ml.load('http://...');
function onHTTPStatusEvent( event: HTTPStatusEvent ){           
    if(stat == 0 || (stat >= 200 && stat < 205)){
        //upload success
    }else{
        //some kinda error
    }
}

(This should work with multiple addFiles(_);)

I'm also listening for the standard events:

ml.addEventListener(Event.COMPLETE, uploadComplete);
ml.addEventListener(ProgressEvent.PROGRESS, uploadProgress);

But haven't been able to get PROGRESS to work at all, and COMPLETE doesn't fire on IE... Anyone know any alternatives that work on IE? Eugene's code is working for me now, but I don't think I can add a "uploading..." progress bar as it is... which would be cool.