Force Upload Image Using Javascript

Question

I want to know if there is a way to make a script using Javascript / jQuery to load (open the download dialog) an image so that the browser does not just display it.

Answer 1

For this you need to use server-side scripts. Search in stackoverflow .

In addition, your server may allow you to dynamically change headers using configuration.

Apache solution with mod_headers

Put the downloaded images in a directory. Inside this directory, create a .htaccess file with the following contents:

 SetEnvIf Request_URI "([^/]+\.jpg)$" REQUESTED_IMAGE_BASENAME=$1 SetEnvIf Request_URI "([^/]+\.png)$" REQUESTED_IMAGE_BASENAME=$1 Header set Content-Disposition "attachment; filename=\"%{REQUESTED_IMAGE_BASENAME}e\"" env=REQUESTED_IMAGE_BASENAME 

Test Request:

 HEAD /test/Water%20lilies.jpg HTTP/1.1 Host: localhost 

Test Answer:

 HTTP/1.1 200 OK Date: Sat, 23 Jul 2011 09:03:52 GMT Server: Apache/2.2.17 (Win32) Last-Modified: Thu, 23 Aug 2001 14:00:00 GMT ETag: "26000000017df3-14752-38c32e813d800" Accept-Ranges: bytes Content-Length: 83794 Content-Disposition: attachment; filename="Water lilies.jpg" Content-Type: image/jpeg 

HTML5 Solution

You can use the HTML5 download attribute on anchors :

 <p>Example 1<br> <a href="http://dummyimage.com/600x400/000/fff.png" download>Download this image</a></p> <p>Example 2<br> <a href="http://dummyimage.com/600x400/000/fff.png" download="alternate-filename.png"><img src="http://dummyimage.com/150x100/000/fff.png"></a></p> 

Answer 2

I came up with a clean JavaScript method for forcing an image to download with the following limitations:

• Using HTML5 doesn't work like that at all in IE browsers prior to IE9.
• In IE (even 9) limited to very small images, due to URL length limitations.
• The name of the image (when saved on the machine) cannot be defined in the code, in Chrome it will just “download” without an extension, and in Firefox it will look like a jibberish line with the extension “.part” - in any case, the user will have to rename the file to make it usable.
• You can only upload images in the same domain - the same origin policy.

The above limitations (especially the third one) more or less make it useless, but nevertheless, the "main" idea works and, I hope, at some point in the future it will be possible to determine the file name, it will become much more useful.

Here is the code:

 function DownloadImage(imageURL) { var oImage = document.getElementById(imageURL); var canvas = document.createElement("canvas"); document.body.appendChild(canvas); if (typeof canvas.getContext == "undefined" || !canvas.getContext) { alert("browser does not support this action, sorry"); return false; } try { var context = canvas.getContext("2d"); var width = oImage.width; var height = oImage.height; canvas.width = width; canvas.height = height; canvas.style.width = width + "px"; canvas.style.height = height + "px"; context.drawImage(oImage, 0, 0, width, height); var rawImageData = canvas.toDataURL("image/png;base64"); rawImageData = rawImageData.replace("image/png", "image/octet-stream"); document.location.href = rawImageData; document.body.removeChild(canvas); } catch (err) { document.body.removeChild(canvas); alert("Sorry, can't download"); } return true; } 

As you can see, the trick draws the image into a canvas object, receives raw binary image data, and then is forced to load using the mime image/octet-stream and changing the location of the browser.

The following is an example of use.

HTML:

 <image id="myimage" src="Penguins.jpg" /> <button type="btnDownload" rel="myimage">Download</button> 

JavaScript:

 window.onload = function() { var arrButtons = document.getElementsByTagName("button"); for (var i = 0; i < arrButtons.length; i++) { var oButton = arrButtons[i]; var sRelatedImage = oButton.getAttribute("rel"); if (sRelatedImage && sRelatedImage.length > 0) { oButton.onclick = function() { HandleRelatedImage(this, sRelatedImage); } } } }; function HandleRelatedImage(oButton, sRelatedImage) { var oImage = document.getElementById(sRelatedImage); if (!oImage) { alert("related image '" + sRelatedImage + "' does not exist"); return false; } return DownloadImage(sRelatedImage); } 

This allows you to "attach" the download button to each existing image by assigning the button rel attribute to the image identifier - the code will do the rest and attach the actual click events.

Due to the same origin policy, you cannot publish a live example in jsFiddle - they use the sandbox domain to execute scripts.

Answer 3

Here's a simple solution using the HTML5 upload attribute:

 document.getElementById('download').click(); 

 <a id="download" href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download hidden></a> 

If he finds a picture, he will upload a cat image.

Answer 4

I assume you mean something like this:

Go to the URL in the browser, URL: http://example.com/image.png

and instead of displaying the browser offers you to save the image?

I am sure that you cannot force this with javascript and you will need a server language to manage the headers. And even at this moment you cannot force the browser to load it, each user agent will react differently to any headers that you can send.

EDIT: It seems I remember the title Content-Disposition: attachment;

Answer 5

It is quite possible. Just encode the image as Base64, then do window.open with data:image/jpg,Base64,... -type URL.