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.
Related
so i have this problem with hyperlink attribute download. basically i have link that download a certain file. however it doesnt work..
download file
With this format, it will download the file but it will give me an failed file says 'no file'.
On the other hand if i have link that has a complete uri format:
download file
It redirects me to the page and it will just show the file. The weird
thing is when I tried it on mozilla and brave browser. it works. but
in safari, and my default is google chrome. its not working..
Am I missing something? maybe in my header? really appreciate if you can help.. thanks!
EDITED
also, i've read this stuff about content disposition, so how do i know that my webpage set as inline for that matter.
it turns out, my problem is conflicted by same origin urls. Apprently, I am rquesting from different hosts/site, for further explanation see : https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
If you look at here https://www.w3schools.com/TagS/tag_a.asp
Scroll down to attributes, and you will see that the DOWNLOAD attribute is only supported by HTML5, which, as it seems, your friend's version of Safari does not support. I recommend updating the program.
Alternatively, you can right-click on the download link, then click Save As..., then download it that way.
This may also be caused js intercepting navigation and redirecting. If so, you may be able to work around it by adding a target attribute.
download file.txt
I am generating a GIF in the browser, and so the only link to it I can use is an inline data URL. (Like data:image/gif;base64,...)
I want to allow the user to download the GIF they created. To make it as easy as clicking on a link, I am using an a[download] like so:
<a download="GIF" href="data:image/gif;base64,...">Download</a>
With small files, this opens my MacOS "save as" dialog. With this GIF, it does not. Nothing happens when I click on the link, except that the Chrome icon changes to look like this:
When I right-click on the GIF and select "save image as", I can save it just fine. This allows me to see that the GIF is a whopping 3MB.
I have checked with a large file linked to in the usual fashion, and the a[download] link works just fine. This seems to only be a problem with inline, data-URL files.
Is there a file size limit?
Bonus questions:
Why is there a file size limit?
Is there a workaround?
TL;DR: The data-url size limit is 2 MiB. See this demo.
--
This means that the file size is a little smaller than that, as a base64-encoded image is about 37% larger than the original.
Note also that it's a 2 Mebibyte limit, hence the "2 MiB" with the little "i". As explained here, this means the limit is 2 * 2^20 = 2,097,152 bytes, or 2.097 of the familiar base-ten megabytes, MB.
As shown in the demo, this translates to a 1.568 MB file downloading just fine, but Chrome failing to download a 1.581 MB file.
Why does Chrome do this? Not sure. Seems like it might be a bug.
Workarounds: Not sure. You could try to use URL.createObjectUrl as #roland-starke suggests, or perhaps open the data URL in a new tab
EDIT:
FOUND MY MISTAKE:
line 3 in this example, the $(this) selector isn't valid in this case. So the command is skipped, the download attribute isn't set and instead of downloading, the browser tries to navigate to the dataUrl, which is prohibited. Cue errors.
I have a PWA that stores images as base64 pngs. I want to give users the option to download them to their device.
Previously I used this really simple code where myAnchor is an anchor-tag in my HTML and pic contains the base64 png:
function imgDownload(pic) {
$('#myAnchor').attr('href', pic);
$(this).attr('download', 'image.png');
$('#myAnchor')[0].click();}
So: simply set href to the image, set download attribute and filename, then trigger the download by clicking the link. But either Chrome 60 or 61 broke that - apparently for security reasons -, it now results in this error:
Not allowed to navigate top frame to data URL: [my b64 png]
Is there a (preferrably not too complex) client-side alternative to achieve the same functionality? It only has to work in Chrome, more browser compatibility is nice of course, but not neccessary.
If you click on the Post on the top right, then drop an image onto the box, Facebook will fail to recognize it as an image and tries to read it as a link. This is not the main point though.
The weird part is that it knows what the fullpath is.
This shouldn't be happening since Chrome is sandboxed, and every path, in theory, should be changed to "fakepath" for security reasons.
Somehow Facebook managed to do that. But the question is, how?
Windows XP sends the whole path with the content type text/uri-list.
Here's a snippet that reproduces this fact:
<textarea ondrop="console.log(event.dataTransfer.getData('text/uri-list')); event.preventDefault();">
</textarea>
Lots of times we have to download files from the net. In IE we get to see the ugly download progress bar. In firefox we get to see a pop-up window opening etc.
However, I have never seen this being over ridden in any manner.
Until recently on the site
> **thesixtyone DOT com**
If we get to download a song free and click on the ok link to start the download we get a pop up to select location in the default style of windows. Then we see the progress bar as shown below.
Any ideas on this? I am trying to see how these guys did this.
you can see the image http://highwaves.files.wordpress.com/2010/04/61-download-bar.jpg
I think it is Flash. Cross-browser is Javascript to do not work
You will probably want either an AJAX or Flash solution for this.
AJAX* solution - provided by jQuery
The asterisk here is because AJAX is not actually used, but does something similar in jQuery
Unfortunately I don't have a handy link for a Flash solution at present...but there should be plenty of tutorials for something about writing a download manager in ActionScript :)