Displaying progressbar for file upload - apache-flex

I need to create an application where I can add files for upload. As I add items for upload, a progressbar should be displayed along with each item added. And when I click for file upload, the progress of file upload for each file should be reflected in the progress bar. The progress should use the function like
.....
addEventListener(ProgressEvent.Progress, uploadProgressHandler);
private function uploadProgressHandler(event:ProgressEvent):void
{
var numPerc:Number = Math.round((Number(event.bytesLoaded) / Number(event.bytesTotal)) * 100);
//this.progBar.validateNow();
.....
}
Can anyone provide help me out?

See these examples:
Multiple File Upload with Flex and PHP
which looks like this:
Multiple File Upload With Progress Bar Using Flash and ASP.NET
which looks like this:

Flex has a ProgressBar class, have you checked that out yet?

Here are two great examples of Flex file uploaders (using HTTP):
Flex File Uploader using PHP, with source.
Merb and Adobe AIR File Uploader, with source.
alt text http://blog.vixiom.com/uploads/merb_air_upload.png
In order to make the above two examples work together to achieve the desired result (multiple file uploader, one ProgressBar per preloader, in Flex), all you need to do is:
Download the Flex File Uploader PHP Project
Download the Merb AIR Uploader and copy/paste the "UploadProgressComponent.mxml" somewhere into the PHP project (copy to src/UploadProgressComponent.mxml for now).
Replace the DataGrid with a List and a Custom ItemRenderer in FileUpload.mxml in the Flex File Uploader PHP Project.
Replace this:
<mx:DataGrid id="listFiles" left="0" top="0" bottom="0" right="0"
allowMultipleSelection="true" verticalScrollPolicy="on"
draggableColumns="false" resizableColumns="false" sortableColumns="false">
<mx:columns>
<mx:DataGridColumn headerText="File" dataField="name" wordWrap="true"/>
<mx:DataGridColumn headerText="Size" dataField="size" width="75" textAlign="right"/>
</mx:columns>
</mx:DataGrid>
with this:
<mx:List id="listFiles" left="0" top="0" bottom="0" right="0"
allowMultipleSelection="true" verticalScrollPolicy="on"
itemRenderer="UploadProgressComponent"/>
The result: Multiple file uploader in Flex, with a custom ItemRenderer that has a ProgressBar for each FileReference. Uploads to a PHP script, which you can swap out for anything.
Should be very easy to customize from there. Let me know if that works,
Lance

Related

Datagrid for flex mobile

I've seen many posts on using datagrid for flex mobile apps and the performance issues that comes with it.
I wish i could get those performance issues because my problem is that i can't even see the datagrid component in my component list, only list, datagroup e.t.c
I have tried to uncheck the "Only show recemmended component" but i still cant find it in the component list. But when i create a flex project (not mobile), i see it. But then, i want to use it in a mobile project.
This will be my first mobile app. Any help will be appreciated.
Thanks in advance.
How about write below code? Of course, you can add component at source view also. Not only can it by using design view and component list.
<s:DataGrid id="grid" width="100%" height="100%">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="name" headerText="Name"/>
<s:GridColumn dataField="age" headerText="Age"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
As far as I remember, it can use DataGrid in mobile project without any special settings.

How to display logos in Flex 3.2?

I have been given the unenviable task of displaying a logo on a flex 3.2 form on our website. I'm learning flex as I go, and I can embed a logo now.
The problem is, I need to display a different logo, depending on which client the user works for. And I need to have it working by end of day, Friday, August 30th. As in, this Friday.
This is the code I have for embedding the logo:
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%" colSpan="6">
<mx:Image width="180" source="#Embed('/assets/images/logo.JPG')"/>
</mx:GridItem>
</mx:GridRow>
So, what I need to know is, is there any way to get Flex 3.2 to display a different logo for each client? The above code obviously isn't going to do it.
As a further bit of info, we do have the logos as blobs in the Oracle database.
Thanks for any help.
You need not embed, you can give path to the images on the server. like
<mx:Image width="180" source="http://somedomain.com/images/logo.JPG"
id='image'/>
OR, using the id of the image component, you can assign the logo dynamically, like the following
private function onCreationcomplete(e:FlexEvent):void
{
if(client ='xxyy'){
image.source = 'http://somedomain.com/images/xxyy.JPG ';
}
}
If you are familiar with BlazeDS, then you could try this approach: BLOB from Java to Flex via BlazeDS.
For the approach from #Zeus I would recommend to write an image servlet which delivers the client logo at request from your database blob.

How to Import FileReference and FileSystemTree to ActionScript

