Search code examples
actionscript-3apache-flexdrag-and-dropflex4

How to get image if I drag and drop an Image from Google Chrome or Internet Explorer in AS3


I am trying to drag an Image from Google Chrome or Internet Explorer and Drop into my Flex Project but I am unable to get Image directly from temp folder like Mozilla Firefox,

For Example I am using the following codes go get drag drop images from system temp folder in case of Mozilla Firefox:

this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onNativeDragDrop);

private function onNativeDragDrop(vEvent:NativeDragEvent)
{
    var dropFiles:Array = vEvent.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

    if(dropFiles && dropFiles.length > 0)
    {
        var original:File = File(dropFiles[0]);
        var nativePath:String = original.nativePath;
    }
}

In nativePath i am getting the path where the image is initially stored like : "C:\Users\User_Name\AppData\Local\Temp\ubeh2wbl.bmp"

But In case of Google Chrome or Internet Explorer I am getting NULL in nativePath.

So I Don't know where Google Chrome or Internet Explorer initially storing the images.

Does anyone have an idea where it is storing or how to solve this problem ?


Solution

  • I just tried this, and when you drag an image from Chrome over the an AIR app, it comes in as the following formats:

    1. file promise list
    2. url
    3. text
    4. html

    The file promise list is empty, so we'll focus on the others.

    Here is the code I used which falls back through several formats to try and get a dragged image or image path:

        private function onNativeDragDrop(e:NativeDragEvent):void
        {
            var img:DisplayObject; //the image (or first image) that was dragged
    
            //IF IT'S A BITMAP (The easiest, so check it first)
            if (e.clipboard.hasFormat(ClipboardFormats.BITMAP_FORMAT)) {
                var bmd:BitmapData = BitmapData(e.clipboard.getData(ClipboardFormats.BITMAP_FORMAT));
    
                img = new Bitmap(bmd);
                addChild(img);
                trace("It's a bitmap");
            }
    
            //IF IT'S FILE(S) that are dragged, try this next
            if (!img && e.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) {
    
                var dropfiles:Array;
                var file:File;
    
                dropfiles = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
                for each (file in dropfiles)
                {
                    //isImagePath is defiend below
                    if (isImagePath(file.nativePath)) {
                        img = loadImage(file.nativePath); //load image function is defined below
                        break; //let's just load the first image
                    }
                }
    
            }
    
            //IF IT's A URL that was dragged, try this next
            if (!img && e.clipboard.hasFormat(ClipboardFormats.URL_FORMAT)) {
                var url:String = String(e.clipboard.getData(ClipboardFormats.URL_FORMAT));
                trace("It's a url: ", url);
                if (isImagePath(url)) {
                    trace("it's a URL image path");
                    img = loadImage(url);
                }
    
            }
    
            //IF IT's HTML that was dragged, try this next
            if (!img && e.clipboard.hasFormat(ClipboardFormats.HTML_FORMAT)) {
                var html:String = String(e.clipboard.getData(ClipboardFormats.HTML_FORMAT));
                trace("its HTML: ", html);
    
                //use regex to get all the <img> tags from the html
                var imgs:Array = html.match(/(<img.*?>)/g);
    
                //if one or more was found
                if (imgs.length) {
                    trace("Image tag(s) found");
                    var imgPath:String;
                    for (var i:int = 0; i < imgs.length; i++) {
                        //use regex to get the src value from the img tag
                        imgPath = imgs[i].match(/src="(.*?)"/)[1];
                        img = loadImage(imgPath);
                        break; //let's just load the first image
                    }
                }
            }
    
            //IF IT's raw text that dragged, try this next
            if (!img && e.clipboard.hasFormat(ClipboardFormats.TEXT_FORMAT)) {
                var txt:String = String(e.clipboard.getData(ClipboardFormats.TEXT_FORMAT));
                trace("its text: ", txt);
    
                if (isImagePath(txt)) {
                    img = loadImage(txt);
                }
            }
    
        }
    
        private var imgTypes:Vector.<String> = new < String > ["jpg", "gif", "png"];
        private function isImagePath(path:String):Boolean {
            if (path.lastIndexOf(".") > -1) {
                var ext:String = path.substr(path.lastIndexOf(".")).toLowerCase();
                return new RegExp(imgTypes.join("|")).test(ext);
            }
    
            return false;
        }
    
        private function loadImage(path):Loader {
            var l:Loader = new Loader();
            l.load(new URLRequest(path));
            addChild(l);
            return l;
        }