Question

Let me better explain this title.
What I am looking for is an image uploader that uploads multiple images (around 200 would be ideal). The image uploader would need to be able to handle:

a) Some sort of progress indicator
b) Sending the uploaded files
through a script that sizes them and deletes the originals

Now, I imagine this is out there somewhere, by my Google searches have yielded bad results.
Does anyone have experience with something that would work good for that?
jQuery would be ideal, but is not necessary.

Answer 1

You are pretty tied up to Flash to give the user visual feedback on the upload progress. You can design the whole UI on jQuery but eventually it will be a Flash component sending the files to the server and reporting back upload progress.

That is, so far, the most tested and standard procedure.

Gmail uses it.

edit: here is the source code of a custom solution I use.

<mx:Script>
    <![CDATA[
        // initializes properties defined by user can be reset on runtime
        //private const FILE_UPLOAD_URL:String = "http://carloscidrais.netxpect.dev/uploader.php";
        //private var imagesFilter:FileFilter = new FileFilter("Allowed Files", "*.jpg;*.jpeg;*.gif;*.png");

        // for calling external javascript
        import flash.external.*;

        // initializes properties for the upload streams
        private var myFileRef:FileReferenceList = new FileReferenceList();
        private var item:FileReference;
        private var fileListInfo:Array = new Array();
        private var fileListDoneSoFar:int = 0;
        private var fileNumber:int = 0;


        // Runs when user clicks the upload button
        // **
        // **
        private function browseAndUpload():void {
            myFileRef = new FileReferenceList();
            myFileRef.addEventListener(Event.SELECT, selectHandler);

            // get user variables
            var params:URLVariables = new URLVariables();
            params.allowed_files = Application.application.parameters.allowed_files;
            var imagesFilter:FileFilter = new FileFilter("Allowed Files", params.allowed_files);

            myFileRef.browse([imagesFilter]);
            uploadCurrent.text = "";

            progressBar.visible = false;
            cancelButton.visible = false;
        }


        // Runs when user clicks the cancel button
        // **
        // **
        private function cancel():void {
            item.cancel(); // cancels current upload item
            progressBar.label = "canceled";
            uploadButton.enabled = true;
            cancelButton.visible = false;
            reset();
        }


        // Resert all variables to allow files to be sent again
        // **
        // **
        private function reset():void {
            fileListInfo.length = 0;
            fileNumber = 0;
            fileListDoneSoFar = 0;
        }


        // Nice error IO event handler
        // **
        // **
        private function ioErrorHandler(evt:IOErrorEvent):void {
            item.cancel();
            uploadButton.enabled = true;
            cancelButton.visible = false;
            progressBar.label = "io error";
            if(fileListDoneSoFar==0)
                uploadCurrent.text = "Error: Check upload permissions!";
            else 
                uploadCurrent.text = "Error: Check network!";
            reset();
        }


        private function javascriptComplete():void {
            var javascriptFunction:String = "galeryUploadComplete("+Application.application.parameters.opt+")";
            ExternalInterface.call(javascriptFunction);
        }            

        // Counts the total upload size and returns it in bytes
        // @param Object:FileReferenceList
        // @return int
        private function getTotalUploadBytes(files:Object):int {
            var size:int = 0;
            for(var i:int = 0; i<files.fileList.length; i++)
                size += files.fileList[i].size;
            return size;
        }


        // Returns a good byte formating
        // @param int bytes
        // @return string nice value
        private function returnHumanBytes(size:int):String {
            var humanSize:String = "";
            if(size>1048576) {
                numberFormater.precision = 2;
                humanSize = numberFormater.format(size/1024/1024)+"MB";
            }
            else {
                numberFormater.precision = 0;
                humanSize = numberFormater.format(size/1024)+"KB";
            }
            return humanSize;
        }


        // Handler that runs when user selects the files
        // **
        // **
        private function selectHandler(evt:Event):void {
            try {
                progressBar.visible = true;
                cancelButton.visible = true;
                progressBar.label = "0%";
                uploadButton.enabled = false;                   

                fileListInfo["numfiles"] = myFileRef.fileList.length;
                fileListInfo["totalsize"] = getTotalUploadBytes(myFileRef);

                uploadFile();

            } catch (err:Error) {
                uploadCurrent.text = "Error: zero-byte file";
            }
        }


        // When all files are uploaded resets some variables
        // **
        // **
        private function allFilesUploaded():void {
            progressBar.label = "100%";
            if(myFileRef.fileList.length==1)
                uploadCurrent.text = "File uploaded successfully!";
            else
                uploadCurrent.text = "All "+myFileRef.fileList.length+" files uploaded successfully!";

            uploadButton.enabled = true;
            cancelButton.visible = false;
            reset();
        }


        // Uploads all files that were inserted in a linear order
        // @param null
        // @return void          
        private function uploadFile():void {
            if(fileNumber>=fileListInfo["numfiles"]) {
                allFilesUploaded();
            }
            else {
                item = myFileRef.fileList[fileNumber];
                uploadCurrent.text = item.name;
                item.addEventListener(ProgressEvent.PROGRESS, progressHandler);
                item.addEventListener(Event.COMPLETE, completeHandler);
                item.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);

                // get user variables
                var params:URLVariables = new URLVariables();
                params.opt = Application.application.parameters.opt;
                params.ssid = Application.application.parameters.ssid;
                params.upload_url = Application.application.parameters.upload_url;

                // makes this a post request and sends allong both the ID and PHP_SESSION along
                var request:URLRequest = new URLRequest(params.upload_url);
                request.method = URLRequestMethod.POST;
                request.data = params;

                item.upload(request);
                fileNumber++;
            }
        }



        private function progressHandler(evt:ProgressEvent):void {
            uploadCurrent.text = evt.currentTarget.name;

            progressBar.setProgress(fileListDoneSoFar+evt.bytesLoaded, fileListInfo["totalsize"]);
            progressBar.label = numberFormater.format(((fileListDoneSoFar+evt.bytesLoaded)*100/fileListInfo["totalsize"])*0.98)+"%";


        }

        private function completeHandler(evt:Event):void {
            javascriptComplete();
            fileListDoneSoFar += evt.currentTarget.size;
            uploadFile();
        }
    ]]>
</mx:Script>

<mx:NumberFormatter id="numberFormater" rounding="up" />
<mx:Canvas x="0" y="0" width="280" height="70" borderColor="#EFEFEF" backgroundColor="#EFEFEF">
    <mx:Button id="uploadButton" label="upload files (max. 50MB)"
        click="browseAndUpload();"  x="2" y="25" fontSize="10" fontFamily="Arial" width="167"/>
    <mx:Button id="cancelButton" click="cancel();" visible="false" y="25" label="cancel" width="96" fontFamily="Arial" x="182"/>
    <mx:ProgressBar mode="manual" x="2" y="1" id="progressBar" visible="false" labelPlacement="center" width="276" height="19" fontSize="9"/>
    <mx:Label id="uploadCurrent"  x="2" y="51" width="276" text=""/>
</mx:Canvas>