By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,677 Members | 1,070 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,677 IT Pros & Developers. It's quick & easy.

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

P: n/a
Hi all,

I wonder is it possible to upload the content of an <imgfield to a server.
The content of the <imgwas 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
Jan 12 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Rik
SammyBar wrote:
Hi all,

I wonder is it possible to upload the content of an <imgfield to a
server. The content of the <imgwas 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
Well, if the file 'should not be saved locally' and 'was downloaded from a
website' (which is a contradiction btw), I assume passing the url of the
image file to a server side script should suffice. Do this in either a text
or a hidden <input>. As long as the image file is online somewhere
retrieving and manipulating it is a piece of cake for most server side
languages.
--
Rik Wasmus
Jan 12 '07 #2

P: n/a
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.

SammyBar wrote:
Hi all,

I wonder is it possible to upload the content of an <imgfield to a server.
The content of the <imgwas 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
Jan 12 '07 #3

P: n/a
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.

Rik wrote:
SammyBar wrote:
Hi all,

I wonder is it possible to upload the content of an <imgfield to a
server. The content of the <imgwas 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

Well, if the file 'should not be saved locally' and 'was downloaded from a
website' (which is a contradiction btw), I assume passing the url of the
image file to a server side script should suffice. Do this in either a text
or a hidden <input>. As long as the image file is online somewhere
retrieving and manipulating it is a piece of cake for most server side
languages.
--
Rik Wasmus
Jan 12 '07 #4

P: n/a
SammyBar said the following on 1/12/2007 9:54 AM:
Hi all,

I wonder is it possible to upload the content of an <imgfield to a server.
The content of the <imgwas 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.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 12 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.