Download dataurl to file stored on server - javascript

I am using this code to download a DataURL to a file
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
downloadURI(data, "images/helloWorld.png");
but it tries to download to user storage. I want to download to server storage (For example download to "images/download.png" rather than prompt the user to download on their computer.
I tried to pass into PHP but the dataurl is too large for ajax to pass through.

First of all, you need to create some backend code to download it on server storage. You might only need the URI from frontend, make a call on some backend API and then request everything from backend.

Related

Change file extension of download link - JavaScript

I have a script that receives a download link from an API request. If you click the link, it automatically downloads the file with no file extension. I need the script to return a CSV file. What is the simplest way of handling this?
In essence, I want the following Python code in JavaScript.
r = requests.get(base64ToString(get_log_files(getlog_ID("APIKEY"))['log_csv_url_b64']), allow_redirects=True)
open('flight.csv', 'wb').write(r.content)
This is the code I have now written in JavaScript, a language I am a complete novice in. Currently it downloads a blank CSV file to the user.
let blob = await response.blob();
let link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "flight.csv";
link.click();

Pipe stream directly to filesystem when downloading file in browser

I'm trying to download large file using chrome and would like to use stream to pipe it to the filesystem so it won't consume browser's RAM. Examples that I found so far, as I understand preloads everything to the RAM, and then save it to the filesystem, like:
const link = document.createElement('a');
link.href = window.URL.createObjectURL(new Blob([byte], { type: 'text/csv' }));
link.download = reportName;
link.click();
Also I can't use <a href=http://... /> because I need to pass authorization header with my request.

Downloading Excel (.xlsx) File In Frontend Javascript Via Amazon Presigned URL

I have an amazon S3 URL being passed back to me from an external service that is in the format:
https://foo.s3.amazonaws.com/ProjectDownloads/foo/title.xlsx?AWSAccessKeyId=foo&Expires=1602279238&Signature=foo
I haven't worked much with S3, but my understanding is this is a Presigned URL - I can paste it in my browser and the excel file downloads.
How can I download this file directly using javascript (on the frontend, as my system is not running node)?
I have tried generating an tag element with click - however all my files download as corrupt. I can download the file directly by pasting the link in my browser and it auto initiates a download.
Any help will be appreciated.
I have tried the following, but it downloads a file with error:
var link = document.createElement('a');
link.href = url;
link.download = 'foo.xlsx';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
You don’t need JS to force a download on clicking the link; you can do this with just HTML. And, it doesn’t matter that the source is a presigned S3 URL - it works with any URL.
<a href=“Foo.xlsx” download>click to download</a> should do it for you.
Have a look at https://www.w3schools.com/howto/howto_html_download_link.asp for the browser support matrix.

Javascript function force downloads an MP3 file from URL, once downloaded however MP3 file wont play on my computer only on VLC Player? Why?

I have a Javascript function that basically force downloads a file once provided the URL and name of the file. This function works absolutely fine as intended I call it from a HTML tag/hyperlink. But once the MP3 file from my function downloads it wont play on my computer. I have designed this function for a user to be able to download different MP3 and WAV files upon clicking on the associated link for that file. I can only play the downloaded MP3 file on the media player VLC it won't play on my laptop. Is there something I am doing to the MP3 file in the download process with my function or why will it not play once downloaded?
I have looked into MP3 file variations and encoding but Im not sure what to look for really or what I am doing wrong. When I download MP3 files from other sites they are working fine and play straight away.
Function:
<script>// <![CDATA[
function downloadFile(data, fileName, type="text/plain") {
// Create an invisible A element
const a = document.createElement("a");
a.style.display = "none";
document.body.appendChild(a);
// Set the HREF to a Blob representation of the data to be downloaded
a.href = window.URL.createObjectURL(
new Blob([data], { type })
);
// Use download attribute to set set desired file name
a.setAttribute("download", fileName);
// Trigger the download by simulating click
a.click();
// Cleanup
window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
}
// ]]></script>
Function Call:
My Download
If you look in the downloaded file, you'll find it contains the text https://cdn.shopify.com/s/files/1/0037/4951/1217/files/ascence-places-like-that-ncs-release.mp3?360 because that's the value you're passing for data and using when creating the blob. Nothing about that code creating a blob downloads the content (and the SOP prevents your code from downloading the content, unless of course the other site overrides it with CORS).
I don't think you can force the link to open the Save dialog. Normally that's triggered by the response to the link from the server (via the Content-Disposition header), which of course you can't control in your scenario. Using the download attribute won't do it, it has no effect cross-origin (other than when the link is a data: or blob: URL, see MDN's description).
You can show them the link so they can right-click and choose "Save target as...", but I know that's going to be a disappointing answer for you.

Instead of downloading, files are opening in browser

My Pdf file is stored in google bucket, and i have a link let say https://storage.googleapis.com/bucketName/xyz.pdf. To download this file i am doing this,
<a href="https://storage.googleapis.com/bucketName/xyz.pdf" download> Download This File </a>
But when i click on this anchor tag, instead of downloading this file browser open this file in same tab even i try to download the file via javascript and was using this code .
var link = document.createElement("a");
link.download = 'File.pdf';
link.href = 'https://storage.googleapis.com/bucketName/xyz.pdf';
link.click();
But same happen again file open in same tab instead of downloading. I don't know what is the main problem ? Is this Google bucket is not letting file to download, or my chrome setting preventing files to download.
It is not downloading in Chrome i guess Chrome do allow the downloading from CORS files.
As per JavaScript/jQuery to download file via POST with JSON data construct a blob and use that to return the file reference for the link.
This will inform the browser of your intent in a standards compliance manner.
example ...
$.get(/*...*/,function (result)
{
var blob=new Blob([result]);
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="myFileName.txt";
link.click();
});
Solution
Content-Disposition attachment seems to work for me:
self.set_header("Content-Type", "application/json")
self.set_header("Content-Disposition", 'attachment; filename=learned_data.json')
Workaround
application/octet-stream
I had something similar happening to me with a JSON, for me on the server side I was setting the header to
self.set_header("Content-Type", "application/json")
however when i changed it to:
self.set_header("Content-Type", "application/octet-stream")
It automatically downloaded it.
Also know that in order for the file to still keep the .json suffix you will need to it on filename header:
self.set_header("Content-Disposition", 'filename=learned_data.json')
Try link.target = "_blank"; this will open file in new tab and link.download will force it download.
Please tell if this works.

Categories

Resources