11 Replies Latest reply on Apr 16, 2010 6:17 AM by David_F57

    Uploading Without The Browse Function

    jimmyoneshot Level 1

      Is there any way to let a user upload an image from an air app without having them browse for it? I want to let my users enter their name into a text input, take a snapshot and then the image will be uploaded to my server as whatevernametheuserhasentered.jpg

       

      Is there any way to do this and does anyone know of any similar examples? All I can find is examples showing uploading via the browse function.

        • 1. Re: Uploading Without The Browse Function
          David_F57 Level 5

          Hi,

           

          If you have a display object (image) you can upload it, there are several ways, I do something similar with amfphp, you can grab some sample source code from here, to get an idea of converting a display object into a png/jpg bytearray for uploading.

           

          http://gumbo.flashhub.net/sample.zip

           

           

          Read this thread to get an idea of what the code is about

           

          http://forums.adobe.com/thread/617385?tstart=0

           

           

          David.

          • 2. Re: Uploading Without The Browse Function
            jimmyoneshot Level 1

            Cheers David I managed to figure it out yesterday so that it creates the file in the application directory and then straight away it uploads that same file to the server via my server side script. Your example does look good though. I'll check it out.

             

            While we're here do you know if flex has a function to REMOVE a specific file? For example in my code the variable which points to my server side script for uploading the image is imageuploadurlRequest and the variable that contains the image itself is called file2 so the line of code I use to upload that specific file is

            file2.upload(imageuploadurlRequest); Is there anyway I can modify this line to remove the image? My idea is that I only want the file to be created in the app directory temporarily until it's uploaded and then it will delete automatically afterwards so it's not taking up space.

            • 3. Re: Uploading Without The Browse Function
              David_F57 Level 5

              Hi,

               

              Why write the file to disk, just upload it.

               

              http://forums.adobe.com/thread/617385?tstart=0

               

               

              have a read of this thread to experience even more of my agricultural code stylings .

               

               

              David.

              1 person found this helpful
              • 4. Re: Uploading Without The Browse Function
                jimmyoneshot Level 1

                Cheers mate. I'll check it out.

                 

                Only problem is it seems very different from my code. You see I need the user's to be able to name the image that they are uploading. This is the reason why I need to save it to disk as whatever they name it and then have it automatically upload that file. Here's the way I do it:-

                 

                 

                <mx:Script>
                 <![CDATA[
                  import mx.graphics.codec.JPEGEncoder;
                  import mx.graphics.ImageSnapshot;
                  private var imageuploadurlRequest:URLRequest;
                  private var imageuploadfileReferenceList:FileReferenceList;
                  private var serverSideScript:String = "*my url goes here*"; 
                 
                  private function imageuploadinit():void {
                   imageuploadurlRequest = new URLRequest(serverSideScript);
                   imageuploadfileReferenceList = new FileReferenceList();
                  }
                     
                  private function takeSnapshot(event:Event) :void{
                      var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(linkviewer) ;
                            var s:Object = new Bitmap(imageBitmapData);
                            var jpgEncoder:JPEGEncoder = new JPEGEncoder( 60 );
                            var ba:ByteArray = jpgEncoder.encode(imageBitmapData);
                            var filename:String = "mynewpic";
                            var enteredimagename:String = titleentry.text;
                            var file:File = File.applicationDirectory.resolvePath(('assets/createdimages/')+enteredimagename+('.jpg'));
                            var wr:File = new File(file.nativePath);
                            var stream:FileStream = new FileStream();
                            stream.open( wr, FileMode.WRITE);
                            stream.writeBytes ( ba, 0, ba.length );
                            stream.close();
                            imagesnapshotpreview.source=(('assets/createdimages/')+enteredimagename+('.jpg'));
                          file.upload(imageuploadurlRequest);
                  }
                         
                 ]]>
                </mx:Script>
                
                • 5. Re: Uploading Without The Browse Function
                  David_F57 Level 5

                  Hi,

                   

                  I use amfphp, the url is controlled in a config file, when I upload a file it is actually sent as an object so there is no need to write to disk then upload from disk.e.

                   

                  uploader.localimg(ba,fr.name);

                   

                  uploader - is a server side php class

                   

                  localimg is a php function in the uploader class

                   

                  ba is the bytearray from the filereference for direct uploading or the bytearray returned when using the imageresize routine.

                   

                  fr.name is the name of the original file, this could be anything.
                  I started using remote objects a while back and just have no desire to return to the old ways so even for the most simplistic stuff, despite it being a bit of overkill I still use remote objects.
                  If you compare the code for the dragdrop demo(btw did you try to drag an image from the list onto the lower part of the app ?) and the code referenced in the example.zip you will see the very subtle difference between uploading an image as it is or an image that has been manipulated. That is another reason I like the methods I use if I edit an iage I can still convert its bitmap data and upload the change without going near the local drive.
                  David.

                  1 person found this helpful
                  • 6. Re: Uploading Without The Browse Function
                    jimmyoneshot Level 1

                    Remote objects seem interesting to but I have very little experience with them. I'm relatively new to flex and am still in university doing my masters degree in web design. The problem I have with adopting alternative approaches as a beginner is if I need to add something to this code it's hard to find ways to do this as opposed to using older methods which their may be much more help/existing examples of if that makes sense. That code I use is basically a mix of different solutions i.e. I found out how to add an event listener to the complete property of a html component so that when the website in it is fully loaded only then a snapshot will be taken of it as well as finding out how to create snapshots elsewhere.

                     

                    Looking at my code I've got there do you think there is any way of editing it so that the user can name the file and it just gets uploaded as whatevertheyvenamedit.jpg WITHOUT it being saved to disk first?

                     

                    Don't worry if it's a bit too much, in that case just leave it as I'm not really fussed about having to add the image to disk first but I would prefer it to just upload straight away as whatever the user has named it to save space. I just mean if you know the solution off hand.

                     

                    Here's my full code:-

                     

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="imageuploadinit()">
                    <mx:Script>
                     <![CDATA[
                      import mx.graphics.codec.JPEGEncoder;
                      import mx.graphics.ImageSnapshot;
                      private var imageuploadurlRequest:URLRequest;
                      private var imageuploadfileReferenceList:FileReferenceList;
                      private var serverSideScript:String = "*my url goes here*"; 
                     
                      private function imageuploadinit():void {
                       imageuploadurlRequest = new URLRequest(serverSideScript);
                       imageuploadfileReferenceList = new FileReferenceList();
                      }
                         
                      private function takeSnapshot(event:Event) :void{
                          var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(linkviewer) ;
                                var s:Object = new Bitmap(imageBitmapData);
                                var jpgEncoder:JPEGEncoder = new JPEGEncoder( 60 );
                                var ba:ByteArray = jpgEncoder.encode(imageBitmapData);
                                var enteredimagename:String = titleentry.text;
                                var file:File = File.applicationDirectory.resolvePath(('assets/createdimages/')+enteredimagename+('.jpg'));
                                var wr:File = new File(file.nativePath);
                                var stream:FileStream = new FileStream();
                                stream.open( wr, FileMode.WRITE);
                                stream.writeBytes ( ba, 0, ba.length );
                                stream.close();
                                imagesnapshotpreview.source=(('assets/createdimages/')+enteredimagename+('.jpg'));
                              file.upload(imageuploadurlRequest);
                      }
                             
                     ]]>
                    </mx:Script>
                     <mx:Canvas id="linkviewerwindow" visible="true" width="100%" height="100%"  backgroundColor="#070FAC" backgroundAlpha="0.37">
                      <mx:Canvas width="916" height="646" verticalCenter="0" horizontalCenter="0">
                       <mx:Canvas width="623" height="462" backgroundColor="#000000" borderStyle="solid" cornerRadius="5" horizontalCenter="0" verticalCenter="0">
                        <mx:Image y="122" height="303" width="353" id="imagesnapshotpreview" x="132"/>
                        <mx:HTML y="31" height="650" width="650" id="linkviewer" x="143" visible="false" includeInLayout="false" complete="takeSnapshot(event); createimagearea.visible=true" horizontalScrollPolicy="off" verticalScrollPolicy="off"/>
                        <mx:TextInput x="169.5" y="70" text="http://" id="linkurlentry" width="282" visible="{titleentry.text.length&gt;0}"/>
                        <mx:Button x="459.5" y="70" label="GO" color="#000000" click="createimagearea.visible=false; imagesnapshotpreview.source='assets/images/loadingimage.jpg'; linkviewer.location=linkurlentry.text;" visible="{titleentry.text.length&gt;0}"/>
                        <mx:HBox x="84.5" y="433" id="createimagearea" visible="false" horizontalCenter="0">
                         <mx:Label color="#1BC7EC" fontSize="12" fontWeight="bold" text="Image Has Been Created"/>
                        </mx:HBox>
                        <mx:HBox x="211.5" y="40" id="imagenameentryarea">
                         <mx:TextInput id="titleentry"/>
                         <mx:Label color="#FFFFFF" fontSize="12" fontWeight="bold" text=".jpg" selectable="false"/>
                        </mx:HBox>
                       </mx:Canvas>
                      </mx:Canvas>
                      
                     </mx:Canvas>
                     
                    </mx:WindowedApplication>
                    
                    
                    • 7. Re: Uploading Without The Browse Function
                      David_F57 Level 5

                      Hi,

                       

                      Im not great with conventional backend stuff but if I find time over the weekend i'll profile your code...no promises of greatness   as I said earlier I like being a little agricultural in my coding.

                       

                       

                      David.

                      • 8. Re: Uploading Without The Browse Function
                        jimmyoneshot Level 1

                        Cheers David. Don't worry about it unless you actually want to do it because as I say it's not really a big thing. You see this app is only for use by my client themselves to upload new images which will be displayed in another app which will be used by their customers. Rather than using the application directory  to create the image I may switch it to create the directory and it's image on the desktop. That way my client can just delete the created folder straight from the desktop manually. I was just thinking about convenience purposes with the whole remove the image after it's uploaded/upload it straight away without saving it to disk at all idea. I don't want you spending your time on it. Unless you feel like it of course and it's a hobby

                        • 9. Re: Uploading Without The Browse Function
                          David_F57 Level 5

                          Hi,

                           

                          More an obsession than a hobby ...I moved from 20+ years of pascal/delphi development to RIA's a few years back and Flex sort of re-invigorated me.

                           

                          Your a uni student so it would be worth while getting your Flashbuilder free license. Lots of new php wizards etc in it to 'enhance' your learning experience.

                           

                           

                          David.

                          • 10. Re: Uploading Without The Browse Function
                            jimmyoneshot Level 1

                            Free license? Is that a form of qualification or a license to use flex etc freely? I have an educational license which allows me to use FlexBuilder 3 without payment but I'm unsure as to whether that runs out once I finish my current university course and then I have to buy Flex myself.

                             

                            It is something I'm interested in if that's the case as I've often wondered if this educational license will allow me to use it permanently. I've heard Flex cost's around £3000 in the UK but the masters degree course only cost me £1500 (half price as I did a previous degree at the same uni) so if it does last permanently it's a bit of a bargain.

                            • 11. Re: Uploading Without The Browse Function
                              David_F57 Level 5

                              Hi,

                               

                              Not sure about permanently, it would be at least valid for the duration of the version, realistically if you start using it commercially you would be inclined to get the premium copy anyway, but there is nothing wrong with a free copy of flashbuilder standard. (note: the license is not just for educational  purposes, its also available to 'unemployed' developers.).

                               

                              David.