Solved

Image upload in  Flex

Posted on 2010-11-08
3
1,108 Views
Last Modified: 2013-11-11
Dear Experts,
I try to upload image to server in Flex4 using Actionscript3. I giving  my code here.
i using two file here one is AS file and Second is Mxml File

My problem is when i click upload button which is available in Mxml File not firing. why ?

you can find  code from this url
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_26520927.html?

    Or

----AS File-------
package de.cware.cweb.core.dialogControls
{
            
            import Components.ImageTest1;
            
            import flash.events.Event;
            import flash.events.IOErrorEvent;
            import flash.events.MouseEvent;
            import flash.events.ProgressEvent;
            import flash.net.FileFilter;
            import flash.net.FileReference;
            import flash.net.URLRequest;
            
            import mx.controls.Alert;
            import mx.controls.ProgressBar;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;
            
            import spark.components.Button;
            import spark.components.Label;
            import spark.components.supportClasses.SkinnableComponent;
            
            
            
            public class FileUploader extends SkinnableComponent {
                  
                  [SkinPart]
                  public var uploadButton:Button;
                  
                  [SkinPart]
                  public var progressBar:ProgressBar;
                  
                  [SkinPart]
                  public var messageLabel:Label;
                  
                  private var fileReference:FileReference;
                  private var _fileFilters:Array;
                  private var _uploadUrl:String;
                  
                  public function FileUploader() {
                        super();
                        
                        addEventListener(FlexEvent.CREATION_COMPLETE, init);
                  }
                  
                  private function init(event:FlexEvent):void {
                        // Initialize the FileReference.
                        fileReference = new FileReference();
                        fileReference.addEventListener(Event.SELECT, onFileReferenceSelect);
                        fileReference.addEventListener(ProgressEvent.PROGRESS, onFileReferenceProgress);
                        fileReference.addEventListener(Event.COMPLETE, onFileReferenceComplete);
                        fileReference.addEventListener(FaultEvent.FAULT, onError);
                        fileReference.addEventListener(IOErrorEvent.DISK_ERROR, onError);
                        fileReference.addEventListener(IOErrorEvent.IO_ERROR, onError);
                        fileReference.addEventListener(IOErrorEvent.NETWORK_ERROR, onError);
                        fileReference.addEventListener(IOErrorEvent.VERIFY_ERROR, onError);
                  }
                  
                  override protected function partAdded(partName:String, instance:Object):void {
                        super.partAdded(partName, instance);
                        
                        if(instance == uploadButton) {
                              uploadButton.addEventListener(MouseEvent.CLICK, onButtonClick);
                        }
                  }
                  
                  override protected function partRemoved(partName:String, instance:Object):void {
                        super.partRemoved(partName, instance);
                        
                        if(instance == uploadButton) {
                              uploadButton.removeEventListener(MouseEvent.CLICK, onButtonClick);
                        }
                  }
                  
                  public function get uploadUrl():String {
                        return _uploadUrl;
                  }
                  
                  public function set uploadUrl(value:String):void {
                        _uploadUrl = value;
                  }
                  
                  public function get fileFilters():Array {
                        return _fileFilters;
                  }
                  
                  public function set fileFilters(value:Array):void {
                        _fileFilters = value;
                  }
                  
                  private function onButtonClick(event:MouseEvent):void {
                        var imagesFilter:FileFilter = new FileFilter("Images", "*.gif;*.jpg;*.png");
                        var docFilter:FileFilter = new FileFilter("Archives", "*.ar;*.bzip2;*.cpio;*.gzip;*.tar;*.zip");
                        _fileFilters = [imagesFilter, docFilter];
                        fileReference.browse(_fileFilters);
                  }
                  
                  private function onFileReferenceSelect(evt:Event):void {
                        try {
                              //messageText = "size (bytes): " + numberFormatter.format(fileReference.size);
                              fileReference.upload(new URLRequest(uploadUrl + "&fileName=" + fileReference.name));
                        } catch (err:Error) {
                              messageText = "ERROR: zero-byte file";
                        }
                  }
                  
                  private function onFileReferenceProgress(evt:ProgressEvent):void {
                        trace(evt.bytesTotal + " bytes of " +  evt.bytesLoaded + " uploaded.");
                        
                        if(progressBar) {
                              progressBar.visible = true;
                              progressBar.setProgress(evt.bytesTotal / evt.bytesLoaded, 100);
                        }
                  }
                  
                  private function onFileReferenceComplete(evt:Event):void {
                        messageText = messageText + " (complete)";
                        progressBar.visible = false;
                  }
                  
                  private function onError(event:Event):void {
                        Alert.show(event.toString());
                  }
                  
                  private function set messageText(msg:String):void {
                        if(messageLabel) {
                              messageLabel.text = msg;
                        }
                  }
                  
                  private function get messageText():String {
                        if(messageLabel) {
                              return messageLabel.text;
                        }
                        return "";
                  }
            }
      
            
      

}






--------------Mxml File content



<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx">
      <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
      </fx:Declarations>
      
      <fx:Script >
            <![CDATA[
                  public var ControlArray:Array=new Array();
                  
             
                  
            ]]>
      </fx:Script>
      
      <s:VGroup>
            <s:Button id="uploadButton" label="Upload File" width="100%"/>
      
      </s:VGroup>
      
</s:Skin>

0
Comment
Question by:RakeshBhandari
3 Comments
 
LVL 19

Accepted Solution

by:
moagrius earned 500 total points
ID: 34109425
i'm not terribly familiar with Flex 4 or the spark package you're extending, but i'd try adding the event listener within init()...
private function init(event:FlexEvent):void {
                        // the line just below is the only change
                        uploadButton.addEventListener(MouseEvent.CLICK, onButtonClick);

                        // Initialize the FileReference.
                        fileReference = new FileReference();
                        fileReference.addEventListener(Event.SELECT, onFileReferenceSelect);
                        fileReference.addEventListener(ProgressEvent.PROGRESS, onFileReferenceProgress);
                        fileReference.addEventListener(Event.COMPLETE, onFileReferenceComplete);
                        fileReference.addEventListener(FaultEvent.FAULT, onError);
                        fileReference.addEventListener(IOErrorEvent.DISK_ERROR, onError);
                        fileReference.addEventListener(IOErrorEvent.IO_ERROR, onError);
                        fileReference.addEventListener(IOErrorEvent.NETWORK_ERROR, onError);
                        fileReference.addEventListener(IOErrorEvent.VERIFY_ERROR, onError);
                  }

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now