1 Reply Latest reply on Mar 25, 2008 9:47 AM by jgosselin_dot3

    Image Resizer and Uploader

    jgosselin_dot3
      I am new to Flex, and I have (so far) only developed two other applications using Flex.

      I am having a really difficult time with this issue. I've tried everything (except for creating a class) that I can think of to resolve this issue, and I'm running out of ideas.

      What I am trying to do is create an AIR application that takes the selected images and resizes them to a specified maximum height and width. It is resizing the image and saving it in a temporary spot, but it will not upload after it saves it. I keep receiving the error below:
      quote:


      Error #2044: Unhandled IOErrorEvent:. text=Error #2038: File I/O Error.
      at flash.filesystem::File/resolveComponents()
      at flash.filesystem::File/resolvePath()
      at ImageUploader/saveAndUploadImage()[C:\Documents and Settings\jgosselin\workspace\ImageUploader\src\ImageUploader.mxml:136]
      at ImageUploader/uploadButton_click()[C:\Documents and Settings\jgosselin\workspace\ImageUploader\src\ImageUploader.mxml:50]
      at ImageUploader/__uploadButton_click()[C:\Documents and Settings\jgosselin\workspace\ImageUploader\src\ImageUploader.mxml:213]



      My guess is that there is a lock on the file while it is being written and it tries to upload it before it closes. However, (as shown in the code) that is not the case. The error references to lines that has nothing to do with the line of code that is causing the issue. I have stepped through the code and it stops after the FileStream close event handler has been executed. What am I missing? What is it that I am not seeing? Has anyone developed something similar to this application? As shown in the code, I am using a series of events that triggers the next step of the process.

      EDIT: The code below is a scaled-down version of the application.
        • 1. Image Resizer and Uploader
          jgosselin_dot3 Level 1
          Here is the code:
          quote:


          <?xml version="1.0" encoding="utf-8"?>
          <mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:local="SmoothImage.as" layout="vertical" horizontalGap="0" verticalGap="0" paddingLeft="8" paddingRight="8" paddingTop="8" paddingBottom="8" width="640" height="480" xmlns:local1="*">
          <mx:Script>
          <![CDATA[
          import flash.events.OutputProgressEvent;
          import flash.events.ProgressEvent;
          import flash.filesystem.File;
          import flash.filesystem.FileStream;
          import flash.net.FileReference;
          import flash.net.URLRequest;
          import mx.collections.ArrayCollection;
          import mx.controls.Alert;
          import mx.graphics.codec.JPEGEncoder;

          [Bindable] private var filesFiltered:Array;

          private var maxImageWidth:Number = 640;
          private var maxImageHeight:Number = 480;

          private var tempFile:Array;
          private var currentFile:Number;

          ...

          private function uploadButton_click(event:Event):void
          {
          tempFile = fileThumb.selectedItems;
          currentFile = 0;
          saveAndUploadImage(tempFile[currentFile]);
          }

          private function uploadFile_progress(event:ProgressEvent):void
          {
          var bytesUploaded:Number = event.bytesLoaded;
          var bytesTotal:Number = event.bytesTotal;
          uploadProgress.setProgress(bytesUploaded, bytesTotal);
          uploadProgress.label = "Uploaded: " + Math.round((bytesUploaded / bytesTotal) * 100) + "%";
          }

          private function uploadFile_complete(event:Event):void
          {
          uploadProgress.setProgress(0, 1);
          uploadProgress.label = "";

          if (currentFile + 1 < tempFile.length)
          {
          currentFile++;
          saveAndUploadImage(tempFile[currentFile]);
          }
          }

          private function newFileStream_progress(event:OutputProgressEvent):void
          {
          var bytesPending:Number = event.bytesPending;
          var bytesTotal:Number = event.bytesTotal;
          var percentage:Number = Math.round(100 - ((bytesPending / bytesTotal) * 100));

          uploadProgress.setProgress(percentage, 100);
          uploadProgress.label = "Writing: " + percentage + "%";

          if (bytesPending == 0) { event.target.close(); }
          }

          private function newFileStream_close(event:Event):void
          {
          var uploadURL:URLRequest = new URLRequest(" http://localhost:8080/customers/propertypanorama_com/fileupload.php");
          var uploadFile:FileReference = FileReference(tempFile[currentFile]);

          uploadFile.addEventListener(ProgressEvent.PROGRESS, uploadFile_progress);
          uploadFile.addEventListener(Event.COMPLETE, uploadFile_complete);
          uploadFile.upload(uploadURL, "uploadFile");

          uploadProgress.setProgress(0, 1);
          uploadProgress.label = "";
          }

          private function loader_complete(event:Event):void
          {
          var loader:Loader = Loader(event.target.loader);

          var originalWidth:Number = event.target.width;
          var originalHeight:Number = event.target.height;

          var originalBitmap:BitmapData = new BitmapData(originalWidth, originalHeight, false, 0x000000);
          originalBitmap.draw(loader.content, null, null, null, null, true);

          var newImage:BitmapData = resizeImage(originalBitmap);

          var newFileStream:FileStream = new FileStream();
          newFileStream.addEventListener(OutputProgressEvent.OUTPUT_PROGRESS, newFileStream_progress);
          newFileStream.addEventListener(Event.CLOSE, newFileStream_close);

          newFileStream.openAsync(tempFile[currentFile], FileMode.WRITE);

          var jpgEncode:JPEGEncoder = new JPEGEncoder();
          var writeData:ByteArray = jpgEncode.encode(newImage);

          newFileStream.writeBytes(writeData, 0, writeData.length);
          }

          private function saveAndUploadImage(originalImage:File):void
          {
          var fromOldExt:String = originalImage.name;
          var toJPG:String;

          if (originalImage.extension.length == 4)
          {
          toJPG = fromOldExt.substring(0, fromOldExt.length - 4) + "jpg";
          }
          else
          {
          toJPG = fromOldExt.substring(0, fromOldExt.length - 3) + "jpg";
          }

          tempFile[currentFile] = File.applicationStorageDirectory.resolvePath(toJPG);

          var loader:Loader = new Loader();
          loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_complete);
          loader.load(new URLRequest(originalImage.nativePath));
          }

          private function resizeImage(originalImage:BitmapData):BitmapData
          {
          var originalWidth:Number = originalImage.width;
          var originalHeight:Number = originalImage.height;
          var doResize:Boolean = false;

          var scaleRatio:Number = 1;

          var newImageMatrix:Matrix;
          var newImage:BitmapData;

          var newWidth:Number = 0;
          var newHeight:Number = 0;

          doResize = (originalWidth > maxImageWidth || originalHeight > maxImageHeight);
          if (doResize)
          {
          if (originalWidth > maxImageWidth)
          {
          scaleRatio = maxImageWidth / originalWidth;
          newWidth = originalWidth * scaleRatio;
          newHeight = originalHeight * scaleRatio;
          }
          else
          {
          scaleRatio = maxImageHeight / originalHeight;
          newWidth = originalWidth * scaleRatio;
          newHeight = originalHeight * scaleRatio;
          }

          newImageMatrix = new Matrix();
          newImageMatrix.scale(scaleRatio, scaleRatio);

          newImage = new BitmapData(newWidth, newHeight, false, 0x000000);
          newImage.draw(originalImage, newImageMatrix, null, null, null, true);

          newImageMatrix = null;

          return newImage;
          }
          else
          {
          return originalImage;
          }
          }
          ]]>
          </mx:Script>
          ...
          <mx:HBox width="100%" horizontalAlign="right" paddingLeft="2" paddingRight="2" paddingTop="2" paddingBottom="2" verticalAlign="middle">
          <mx:ProgressBar id="uploadProgress" label="" width="100%" />
          <mx:Button id="uploadButton" label="Upload" click="uploadButton_click(event);" />
          </mx:HBox>
          </mx:WindowedApplication>