4 Replies Latest reply on Jul 7, 2009 6:29 AM by meshgraphics

    Help with Upload file to Server Examples

    PastaPrimavera Level 1

      I have been working with the examples for how to upload a file to the server. Though i got the example to work. there is one more thing i need to do. i need to allow the user to be able to select multiple files.  In the example when you click on Upload, it opens a MS window to allow you to select a file. This example does not allow you to select more then one file though. I found another example for selecting multiple files but this one differs very much in that the person who make it "Ryan Favro" created a whole new GUI window to select multiple files. those his example works great, i dont want a special window to select files, i want the MS window to do it.

       

      Is there a way to make the original example that uses the MS window to allow the user to select multiple files ?

       

       

      I have attached the example that uses the MS window.

       

       

       

       

        • 1. Re: Help with Upload file to Server Examples
          DM277

          Hi,

           

          You can use fileReferenceList class to upload multiple files to the server.

          • 2. Re: Help with Upload file to Server Examples
            shivang11

            Hi,

             

            Use this code. May be it helps u.

             

            fileuploadapp.mxml

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="test.*" layout="absolute"
                creationComplete="initApp()" viewSourceURL="srcview/index.html">
               
                <mx:Script>
                    <![CDATA[
                   
                        import mx.controls.Alert;
                       
                        private const _strDomain:String = new String("http://localhost:8400/");
                        private const _strUploadScript:String = new String(_strDomain + "ProcessFileUp/UploadFile");
                       
                        // Initalize
                        private function initApp():void {
                            Security.allowDomain(_strDomain);
                        }
                       
                    ]]>
                </mx:Script>
               
                <mx:Canvas width="400" height="300" horizontalCenter="0" verticalCenter="0">
                    <com:FileUpload
                        width="100%" height="100%"
                        uploadUrl="{_strUploadScript}"
                        uploadComplete="Alert.show('File(s) have been uploaded.', 'Upload successful')"
                        uploadIOError="Alert.show('IO Error in uploading file.', 'Error')"
                        uploadSecurityError="Alert.show('Security Error in uploading file.', 'Error')"/>
                </mx:Canvas>
            </mx:Application>

             

             

            fileuoload.mxml

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="*"
                layout="vertical" width="100%" minWidth="400" height="100%" minHeight="200"
                title="Upload Files" creationComplete="initCom()">
               
                <mx:Metadata>
                    [Event(name="uploadComplete", type="flash.events.Event")]
                    [Event(name="uploadProgress", type="flash.events.ProgressEvent")]
                    [Event(name="uploadCancel", type="flash.events.Event")]
                    [Event(name="uploadIOError", type="flash.events.IOErrorEvent")]
                    [Event(name="uploadSecurityError", type="flash.events.SecurityErrorEvent")]
                </mx:Metadata>

             

                <mx:Script>
                    <![CDATA[
                       
                       
                        import mx.controls.*;
                        import mx.managers.*;
                        import mx.events.*;
                        import flash.events.*;
                        import flash.net.*;
                       
                        private var _strUploadUrl:String;
                        private var _refAddFiles:FileReferenceList;   
                        private var _refUploadFile:FileReference;
                        private var _arrUploadFiles:Array;
                        private var _numCurrentUpload:Number = 0;           
                       
                        // Set uploadUrl
                        public function set uploadUrl(strUploadUrl:String):void {
                            _strUploadUrl = strUploadUrl;
                        }
                       
                        // Initalize
                        private function initCom():void {
                            _arrUploadFiles = new Array();               
                            enableUI();
                            uploadCheck();
                        }
                       
                        // Called to add file(s) for upload
                        private function addFiles():void {
                            _refAddFiles = new FileReferenceList();
                            _refAddFiles.addEventListener(Event.SELECT, onSelectFile);
                            _refAddFiles.browse();
                        }
                       
                        // Called when a file is selected
                        private function onSelectFile(event:Event):void {
                            var arrFoundList:Array = new Array();
                            // Get list of files from fileList, make list of files already on upload list
                            for (var i:Number = 0; i < _arrUploadFiles.length; i++) {
                                for (var j:Number = 0; j < _refAddFiles.fileList.length; j++) {
                                    if (_arrUploadFiles[i].name == _refAddFiles.fileList[j].name) {
                                        arrFoundList.push(_refAddFiles.fileList[j].name);
                                        _refAddFiles.fileList.splice(j, 1);
                                        j--;
                                    }
                                }
                            }
                            if (_refAddFiles.fileList.length >= 1) {               
                                for (var k:Number = 0; k < _refAddFiles.fileList.length; k++) {
                                    _arrUploadFiles.push({
                                        name:_refAddFiles.fileList[k].name,
                                        size:formatFileSize(_refAddFiles.fileList[k].size),
                                        file:_refAddFiles.fileList[k]});
                                }
                                listFiles.dataProvider = _arrUploadFiles;
                                listFiles.selectedIndex = _arrUploadFiles.length - 1;
                            }               
                            if (arrFoundList.length >= 1) {
                                Alert.show("The file(s): \n\n• " + arrFoundList.join("\n• ") + "\n\n...are already on the upload list. Please change the filename(s) or pick a different file.", "File(s) already on list");
                            }
                            updateProgBar();
                            scrollFiles();
                            uploadCheck();
                        }
                       
                        // Called to format number to file size
                        private function formatFileSize(numSize:Number):String {
                            var strReturn:String;
                            numSize = Number(numSize / 1000);
                            strReturn = String(numSize.toFixed(1) + " KB");
                            if (numSize > 1000) {
                                numSize = numSize / 1000;
                                strReturn = String(numSize.toFixed(1) + " MB");
                                if (numSize > 1000) {
                                    numSize = numSize / 1000;
                                    strReturn = String(numSize.toFixed(1) + " GB");
                                }
                            }               
                            return strReturn;
                        }
                       
                        // Called to remove selected file(s) for upload
                        private function removeFiles():void {
                            var arrSelected:Array = listFiles.selectedIndices;
                            if (arrSelected.length >= 1) {
                                for (var i:Number = 0; i < arrSelected.length; i++) {
                                    _arrUploadFiles[Number(arrSelected[i])] = null;
                                }
                                for (var j:Number = 0; j < _arrUploadFiles.length; j++) {
                                    if (_arrUploadFiles[j] == null) {
                                        _arrUploadFiles.splice(j, 1);
                                        j--;
                                    }
                                }
                                listFiles.dataProvider = _arrUploadFiles;
                                listFiles.selectedIndex = 0;                   
                            }
                            updateProgBar();
                            scrollFiles();
                            uploadCheck();
                        }
                       
                        // Called to check if there is at least one file to upload
                        private function uploadCheck():void {
                            if (_arrUploadFiles.length == 0) {
                                btnUpload.enabled = false;
                                listFiles.verticalScrollPolicy = "off";
                            } else {
                                btnUpload.enabled = true;
                                listFiles.verticalScrollPolicy = "on";
                            }
                        }
                       
                        // Disable UI control
                        private function disableUI():void {
                            btnAdd.enabled = false;
                            btnRemove.enabled = false;
                            btnUpload.enabled = false;
                            btnCancel.enabled = true;
                            listFiles.enabled = false;
                            listFiles.verticalScrollPolicy = "off";
                        }
                       
                        // Enable UI control
                        private function enableUI():void {
                            btnAdd.enabled = true;
                            btnRemove.enabled = true;
                            btnUpload.enabled = true;
                            btnCancel.enabled = false;
                            listFiles.enabled = true;
                            listFiles.verticalScrollPolicy = "on";
                        }
                       
                        // Scroll listFiles to selected row
                        private function scrollFiles():void {
                            listFiles.verticalScrollPosition = listFiles.selectedIndex;
                            listFiles.validateNow();
                        }
                       
                        // Called to upload file based on current upload number
                        private function startUpload():void {
                            if (_arrUploadFiles.length > 0) {
                                disableUI();
                               
                                listFiles.selectedIndex = _numCurrentUpload;
                                scrollFiles();
                               
                                // Variables to send along with upload
                                var sendVars:URLVariables = new URLVariables();
                                sendVars.action = "upload";
                               
                                var request:URLRequest = new URLRequest();
                                request.data = sendVars;
                                request.url = _strUploadUrl;
                                request.method = URLRequestMethod.POST;
                                _refUploadFile = new FileReference();
                                _refUploadFile = listFiles.selectedItem.file;
                                _refUploadFile.addEventListener(ProgressEvent.PROGRESS, onUploadProgress);
                                   _refUploadFile.addEventListener(Event.COMPLETE, onUploadComplete);
                                _refUploadFile.addEventListener(IOErrorEvent.IO_ERROR, onUploadIoError);
                                  _refUploadFile.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onUploadSecurityError);
                                _refUploadFile.upload(request, "file", false);
                            }
                        }
                       
                        // Cancel and clear eventlisteners on last upload
                        private function clearUpload():void {
                            _refUploadFile.removeEventListener(ProgressEvent.PROGRESS, onUploadProgress);
                            _refUploadFile.removeEventListener(Event.COMPLETE, onUploadComplete);
                            _refUploadFile.removeEventListener(IOErrorEvent.IO_ERROR, onUploadIoError);
                            _refUploadFile.removeEventListener(SecurityErrorEvent.SECURITY_ERROR, onUploadSecurityError);
                            _refUploadFile.cancel();
                            _numCurrentUpload = 0;
                            updateProgBar();
                            enableUI();
                        }
                       
                        // Called on upload cancel
                        private function onUploadCanceled():void {
                            clearUpload();
                            dispatchEvent(new Event("uploadCancel"));
                        }
                       
                        // Get upload progress
                        private function onUploadProgress(event:ProgressEvent):void {
                            var numPerc:Number = Math.round((event.bytesLoaded / event.bytesTotal) * 100);
                            updateProgBar(numPerc);
                            var evt:ProgressEvent = new ProgressEvent("uploadProgress", false, false, event.bytesLoaded, event.bytesTotal);
                            dispatchEvent(evt);
                        }
                       
                        // Update progBar
                        private function updateProgBar(numPerc:Number = 0):void {
                            var strLabel:String = (_numCurrentUpload + 1) + "/" + _arrUploadFiles.length;
                            strLabel = (_numCurrentUpload + 1 <= _arrUploadFiles.length && numPerc > 0 && numPerc < 100) ? numPerc + "% - " + strLabel : strLabel;
                            strLabel = (_numCurrentUpload + 1 == _arrUploadFiles.length && numPerc == 100) ? "Upload Complete - " + strLabel : strLabel;
                            strLabel = (_arrUploadFiles.length == 0) ? "" : strLabel;
                            progBar.label = strLabel;
                            progBar.setProgress(numPerc, 100);
                            progBar.validateNow();
                        }
                       
                        // Called on upload complete
                        private function onUploadComplete(event:Event):void {
                            _numCurrentUpload++;               
                            if (_numCurrentUpload < _arrUploadFiles.length) {
                                startUpload();
                            } else {
                                enableUI();
                                clearUpload();
                                dispatchEvent(new Event("uploadComplete"));
                            }
                        }
                       
                        // Called on upload io error
                        private function onUploadIoError(event:IOErrorEvent):void {
                            clearUpload();
                            var evt:IOErrorEvent = new IOErrorEvent("uploadIoError", false, false, event.text);
                            dispatchEvent(evt);
                        }
                       
                        // Called on upload security error
                        private function onUploadSecurityError(event:SecurityErrorEvent):void {
                            clearUpload();
                            var evt:SecurityErrorEvent = new SecurityErrorEvent("uploadSecurityError", false, false, event.text);
                            dispatchEvent(evt);
                        }
                       
                        // Change view state
                        private function changeView():void {
                            currentState = (currentState == "mini") ? "" : "mini";
                        }
                       
                    ]]>
                </mx:Script>
               
                <mx:states>
                    <mx:State name="mini">
                        <mx:SetProperty name="height" value="60"/>
                        <mx:SetProperty name="minHeight" value="60"/>
                        <mx:SetStyle target="{btnView}" name="icon" value="@Embed('assets/application_put.png')"/>
                    </mx:State>
                </mx:states>
               
                <mx:transitions>
                    <mx:Transition fromState="*" toState="*">
                        <mx:Resize target="{this}" duration="1000"/>
                    </mx:Transition>
                </mx:transitions>
               
                <mx:Canvas width="100%" height="100%">
                    <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>
                </mx:Canvas>
                <mx:ControlBar horizontalAlign="center" verticalAlign="middle">
                    <mx:Button id="btnAdd" toolTip="Add file(s)" click="addFiles()" icon="@Embed('assets/add.png')" width="26"/>
                    <mx:Button id="btnRemove" toolTip="Remove file(s)" click="removeFiles()" icon="@Embed('assets/delete.png')" width="26"/>
                    <mx:ProgressBar id="progBar" mode="manual" label="" labelPlacement="center" width="100%"/>
                    <mx:Button id="btnCancel" toolTip="Cancel upload" icon="@Embed('assets/cancel2.png')" width="26" click="onUploadCanceled()"/>
                    <mx:Button label="Upload" toolTip="Upload file(s)" id="btnUpload" click="startUpload()" icon="@Embed('assets/bullet_go.png')"/>
                    <mx:Button id="btnView" toolTip="Show/Hide file(s)" icon="@Embed('assets/application_get.png')" width="26" click="changeView()"/>
                </mx:ControlBar>   
            </mx:Panel>

             

            Regards,

                 Shivang

            • 3. Re: Help with Upload file to Server Examples
              PastaPrimavera Level 1

              yes, i want to use the fileReferenceList class, but i have not found an example of how to use it without without having to crate a special window to select files. i want to use the default Microsoft file window selector to select multiple files.

              • 4. Re: Help with Upload file to Server Examples
                meshgraphics Level 2

                You will want to communicate with the browser.  The file name  selected will be returned to the javascript.  Flex will need to read a dom property to get the file name.  Then you'll need to find out if the browser/os will give you a handle to the file for uploading.

                 

                Party on!