Home arrow PHP arrow Page 3 - Building a Flex Multiple File Uploader with Image Preview

Getting the Files - PHP

As the Internet integrates itself more and more into our daily lives, we see the popularity of electronic media spread like a virus. Websites like Youtube and Flickr have had a great deal of success by primarily focusing on user-generated content. Because so many people are uploading media, making the process as easy as possible makes the most sense. Keeping reading to see how Flex can do this for you.

TABLE OF CONTENTS:
  1. Building a Flex Multiple File Uploader with Image Preview
  2. Selecting Files
  3. Getting the Files
  4. Uploading
  5. Listening for Upload Events
  6. Error Event
By: Keith Lee
Rating: starstarstarstarstar / 6
December 04, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Once the user selects their files, control is passed back to our Flex app.  The list of files is now contained in the uploadList object in a property called fileList.  One important thing to note here is how your application knows when the user has finished selecting files.  The FileReferenceList object uses the "select" event to notify the application that the user has made their selection.  So, we will need to catch this event and take action when the event is dispatched.  We do this by adding the following event listener:

uploadList.addEventListener(Event.SELECT,populateDataGrid);

This line of code tells the uploadList object to call the populateDataGrid method once the user has finished selecting files.  Our populateDataGrid method will take the file list and add the names to our datagrid.  Here is the populateDataGrid method:

private function populateDataGrid(event:Event):void{

   

   // remove any previous entries in the upload list

   uploadQueue.removeAll();

   

   // add all the new items

   for each( var file:FileReference in uploadList.fileList){

        uploadQueue.addItem({name:file.name,

                                       progress:'Ready',

                                       preview:'',

                                       fileRef:file});

   }

}

The populateDataGrid function does two things:

1. Clear out the current list of items in the DataGrid.  This is done with the uploadQueue.removeAll() statement.  The uploadQueue is an ArrayCollection that we've set up for the DataGrid.  This will make it our lives easier when we begin uploading each file.  Remember, uploadQueue is the dataProvider for our DataGrid.

2. Add new data to the DataGrid.  We do this by updating our ArrayCollection with the items from the fileList.  The fileList property of our uploadList object is an array of objects of type FileReference.  We add this object to the ArrayCollection along with some other information for the DataGrid.  We could alternatively just add the FileReference Object to the ArrayCollection and NOT make it a property of the ArrayCollection Item.  I decided to keep it simple this time around.

Once the populateDataGrid method executes, our DataGrid will be populated.  We will then wait for our user to click the "Start Upload" button.



 
 
>>> More PHP Articles          >>> More By Keith Lee
 

blog comments powered by Disqus
   

PHP ARTICLES

- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates

 



© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap

Dev Shed Tutorial Topics: