Hi everyone. I wonder if its posible to resize a huge image i.e. a 4MB jpg to a small 400x400 image BEFORE uploading to save bandwith. so the image will be about 30k instead 4 MB.
Currently I am uploading the huge file and resizing it after it gets to my server. the thing is if I have 100 user uploading a 4MB file at the same time the website start running sloooooowwwww. so I figured that if I could just find a way to resize the original image BEFORE uploading I could handle 100 users uploading a 30k file....
after a lot of research I found out several comercial products such Aurigma or Thinfile. that can do just that....
So why am I here? I dont really like te ActiveX(Aurigma) or the Java applet (ThinFile) solution since many users have problems whit it. but hey... everybody has flash right?.
I just found a pice of code claiming that it can resize an image client side using Flash 8. I wonder what you guys think about the following code:
Assuming there is a MovieClip on stage called imageMC, holding an image (100x100 pixels):
/***************CODE ***********************/
var myMatrix = new flash.geom.Matrix();
myMatrix.scale(.5, .5);
var myBitmapData = new flash.display.BitmapData(50, 50, true, 0x00FFFFFF);
myBitmapData.draw(imageMC, myMatrix);
var bitmapPixels:Array = new Array();
for(var i:Number = 0; i <= myBitmapData.width; i ++)
{
for(var j:Number = 0; j <= myBitmapData.height; j ++)
{
bitmapPixels.push(myBitmapData.getPixel32(i, j));
}
}
Now you have an array containing each pixels ARGB value of the 50% downscaled image... you could send it to a server and use the data to build an image from it...
note: depending on the image size the nested for loops could cause the flashplayer to run veeeeeery slowly...
/***************CODE ***********************/
the original post is here: http://forums.swishzone.com/index.php?showtopic=30097
please can anyone take a look at it... It will be awesome if swfupload could resize the images before uploading them.
thanks for your time.
February 18, 2008 - 12:44pm
I will be interesed too. Currently I was looking for something in JAVA but application in java are heavier that the flash one...
February 19, 2008 - 12:47pm
This kind of feature is kind of outside the intended feature set for SWFUpload.
However, I appreciate the need. If someone is willing to contribute code that does this then we'd be happy to include this feature.
I think the difficult part here is getting the image from from the client's computer in to Flash (so we can then use the code sample above to resize it).
Then we have to send the resized image data to the server and probably won't be able to use the FileReference libraries to do so.
February 21, 2008 - 1:17pm
hi i found this.
Have you looked at the AS3 docs? You can load jpeg/png/gif from a bytearray without sending it to the server...
Look here:
http://livedocs.macromedia.com/labs/1/flex/langref/flash/display/Loader.html#loadBytes()
at the following post: http://www.kaourantin.net/2005/10/png-encoder-in-as3.html
sorry I dont know how to program in flash(yet) so all I can do is to try to point you in the right direction and hope you will have time to integrate it.
thanks.
February 21, 2008 - 3:16pm
I have not researched this (it's kind of outside the scope and time constraints for SWFUpload).
The missing piece is getting the byte array from the image on the clients computer in the first place. The FileReference object (which SWFUpload uses to do the real work (select files, make the upload, trigger progress and other events)) doesn't give us any access to the file data other than to upload it to a URL.
If someone can figure out that one step it opens the door to all sorts of possibilities. Honestly I can't understand why we can't have local access to the file if the user has browsed and selected the file. The security sandbox is a bit overzealous.
February 22, 2008 - 6:21pm
I have found a way to load an image into an tag using java script fromn the local filesystem. after that is done. flash will be able to load such image in a MovieClip. the use the code from the first message to retrieve the bytearray. the code below loads an image from the local filesystem into an tag:
function preview() {
field = document.getElementById( 'upload' ).value;
image = document.getElementById( 'previewIMG' );
path = 'file://'+ field;
path = path.replace(/\\/, '/'); // Fix Windows paths
image.src = path;
image.style.display = 'block';
image.style.width = "200px";
image.style.height = "150px";
}
the original post is at: http://forums.invisionpower.com/lofiversion/index.php/t226158.html
I guess all that needs to be done is to pass the image information to flash from javascript to load the image... I also found some code for doing such thing.
thanks
February 22, 2008 - 7:34pm
I could only do the local file image preview in IE6 and Safari 3.0.4 for Windows.
It would not work in FF2, FF3, or Opera 9.24
February 25, 2008 - 4:51pm
Hi I made a quick hack to the script and got it working in the following browsers under winXP SP2 since the URL is escaped I guess it should work in other OS as well. following is the complete HTML test.
html>
head>
script>
function preview(field) {
//field = document.getElementById( 'upload' ).value;
alert("Before:"+field);
image = document.getElementById( 'previewIMG' );
path = 'file:///'+ field;
path = escape(path);
path = path.replace(/%5C/g, "/");
path = path.replace(/%3A/g, ":");
alert("after="+path);
image.src = path;
image.style.display = 'block';
image.style.width = "200px";
image.style.height = "150px";
}
/script>
/head>
body>
input type="file" name="upload" id="upload" onchange="preview(this.value)"; />
img id="previewIMG" style="display:none;" />
/body>
/html>
Hope it helps. and again thanks a lot for your time men...
February 25, 2008 - 5:29pm
This only works for me if I load the HTML file locally (file:///C:/inetpub/wwwroot/other/test.html)
But if I load it via a webserver (http://localhost/other/test.html) it does not work.
Are you loading it from a web server? Is my configuration weird?
February 25, 2008 - 6:39pm
Hi I uploaded the file to the following adress.
http://www.sx-networks.com/test.html
let me now if it works for you.
thanks
February 25, 2008 - 8:12pm
Results:
IE 6 & Safari for Windows display the image (and have the correct path in the alert boxes)
IE7 does not display the image and has the correct path
FF2 does not display the image and has the correct path
Opera 9.24 does not display the image and has the file name only
FF3b3 does not display the image and has the file name only
February 26, 2008 - 10:42am
considering that most of the browsers have the right path. and some not show the image. I just have one last question...
does flash display the image? if you pass the path to a flash movie does it display the image?. if it does it doesnt really matter that the img tag doesnt right?
thanks
February 27, 2008 - 12:51am
This only works if the flash file is local. Running an swf on the net and trying to have it load a local file into a movie clip is not possible (i just tried it).
-Chris
February 27, 2008 - 5:19pm
the thing crackerjack00 wrote will not work in FF if the policy (checkloaduri) hasn't been changed.
The thing has been changed a year ago, but the user still has to change settings manually (about:config).
check:
http://kb.mozillazine.org/Links_to_local_pages_don%27t_work
https://bugzilla.mozilla.org/show_bug.cgi?id=307382
Cheers
March 19, 2008 - 9:22am
Hi,
i would really appreciate this feature too. Maybe i can give some small donation for it.
March 19, 2008 - 11:21am
As much as I'd like to take your money
The issue lies in the browser and the Flash Player and there isn't anything we can do in SWFUpload to circumvent the security that is in place to prevent this kind of local file access.
July 16, 2008 - 4:09am
So I know this is a Flash forum for SWFupload, so it may not be of the greatest utility to you guys, but there is a way to do this using Silverlight because you can grab the filestream before upload. We took this ability and created a JPEG codec on top of it, which is just out there for anybody to download the code and use freely. It could be integrated with SWFupload but you'd need both Silverlight and Flash. :-/ Anyway just google "FJCore" to read about and download the Silverlight codec if interested. Hope this helps somebody.
July 16, 2008 - 10:00am
A Silverlight version of SWFUpload had been considered. But our research found that Silver encodes uploads in Base64 which then have to be decoded on the server side.
So that combined with upfront difficulties with getting the Silverlight plugin installed and working for any Silverlight content kind of killed our interest.
However, with the issues facing us in Flash Player 10 we may take another look at Silverlight when version 2 is released.
July 17, 2008 - 4:00am
You actually don't need to convert to Base64 for uploads in Silverlight. I know some of the examples show this, but I think that's because they're integrating with XML web services. If you go a little lower-level, you can literally post a raw stream that doesn't suffer the encode/decode inefficency... so you definitely might want to think about it as Silverlight 2 nears release.
October 15, 2008 - 11:45pm
It seems Flash Player 10 provides the groundwork for this to be possible:
http://www.adobe.com/products/flashplayer/features/
"File upload and download APIs Enhanced
Bring users into the experience by letting them load and save files from your web application. New file reference runtime access allows local processing of data without roundtripping to the server."
Now, who will be the first to build a client-side image uploader with cropping, resizing, rotation & repositioning built in...?
October 21, 2008 - 2:26am
Hi -
It is now possible to get the files from the client computer and resize, but now it seems problematic to do a binary post from the bytearray data in flash. Has anyone accomplished this?
r
February 17, 2009 - 8:50pm
Hallo
I'm a photographer and I need my users to upload photo examples on my casting site http://www.fashionup.it
I use php and I have the problem that actually the upload , usually of large images (the basic users don't know about manually resising photos), often fails for the following reasons:
- long upload time (not expected by model or user)
- timeout of server in post upload
- lack of memory of server in php resize
- timeout of resiing script in php
Now with the help of my roommate we decided to develop a free flash 10 application which is going to permit to:
- chose the file
- resize it locally before the upload (thanks to flash10 local file access)
- preview in the local flash swf
- upload the raw stream of the resized photo file to the server via post upload
On server side so it's going to be possible to receive the upload, save the file to .jpg int the tmp, rename it, move it. We're tring to keep this independent from the server side environment and include examples for php and other server apps to receive the resized photo and manage it.
I also have an other domain (travel related) where we're going to test it http://www.popvision.com
We want to keep this simple and free. This what we think to include, (please feel free to suggest other things)
- external param of the post to page (php or other)
- external param to set the resized size of the image
- filter of image types
- external flash parameters to be posted to server with the resized image (like session it, user id, others free) this to recognize the image and let the winemaster decide how to handle it server side
- simple swf interface ready to be used and embedded
This basically what we'd like to do as simple freeware.
Any suggestion?
Should have some specific features to be used also in cms?
thanks
February 17, 2009 - 9:15pm
So is this feature dead for swfupload? with flash 10, is it still not possible with swfupload to get this much needed feature?
February 17, 2009 - 9:33pm
There isn't any way to upload the modified image without saving to the client first (and they re-selecting for upload) or drastically changing the upload method so it will no longer be compatible with standard uploading.
February 18, 2009 - 12:08pm
Why do you have to save to the client, couldn't you call a webservice and pass it the byte array of the image?
February 18, 2009 - 12:55pm
This could be programmed up but it doesn't fall in line with what we are aiming for with SWFUpload:
1) No upload progress available
2) Most easily coded methods require special server side handling (in other words it is no longer a standard HTML forms update)
3) We can get around #2 but don't think it will be reliable (we would need an algorithm for coming up with a unique boundary and have heard there are issues with null bytes and this is not something we want to tackle)
4) We believe it will not be memory efficient (you have to load the entire file into memory to work on it, we haven't done testing on this)
Anyways, the primary purpose of SWFUpload is to provide a real-time upload progress bar using the client-side only, otherwise a regular HTTP upload would be good enough (and there are already several server-side file progress tools out there).
This would make a good project and anyone is welcome to scrape code from SWFUpload if it will be helpful. Uploading a file using URLLoader (and URLRequest and URLVariables) might make it possible to work around the cookie and mod_security issues but you lose the upload progress feature.
February 18, 2009 - 3:01pm
Thank you for your feedback. At this point I think I will go with SilverLight, I believe it can succeed where swfupload is falling short with the ability to resize the image before uploading. I don't know about most people but one of the biggest problems we have is people uploading image files that are too large. Resizing on the client is a must have. Thanks again.
February 18, 2009 - 3:21pm
We have started some research into Silverlight and Google Gears but haven't had time to make any real efforts.
Neither seem to automatically build the multipart/form-data POST but otherwise seem very promising and I expect that Silverlight will suffer from fewer bug than the Flash Player does.
February 18, 2009 - 7:50pm
Hallo I have a wordpress website about Linux small os called Xubuntu. www.xubuntu.info
I'd like to VERY EASY let the users upload their screenshot (usually agency errors) via flash.
Is it possible to set a routine that does the screenshot and then uploads via flash?
I've read here that flash 10 may allow to access local hard disk. Is this valid also for LINUX USERS?
thanks
April 19, 2009 - 10:59pm
I'm not sure if you have considered this, but why not use an XMLSocket in flash to send the thumbnail to the server. The downside is the server would have to answer request on a port higher thatn 1024(according to the flash spec), but you could setup a site to answer on port 8080 and you could send the multi-part form post with newly created image embeded in it. This method should be fairly easy to do if you have already figured out the image manipulation portion. At this point it is simply creating the HTTP post header, embedding the images, and sending to the server.
http://www.adobe.com/support/flash/action_scripts/actionscript_dictionar...
April 20, 2009 - 11:10am
This is not the direction we wish to take SWFUpload. We don't want to require any special server side configuration (if we can help it (and other than configuration normal related to file uploads)).
However, this is part of the reason we have provided the source to SWFUpload and will happily link to and direct people to related projects that people will find useful (maybe we should create a new forum for this kind of info).