1 Reply Latest reply on Aug 3, 2010 2:08 PM by djh88ukwb

    Problems with Upload Component, It says it uploads, but the file dosent appear

    djh88ukwb Level 1

      Hello All !

       

      After digging about on google, i found a decent upload component that i tried to implement.  However when uploading the project, and testing.  It says that it has uploaded the selected files, but they dont appear anywhere on the server.

       

      THe code is as follows:

      <?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="initApp()" xmlns:com="com.flashdev.file.*">
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
         
          <fx:Script>
              <![CDATA[
                 
                  import mx.controls.Alert;
                 
                  private const _strDomain:String = new String("http://davidtest.webcastglobal.com/");
                  private const _strUploadScript:String = new String(_strDomain + "upload/upload.php");
                 
                  // Initalize
                  private function initApp():void {
                      Security.allowDomain(_strDomain);
                  }
                 
              ]]>
          </fx: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>
         
      </s:Application>

      <?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>

       

      The first quote is the Main.mxml, and then the second is the component, "FileUpload.mxml"

       

      Here is the PHP Script

       

      <?php

      $errors = array();
      $data = "";
      $success = "false";

      function return_result($success,$errors,$data) {
          echo("<?xml version=\"1.0\" encoding=\"utf-8\"?>");   
          ?>
          <results>
          <success><?=$success;?></success>
          <?=$data;?>
          <?=echo_errors($errors);?>
          </results>
          <?
      }

      function echo_errors($errors) {

          for($i=0;$i<count($errors);$i++) {
              ?>
              <error><?=$errors[$i];?></error>
              <?
          }
      }

      switch($_REQUEST['action']) {

          case "upload":

          $file_temp = $_FILES['file']['tmp_name'];
          $file_name = $_FILES['file']['name'];

          $file_path = $_SERVER['DOCUMENT_ROOT']."/myFileDir";

          //checks for duplicate files
          if(!file_exists($file_path."/".$file_name)) {

               //complete upload
               $filestatus = move_uploaded_file($file_temp,$file_path."/".$file_name);

               if(!$filestatus) {
               $success = "false";
               array_push($errors,"Upload failed. Please try again.");
               }

          }
          else {
          $success = "false";
          array_push($errors,"File already exists on server.");
          }

          break;

          default:
          $success = "false";
          array_push($errors,"No action was requested.");

      }

      return_result($success,$errors,$data);

      ?>

       

       

      The process that i followed when uploading all these files.

       

      1 -  Create a folder on my server called "upload"

      2 - Saved the exported UploadTests.html file along with all the other files into this folder

      3 - Saved the php file to this upload folder

      4 - Set the filepermissions to "777"

      5-  Went to uploadtests.html, tried to upload a file, it said that it was uploaded, but the file dosent actually appear anywhere.

       

       

      Am i missing something ?  Was i suppose to change somehting in the php file maybe ??