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

                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!