I tried to insert a FileSystemTree in Flex .
Flash Builder doesn't recognise that and produces the error:
1046: Type was not found or was not a compile-time constant: FileSystemTree
Here's the code . It's a very basic one ....
<mx:HDividedBox width="100%" height="725" paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10" y="41">
<mx:VBox width="200" height="100%">
<mx:FileSystemTree id="fileSystemTree" width="100%" height="100%" change="onChange(event)" />
</mx:VBox>
<mx:Canvas width="100%" height="100%" id="content" ></mx:Canvas>
</mx:HDividedBox>
I'm using Flex 4 , Flash Builder 4. What am i doing wrong ? Is FileSystemTree supported in Flex 4 ?
That component is only available within Adobe AIR applications, not browser-based Flex applications, since browsing the local file system would violate the browser sandbox.
EDIT: Now that I understand your intention, yes, you can upload files from a flex application without having to use AIR. Instead of using the FileSystemTree component (which is AIR only), you use FileReference.browse() to allow the user to select a file from the local filesystem to upload. This page from the documentation will give you all the info you need: Working with file upload and download
Hope that helps.

Multiple initializer values in Flash Builder

Finally decided to try Flash Builder rather than FlashDevelop and got caught up on my very first app. I'm building a AIR app and downloaded the latest SDK and installed it in the Flash Builder path.
When I add a few simple items they all get errors. I added this code:
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingTop="10"/>
<s:Label id="myLabel" text="Some text stuff I typed."/>
<s:Button click="myLabel.text='Some stuff the button typed'"/>
</s:layout>
And I get an error on each spark item (except layout) that says:
In initializer for 'layout', multiple initializer values for target type spark.layouts.supportClasses.LayoutBase.
I've searched google with no real results. Does anyone know what this error is telling me? Is there a problem with the SDK installation? I followed install instructions from a Lynda.com vid.
Thanks for the help!
Not sure which Flex SDK or Flash builder version you are working with but in version 4 try this,
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingTop="10"/>
</s:layout>
<s:Label id="myLabel" text="Some text stuff I typed."/>
<s:Button click="myLabel.text='Some stuff the button typed'"/>
You create the components after the closing layout tag not inside it.

Classes must not be nested - MXML

I'm trying to build a simple FLEX application. Unfortunately, I get '1131: Classes must not be nested.' errors even with the simples MXML .... the error pops out at the mx:Application openning tag:
(I'm using PureMVC if it's important)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:view="icm.view.components.*"
viewSourceURL="srcview/index.html"
name="ICM"
layout="absolute"
> //FLEX BUILDER SAYS THE ERROR IS HERE
<mx:Script>
<![CDATA[
import mx.effects.easing.Exponential;
import icm.ApplicationFacade;
public static const NAME:String = "AppSkeleton";
private var facade:ApplicationFacade = ApplicationFacade.getInstance(NAME);
]]>
</mx:Script>
<mx:Move id="slideInEffect" yFrom="5000" easingFunction="{Exponential.easeOut}" duration="1300"/>
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Style source="css/yflexskin.css" />
<mx:Canvas id="mainViewStack" left="0" top="0" right="0" bottom="0" >
<mx:ViewStack id="vwStack" left="0" top="0" right="0" bottom="0" resizeToContent="false" creationPolicy="auto">
<mx:VBox />
<view:SplashScreen id="splashScreen" showEffect="{slideInEffect}" hideEffect="{fadeOut}" />
<view:LoginScreen id="loginScreen" showEffect="{fadeIn}" />
<view:MainScreen id="mainScreen" showEffect="{fadeIn}" />
</mx:ViewStack>
</mx:Canvas>
</mx:Application>
Can someone help me understand why? I've being doing a lot of non-sense tests because I'm not understanding it.
Sometimes if I remove the Script section the compilation suceed, others not.
Thanks
Thank you all for the comments.
The greatest tip at this topic is: build with the SDK!!!
Flex Builder (both, the IDE and the Plugin) seems to lack a lot of features on error treatment and even when it reports an error it's not reliable.
A prompt window for compiling used with the IDE saved me a lot of headaches.
Thank you all again!
I had this problem using a compiler option to exclude/include some code
like -define+=CONFIG::myOption,true
when the option is true (resulting including some code), and you have such thing into your code :
CONFIG::myOption {
import <a package>;
}
this will result in a 1131 error... I have no workaround but not using such conditional compilation directives.
There is a flex compiler option "Enable Strict type checking" just de-select it. I think that can give so a simple solution....
http://blog.gigantt.com/2011/02/how-to-build-flex-sdk.html
Building
Let's create a batch file to set some useful envars: envars.bat
set JAVA_HOME=c:\Program Files\Java\jdk1.6.0_23
set PATH=c:\dev\ant\bin;%PATH%
set ANT_OPTS=-Xmx256m
Open cmd.exe and run it...
Edit c:\dev\sdk\frameworks\build.xml
Look for:
And fix the location of the manifest file from:
"${datavis.dir}/manifest.xml" to:
"${datavis.dir}/manifest_datavisualization.xml"
Run Ant:c:\dev\sdk\frameworks> ant
It should end with such a message: BUILD SUCCESSFUL
Now let's tell Flash Builder where to find this new SDK: c:\dev\sdk
Add it to the "Installed SDKs" settings in Flash Builder
Make sure your project is configured to use this SDK (it was probably created with the original one and still refers to it).
Rebuild your project. It should work.

Resources