Solved

Image upload in  Flex

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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.

744 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

15 Experts available now in Live!

Get 1:1 Help Now