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

Building a Flex Multiple File Uploader with Image Preview

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
 
 
 

All modern browsers have some default methods of uploading which can be expanded to some degree.  But to make a really sleek application which can provide cool features like upload progress, image preview, and multiple file uploads may take a good deal of work in DHTML.  Using Flex/Flash to implement our application also brings the added capability of filtering files based on their type, which is not possible with web standards at all. Supporting an app like this on multiple browsers on multiple operating systems increases the level of complexity.   Looking at the current technology options for creating a custom uploader leaves a lot to sift through.  With that said, I think a Flash Uploader sets itself apart by allowing customizable user interfaces that work well on any platform which supports the Flash player.

What Flex brings to the table

Flex is a technology that gives us the ability to write Rich Internet Applications (RIAa) using an XML-based language (known as MXML) and ActionScript.  It differs from Flash in that it is geared toward applications, not animations or games.  These latter items can be created with Flex, but using the right tool for the job is always a good idea.  Like Flash, Flex applications compile into an SWF.  The SWF file runs in a web browser or on a desktop. Suffice it to say, the Flash player is installed on 99% of the Internet-enabled computers, so I wouldn't worry about users who can't use this application.

It is important here to emphasis the XML factor of Flex. You could write this application using Flash, but Flex brings the 'ease of use' in creating a user interface and connecting data to it. Having a base set of common components at your disposal greatly decrease your development time, allowing you to get your product to market faster.

Flex applications are built with Flex Builder, which is a free download from www.adobe.com.  There are several resources available on the web to help get you started on your own applications.  I won't cover the fundamentals of Flex Builder or Flex because it is out of the scope of this article. 

Setting up the UI

One of the main foci of our uploader will be to preview the image after the upload is complete.  This, along with having the ability to upload multiple files in succession, will dictate the type of UI we will build.  The Flex controls that lend themselves to this task most easily are the List-based controls.  In particular, because we need to display at least three types of information (the file name, the upload progress of the file, and the file image once successfully uploaded), a DataGrid is the most logical choice.  We will let Flex do a lot of the heavy lifting for us by making use of the "out of the box" controls.

With that said, let's start by creating the MXML for a UI. Take a look at the code below:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

           paddingTop="5"

           paddingLeft="5"

           paddingRight="5"

           paddingBottom="5"

           layout="vertical"

           creationComplete="init()">

    <mx:Panel width="100%" 

                   height="100%" 

                   title="Upload List" 

                   horizontalAlign="center">

        <mx:DataGrid id="fileList" width="100%" height="100%" dataProvider="{uploadQueue}">

            <mx:columns>

                <mx:DataGridColumn headerText="Filename" dataField="name"/>

                <mx:DataGridColumn headerText="Progress" dataField="progress"/>

                <mx:DataGridColumn headerText="Preview"  

                                              width="65"

                                              dataField="preview" 

                                              itemRenderer="mx.controls.Image">

                </mx:DataGridColumn>

            </mx:columns>

         </mx:DataGrid>

        <mx:ControlBar>

            <mx:HBox width="100%" horizontalAlign="center">

            <mx:ButtonBar horizontalGap="2" itemClick="buttonHandler(event)">

                <mx:dataProvider>

                    <mx:Object label="Select Files"/>

                    <mx:Object label="Start Upload"/>

                </mx:dataProvider>

            </mx:ButtonBar>

        </mx:HBox>

    </mx:ControlBar>

</mx:Panel>

Our code starts with the standard XML declaration followed by the Application tag. It is important to note that the underpinnings of Flex dictate the tags which are available to us. Each tag relates to a ActionScript Class. You can see this is action by holding down the Control-Key and clicking on the Application tag. The Flex IDE will open a new window showing you the ActionScript Class used to create the tag. The scope of this article is beyond that of an introduction to Flex . Visit the Abode Flex developer Center to get your feet wet:

http://www.adobe.com/devnet/flex/

For simplicity, I've decided to add some inline styling elements here rather than in a stylesheet.  Our Application tag sets the layout, and some padding.  This UI will be completely liquid, which will allow for the window resizing without a significant impact on the Flex application.

The next tag is a Panel.  The Panel provides a nice delineation of controls that relate to one another.  Notice we are setting the width and the height to 100%.  As stated early, this makes our layout change with the resizing of the browser.  We've given the Panel a title of "Upload List."

At the heart of the UI is the DataGrid.  Here is where we will display a list of files which are in a state of being uploaded, completely uploaded, or ready for upload.  For each file we will display its name, its progress or status, and a preview image for files that have been uploaded.  The columns tag and its descendants give us great flexibility in telling Flex what we want to appear and how we want it to appear.  

Of note in the DataGrid is the dropIn itemRenderer for column 3.  This field will make it easier for us to supply an image URL, which will appear in the DataGrid.  I won't go into too much detail about the DataGrid, but you can find more information here:

http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_6.html

http://livedocs.adobe.com/flex/3/html/cellrenderer_3.html

Tying the data to our DataGrid is the uploadQueue ArrayCollection - specified as the dataProvider attribute.  Our ArrayCollection will be poplulated with the files selected by the user for upload.  Our application will continuously update this ArrayCollection to reflect its current state.

If you are not familiar with DataGrids and ArrayCollections, I recommend taking the time to explore these subjects before continuing.  

Lastly, you will see the ControlBar, which contains the ButtonBar.  The ControlBar visually complements the Panel and gives us the opportunity to add buttons on the bottom of our Panel.  For this application we will need two buttons: "Select Files" and "Start Upload."  The ButtonBar provides a nice uniform way of displaying buttons.  Unlike a regular button, the ButtonBar uses the itemClickEvent to take action when the user clicks on one of the buttons.  We specified a function called "buttonHandlers"  to take care of this task.  Here is what buttonHandler looks like:

private function buttonHandler(event:ItemClickEvent):void{

       

       switch(event.label){

       

           case 'Select Files':

                  uploadList.browse(); 

           break;

          case 'Start Upload':

                 uploadNextFile();

          break;

       }

}

Of course, the "buttonHandler" method is contained in our Script tag.  In this method we will initiate the selection of files for uploading and starting the upload process.  Notice that I've set up a switch statement for each button.  This allows easy expandability and customization of the ButtonBar.

Here is what our UI looks like:

 



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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

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

 


Dev Shed Tutorial Topics: