Solved

Image upload in  Flex

Posted on 2010-11-08
3
1,107 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

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

896 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

11 Experts available now in Live!

Get 1:1 Help Now