4 Replies Latest reply on May 28, 2009 1:27 PM by Chris_Seahorn

    Drag & Drop Upload

    Arthur-Lockman Level 1
      I need to design a drag and drop upload for my desktop app. You need to be able to drop image files onto an area and have it shoot it up to the server. How do I capture the System events to get the file URL and name? If anyone can, help me please! Yes, I've seen the Merb on Air Upload with Ruby on Rails and it doesn't do what I want to do. I want it to automatically upload when the file is dropped. Any help is appreciated!
        • 1. Re: Drag & Drop Upload
          abeall Level 3
          I just did this same thing. Here's what you do:

          import flash.filesystem.*;
          import flash.desktop.*;

          myDropZone.addEventListener('nativeDragEnter',nativeDragEnter)
          myDropZone.addEventListener('nativeDragExit',nativeDragExit)
          myDropZone.addEventListener('nativeDragDrop',nativeDragDrop)

          function nativeDragEnter(evt){
          // only allow file lists to be dropped
          if(evt.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
          NativeDragManager.acceptDragDrop(myDropZone);
          }
          }
          function nativeDragExit(evt){
          trace('drag exit')
          }
          function nativeDragDrop(evt){
          var files:Array = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
          for each(var file:File in files){
          uploadFile(file)
          }
          }

          function uploadFile(file){
          var request:URLRequest = new URLRequest(' http://example.com');
          file.upload(request);
          file.addEventListener('progress',uploadProgress);
          file.addEventListener('ioError',uploadError);
          file.addEventListener('complete',uploadComplete);
          file.addEventListener('uploadCompleteData',uploadResponse);
          }
          function uploadProgress(evt){
          trace(evt.bytesLoaded,"/",evt.bytesTotal);
          }
          function uploadError(evt){
          trace('upload error!',evt.text);
          }
          function uploadComplete(evt){
          trace('upload success!')
          }
          function uploadResponse(evt){
          trace('upload server response:',evt.data)
          }

          Keep in mind that doesn't include the server side script to receive the file and actually do something with it. If you look up FileReference.upload in the documentation, there's a link at the bottom to "Working with file upload and downloads" and it has a sample PHP script to receive the file and write it.
          • 2. Re: Drag & Drop Upload
            abeall Level 3
            Also note that the above code uploads all files the user drag at once, so if the user drags 20 files and drops them, it uploads all 20 simultaneously. This wasn't a problem for me because I required the user to only drag 1 file by doing this:

            function nativeDragEnter(evt){
            // only allow file lists to be dropped
            if(evt.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
            // only allow one file to be dropped at a time
            var files:Array = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
            if(files.length == 1){
            NativeDragManager.acceptDragDrop(myDropZone);
            }
            }
            }

            But you could also create an upload queue and have them be uploaded one at a time, triggering the next upload inside the uploadComplete handler.
            • 3. Re: Drag & Drop Upload
              Arthur-Lockman Level 1
              Thank You So Much!!!
              • 4. Re: Drag & Drop Upload
                Chris_Seahorn Level 1

                I also simply use PHP for concurrent drag/drop uploading with my web based FlexBlog's admin panel which is AIR based. My admin section filters what is allowed to be uploaded depending on the section and targets the matching PHP backend (which do different things based on the type of upload) to insert info into the MySQL db so I'll add a bit to abeall's great post if you find yourself in need of filtering by file type:

                 

                function nativeDragDrop(evt){
                var files:Array = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
                for each(var file:File in files){

                //filter to only upload flash files

                  if(file.extension == "swf"){
                   uploadFile(file)

                  }
                }
                }