This question already has answers here:
Force a browser to save file as after clicking link [duplicate]
(2 answers)
Closed 7 years ago.
I am trying to get my file, which is in my image folder, to become downloadable. I have simply linked it in my site as
<a href="images/Resume.jpg" download> Resume</a>
I have edited it to this, but is still not working in Internet Explorer, therefore can I have another option available for internet explorer as well.
It's a simple jpeg. When clicked, it opens the page and the picture appears. But I want it to be downloaded the moment it's clicked. Not open in another page to be right clicked saved. Can I do this with java script as the download attribute isn't supported in internet explorer.
Current Knowledge - HMTL5/CSS/ Some JavaScript.
It should look like this:
Resume
You are missing the location. Unless the name of the file you are trying to download is just "Resume" and is in the same location as the page this is being displayed.
FYI, this is a HTML5 feature and is not supported by IE and Safari.
Source:
W3Schools
First off, you would only need download, not download='...'. This, however isn't supported by all browsers, see Force a browser to save file as after clicking link. I don't believe that you can accomplish what you want in pure HTML if your current html5 magic isn't working for you. This link may work for you if you go the .htaccess way - https://css-tricks.com/snippets/htaccess/force-files-to-download-not-open-in-browser/.
As far as I understand the download attribute, you shouldn't need to give a descriptor. So
<a href="images/Resume.jpg" download>Resume</a>
ought to work.
According to w3schools (as of 3/16/15), download isn't supported across all browsers, though, which might be leading to your problem (and a potential problem for folks looking to save your resume in a single click). Right now, it looks like Chrome and Firefox support it, but not IE or Safari.
Related
There is a website that I must use at work quite a bit and the only browser it works on is Internet Explorer.
I'm presuming this is because the code is outdated/incorrect and includes javascript that only IE is able to read.
This is a problem, because I want to use Firefox or Chrome, they are much better browsers.
I believe the issue is Firefox/Chrome (hereinafter referred to as foam) not being able to recognize the following "onclick" command lines. When I press these buttons, the web page does not change as it should.
<button class="MenuButton" title="Create ICL" value="ADDICL" onclick="PageJump('ICLMain.asp?From=ICLHome')">Create ICL
So.... since this is not my website, I cannot re-write all of this code to fix it. It is a corporate owned underwriter website for creating a certain document.
There must be some sort of extension that enables Firefox/Chrome to read Javascript codes like Internet Explorer so that I can use Firefox/Chrome and still use this website.
Try to use chrome extension ie tab, https://chrome.google.com/webstore/detail/ie-tab/hehijbfgiekmjfkfjpbkbammjbdenadd?hl=es. This extension emulate The ie Explorer.
I'm also facing the same problem(Javascript broke). The solution I found is to just add https:// before the link and reload the page and everything will work fine again.
I got an AJAX function that loads a png from a canvas graph element and does (per user choice) open the image in a new browser window or force a download.
While the first works without a problem, I got a problem with adding the file extension to the download. Currently I simply get none, using the following HttpHeaders: image/octet-stream, application/download(force-download, x-download)
Gladly some SO user put a JsFiddle together. 1)
Question: How could I go and append a file extension (.png/.jpeg) to the forced download as seen in the JsFiddle example?
1) Sry, but I don´t know the User name anymore.
Unfortunately, with data uris, it is not possible to supply filenames. You should probably look at the HTML5 BlobBuilder API - http://blogs.msdn.com/b/ie/archive/2012/01/27/creating-files-through-blobbuilder.aspx
Even with BlobBuilder, I've found that only Chrome acknowledges the filenames you supply, not Firefox.
When I attempt to set an image to use a data url via JavaScript (from this question), it does not appear to work in IE8.
The page in that first link has: <img id="foo" src="alphaball.png">
On line 25, this JavaScript code executes: document.getElementById('foo').src = img_src;
On all other browsers (including IE9b) this successfully changes the image from the alphaball to a picture of my head. On IE8, I see the alphaball very briefly, and then it is replaced with a missing image icon.
Is this a known issue? Is there a workaround for using data urls with IE8 and JavaScript?
Internet Explorer versions before 9 do not support data URLs. There's an alternative mechanism that apparently kind-of works.
edit — actually I'm wrong; IE8 will support them as long as they're less than 32KB.
edit again — ok I found the article I was thinking about concerning the "MHTML" thing from Microsoft.
Is it possible for javascript or html to create a drop zone for images to be dragged into by a user? I suppose it is an image placeholder that will accept images dragged into it while the page is live?
Images from where? If you want to be able to drag images from the webpage itself, that is possible, but if you want images from outside to be dropped, that is simply not possible using JavaScript. difficult at the moment.
Edit: As #John Boker mentioned, it is possible, but at the moment, the APIs are highly non-standard and vary wildly between browsers. HTML 5 will support a standard and simpler API for this but HTML 5 itself is not a standard yet.
Some resources:
HTML5 Drag and Drop File API - currently works only in Firefox, will hopefully become standard soon
VBDataObject Interface - works only in IE
Recently http://www.dropzonejs.com/ has become quite popular.
Short Answer: Yes you can, but your browser needs to support for the Drag and Drop and File APIs that are part of HTML5. Currently, that is only Chrome 8+ and Firefox 3.6+.
July, 2011 Update: Current browsers that support this are Chrome, Firefox, Safari 6 (and Safari 5 if you use FormData objects) and IE 10 Preview 2. More information here.
IE 8 and 9 don't work, not sure if IE9 final will change this.
Safari 5 (as much as Apple touts HTML5) has no support for the File API necessary and DnD of native resources is not recognized (DnD within the page can be made to work, but that is only half the problem). You can hack around this lack in Safari 5 by using a trick of styling out an INPUT field of type "FILE" to actually not show the file path bar and utilize the fact that that Drag and Drop onto a file upload box in Safari actually inserts the full file name -- you use some JavaScript to trigger the upload as soon as they drop and viola. Here is a tutorial specifically for that hack.
Opera doesn't seem to support either API -- I've read that they are waiting out the battle of the HTML5 spec until the dust settles THEN adding support for those APIs necessary to do this.
I am actually the author of the HTML5 Drag and Drop/File API Upload tutorial linked above and used that method to implement exactly what you want at imgscalr.com -- the JavaScript is heavily commented if you want to pull it down and look at how I'm doing it.
Hope that helps.
I want to be able to preview an image for a user before they upload it.
I've of course discovered that all the modern browsers obscure the actual full path in one way or another, so my original plan of just setting an <img /> element with the local path is out of the question.
I've found this solution, which isn't bad, but I'm expecting the images to be a little bit large, and my users' internet connections to perhaps be a little slow, so this isn't exactly ideal.
I've found that FireFox has the getAsDataURL() method, which would work perfectly if there was some form of it in the other browsers, or at least even IE, but I haven't been able to find it.
Is there any other way to do this and have it work in IE7/8 (6 is a bonus but I don't care that much), FF2/3, and webkit without resorting to a plugin?
The answers to the question you have linked tell the truth: There is no way to read files from the user's file system using JavaScript. You will need to upload the image before you can append it to your page as an <img>.