Uploading photographs

Question

My question is regarding uploading photographs to a webserver.

I recently observed while uploading a photograph on facebook that it can upload (and by default it does) upload smaller photographs than what we request.

Now, I can think of uploading a full size photograph and compress when it reaches the server.

But how could facebook resize the picture while uploading.
Is there any request header (I think there is not) that asks browser to upload specific size image and manipulate the exif/jpeg data in the file.

If not, some plugin/Flash/Javascript has to read the file/images from our system. Does web standard really allow file reading from the user system?

Please advise.

Regards,
Mayank

@mayank are you sure? FB uploads your source image and then resizes the images to fit its requirements. Otherwise they wouldn't allow you to download the original high quality image — JohnP, May 16 '11 at 05:39
@mayank, maybe the uploader compresses it, but I don't think it reduces the resolution. — JohnP, May 16 '11 at 05:40
@JohnP: There is an option in FB, if user checks it, FB uploads full image. — Mayank, May 16 '11 at 05:44
It's done with Flash AFAICT. On a fresh Linux install without Flash, it doesn't work. — Blender, May 16 '11 at 05:46
@Mayank: you're right, Facebook *DOES* seem to resize the images on the *client side*. It is technically impossible to compress JPEG images to 90% or less of their original size unless they were originally compressed using a poor software. If you're thinking that uploading via flash compresses the files on network level... that's a no-no too. — Salman A, May 16 '11 at 06:01

score 2 · Accepted Answer · edited May 23 '17 at 12:26

2

Website / webserver cannot do anything with the image until it is uploaded and saved into target directory. It must receive fullsize image and then resite it to desired size [generate thumbnails, etc.]. There is no request header that you described.

Web standards don't allow reading files from user hard disk. The thing that they allow is to select file from hard disk and then send to server - initiative is on the client's side, not server's.

Is there anything more you would like to know?

update

See this: Flash upload image resize client side

As I said - without external mechanisms we can't do anything. But of course, if we take into account Flash, Google Gears and so on, everything is possible.

edited May 23 '17 at 12:26

Community

1
1

answered May 16 '11 at 05:43

Tomasz Kowalczyk

10,472
6
52
68

Facebook has an option which they say, will take 10 times more time to upload your photographs. By default it uploads low resolution images and it really takes 1/10th of the time it takes to upload full size image. My question is how do they do that from the client side – Mayank May 16 '11 at 05:47
@Thomasz: Don't forget the Java image uploading applets... they're extinct but worth mentioning. Java applets require special permission and ask user if they "trust" the publisher. Once approved, they can read just about anything on the filesystem, client side image compression can be done via Java Applets. – Salman A May 16 '11 at 06:04
yes its kinda obselete and Flash seems to have replaced Java applets. – Salman A May 16 '11 at 06:38

Brian · Answer 2 · 2011-05-16T06:05:33.467

It is now possible with HTML5

Not all browsers accommodate it at the present however there are some features in HTML5 that will resize an image before it sends it over the wire.

Look at hacks.mozilla.org... for more details

Excerpt from the above link:

Resize the Image

People are used to uploading images straight from their camera. This gives high resolution and extremely heavy (several megabyte) files. Depending on the usage, you may want to resize such images. A super easy trick is to simply have a small canvas (800×600 for example) and to draw the image tag into this canvas. Of course, you’ll have to update the canvas dimensions to keep the ratio of the image.

var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height)

Uploading photographs

2 Answers2

It is now possible with HTML5

Resize the Image