I have been trying to get some basic file upload of an image working using Flex 4 and Flash 10, but when I upload an image drag and drop stops working in Firefox 3.6.3 on Mac OS X.
After the fileupload loads the new PNG file, it displays correctly, but drag and drop events don't appear to propagate any more, and the app generally freezes up. On some occasions the app starts working again until the next file upload.
I tried calling the fileupload code without doing anything with the loaded file, and the problem still occurs.
This exact code works as expected with Safari and Google Chrome (5.0.375.55) on Mac OS X.
I don't think I am trying to do anything too complex - I do not have a workaround. Ultimately I want to store the images in a back end database etc., but there is no getting around the need for fileupload. I have moved from Flex 3 / Flash 9 fileupload due to well documented and wide ranging problems.
Any suggestions are welcome... 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="init()">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.rpc.AsyncToken;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
var listContent:ArrayCollection = new ArrayCollection();
private function init():void
{
listContent.addItem({heading1:"qwe", heading2:"qwew", heading3:"wwww"});
listContent.addItem({heading1:"sdasd", heading2:"asdasd", heading3:"asdsad"});
listContent.addItem({heading1:"zxcxc", heading2:"zxcxzc", heading3:"zxczxc"});
}
// drag drop
private function dragEnterHandler(e:DragEvent):void {
DragManager.acceptDragDrop(e.currentTarget as IUIComponent);
}
private function dropHandler(event:DragEvent):void {
Alert.show("got the drop");
}
// file uplaod stuff
private var fileReference:FileReference = new FileReference();
private function uploadFile():void {
var fileFilter:FileFilter = new FileFilter("png","*.png");
fileReference.browse([fileFilter]);
fileReference.addEventListener(Event.SELECT, onFileSelected);
fileReference.addEventListener(Event.COMPLETE, onFileCompleted);
}
private function onFileSelected(event:Event):void {
fileReference.load();
}
private function onFileCompleted(event:Event):void {
fileReference = event.currentTarget as FileReference;
var data:ByteArray = fileReference.data;
background.source = fileReference.data;
}
]]>
</fx:Script>
<s:Scroller width="100%" height="100%" dragEnter="dragEnterHandler(event)" dragDrop="dropHandler(event)">
<s:Group width="100%" height="100%">
<mx:Image id="background" />
</s:Group>
</s:Scroller>
<s:Button label="Upload image" click="{uploadFile()}" />
<mx:DataGrid dataProvider="{listContent}" dragEnabled="true">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="heading1"/>
<mx:DataGridColumn headerText="Column 2" dataField="heading2"/>
<mx:DataGridColumn headerText="Column 3" dataField="heading3"/>
</mx:columns>
</mx:DataGrid>
</s:Application>
1
Reply
AdChoices