How to upload an <img> content without <input type=file > ?

[SammyBar]

Hi all,

I wonder is it possible to upload the content of an <img> field to a server.
The content of the <img> was downloaded from a web site different from the
one it should be uploaded. The image file should not be saved locally before
uploading. It should not be visible any <input type=file > on the form.
How can it be done?

I'm working on a project where client javascript requests an image server to
generate dynamic images. The client selects the image it wants and uploads
this to another server which stores the image. I know it is very simple to
upload a file to a server by using <input type=file > but it is not the
case. The image I need to uploaded is stored on a <img > field and is not
saved to local file system.

Any hint is welcomed
Thanks in advance
Sammy

 

[chrislewis]

Interesting request. I'd say you need to research two things first.
Read through the RFC that covers how the file upload control works
(http://www.ietf.org/rfc/rfc1867.txt), and maybe the w3c mention of it
(http://www.w3.org/TR/html4/interact/forms.html). After that consider
setting up a test upload form and receiving script on your server,
sniff your connection using ethereal or similar, and do an upload. This
should give you a solid understanding of what exactly the server
expects.

Now I'll take a theoretical stab at a solution. AFAIK there is now way
in javascript to access that actual image raster data, just properties
of the img element such as src. What I think might work is this:

1. When the user selects the image they want, get the url of it in JS
via the src property.
2. Dispatch a request using AJAX to the server for that image. This is
where it starts to get tricky since the server will respond with raw
image data (JPG/PNG/GIF) and the corresponding MIME type, and as such
the browser will probably not populate either the responseText or
responseXML. However you may be able to access the image data via
responseBody property - I'm not sure.
The other alternative here is to have the server serve images
indirectly through a script (that reads and dumps the image data). The
server script could search for a certain header, which your AJAX
request would have to set, and when it sees that header, dump the image
data as a base64 encoded string and use text/plain as the MIME type.
When your xmlhttp object gets a response, it will have the base64
encoded image in the responseText property, which you can then post to
the server as a normal form (that is, without the
enctype="multipart/form-data").
3. The server receiving the posted image data will need to know that
its receiving base64 image data, so you'd need to set some headers in
your AJAX post. The server would then know to decode the string back to
it's original binary format - the image.

Let me know how you progress with this - if I ever get a break i may
have to take a crack at it.

 

[chrislewis]

So I just read Rik's response, which showed how complicated an answer
mine was to a simple problem. Do what he said: communicate the URL of
the image from one server to the other, and let the server receiving
the url download it directly. Forget the forms bit - just tell the
server the url of the desired img.

 

[Randy Webb]

SammyBar said the following on 1/12/2007 9:54 AM:

Hi all,

I wonder is it possible to upload the content of an <img> field to a server.
The content of the <img> was downloaded from a web site different from the
one it should be uploaded. The image file should not be saved locally before
uploading. It should not be visible any <input type=file > on the form.
How can it be done?

You can't. The image is locally though in the cache as long as the
current page is open.

I'm working on a project where client javascript requests an image server to
generate dynamic images. The client selects the image it wants and uploads
this to another server which stores the image. I know it is very simple to
upload a file to a server by using <input type=file > but it is not the
case. The image I need to uploaded is stored on a <img > field and is not
saved to local file system.

It is not "saved" but it is in the cache. And you aren't going to be
able to set the value of a file input so you can't do it
programatically. The user is going to have to choose that image to be
uploaded.

If the images are random then you are kind of hosed. If the images are
dynamic yet predictable then you simply give your server the parameters
to get the image on its own.