my project is about recording audio using html5.I'm saving the audio in a blob.I want to use the data in that blob to convert it to mp3 or any other format using ffmpeg,my problem is that when calling the fileName of the audio, it's giving me an error that invalid data was found when calling input.In other words, its not reading the fileName of the audio I'm recording.
here is my code for saving the fileName and downloading it:
var blob = new Blob ( [ view ], { type : 'audio/wav' } );
// let's save it locally
// let's save it locally
document.getElementById('output').innerHTML = 'Handing off the file now...';
var url = (window.URL || window.webkitURL).createObjectURL(blob);
console.log(url);
var link = window.document.createElement('a');
link.href = url;
link.download = 'output.wav';
var fileName=link.download;
console.log(link.download);
my question is: why I can't retrieve the fileName of the audio file.although in the console its getting me back the name of the file, but when accessing that file it gives me no data to be found.what is going wrong??
Related
I am using laravel. I don't want to return url of the pdf to the front-end, as it's located in google cloud and i don't want the link to be seen. That's why I need to return pdf directly and let user download it through browser.
I tried this:
return response()->json(['data' => file_get_contents(Storage::url($cert_path))]);
//this says: malformed utf-8 characters, 500 error
Then I googled and tried this:
$file = file_get_contents(Storage::url($cert_path));
$file = mb_convert_encoding($file, 'HTML-ENTITIES', "UTF-8");
return response()->json(['data'=>$file]);
//this returns pdf, but in front, when i have a download code of js, when I download it, the whole pdf is empty.
The url of the pdf is correct, as I can go to that url and see the pdf.
how do I return pdf successfully?
I will also include javascript download code:
var blob = new Blob([pdf], {
type: 'application/pdf'
});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "ffa.pdf";
link.click();
I have a protected API that fetches the contents of a file. By protected I mean, I need to send in Authorization headers before the API will allow me to fetch the file contents.
How do I display this in a browser window?
Currently, my nodejs backend is returning the contents with Content-Type:text/html
On the frontend, my current code looks like this
$http.get(downloadUrl)
.then(function(resp) {
var data = resp.data;
var blob = new Blob([data], { type: "text/html" });
let objectUrl = (window.URL || window.webkitURL).createObjectURL( blob );
let anchor = document.createElement("a");
anchor.href = objectUrl;
anchor.download = 'source.html';
anchor.click();
window.URL.revokeObjectURL(objectUrl);
This just download the file though. I just want to display it, preferably in a new window.
Edit I believe this is a duplicate of this question and there is no front-end-only solution to it. It requires the backend to play a part, such as implementing a "Holder-Of-Key Authentication Scheme"
I've got SPA(ember js), and REST API service - php(laravel 5.2).
I'm trying to download pdf document generated on server
That's how i'm generating pdf
$tcpdf->Output({path}, 'I');
if i visit API resource directly in browser everything is fine and file downloads normally.
But when i try to catch response in SPA and initiate download i'm getting empty pdf as a result.
my js download function looks like
this.download(results, 'test.pdf','application/pdf')
download(data, filename, mime) {
var blob = new Blob([data], {type: mime || 'application/octet-stream'});
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE workaround for "HTML7007: One or more blob URLs were
// revoked by closing the blob for which they were created.
// These URLs will no longer resolve as the data backing
// the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
}
else {
var blobURL = window.URL.createObjectURL(blob);
var tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', filename);
// Safari thinks _blank anchor are pop ups. We only want to set _blank
// target if the browser does not support the HTML5 download attribute.
// This allows you to download files in desktop safari if pop up blocking
// is enabled.
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
window.URL.revokeObjectURL(blobURL);
}
},
results variable is a result file string returned from server.
Can someone point out what is wrong here and why my pdf is empty?
I am developing a WebRTC application that transfers file over WebRTC data channel. After I successfully transfer the file as data url, I want to create a link says "Click to download" from that data url.
I have used HTML 5 <a> tag with download attribute to create that content. An examplary content as follows;
<a download="fileName" href="data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBBQABgAIAAA...sc1BLBQYAAAAAGQAZAKoGAAD9eQAAAAA=">
It worked just fine for small contents that lesser than 16MB or so, but for bigger contents, it just didn't worked and nothing happened when you click.
Then I tried to open new page with data url as follows;
// event.message.content is base 64 data url
window.open(event.message.content,'Downloading');
This solution also worked for small contents, but failed to download big contents.
How could I download big content by using Javascript(pure javascript if possible) and HTML 5? Is there any more efficent way than base64? Thanks to CBroe, now I know that base64 is not the efficent way. What would be the efficent way to do this?
Please feel free to ask for details if any missing.
Thanks,
Ugurcan
Edit: I've tried following code snippet, it worked for small content but not worked for bigger content too. It is probably same thing with the first one.
var save = document.createElement('a'),
event;
save.href = message.content;
save.target = '_blank';
save.download = message.identifier;
event = document.createEvent('Event');
event.initEvent('click', true, true);
save.dispatchEvent(event);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
Following code snippet derived from this answer helped me to get Blob from base64 data uri.
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
Then I wrote this code snippet in order to download Blob content
var blob = dataURItoBlob(message.content);
var blobUrl = URL.createObjectURL(blob);
var save = document.createElement('a'),
event;
save.href = blobUrl;
save.download = message.identifier;
event = document.createEvent('Event');
event.initEvent('click', true, true);
save.dispatchEvent(event);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
Thanks for your kind help folks.
I have a comma separated variable in my .js file, for example:
var out='';
out+="1,val1,val2,val3,val4\n";
out+="2,val1,val2,val3,val4\n";
out+="3,val1,val2,val3,val4\n";
I am displaying this value in a browser using document.write(out);.
I would like the out variable to be downloadable as a .csv file.
From data stored in a variable, is there any way to create a csv file and its associated download link in JavaScript?
jsFiddle
Depends on browser support, but that's getting pretty good with new browsers: http://jsfiddle.net/3fMeL/2/
var CSV = [
'"1","val1","val2","val3","val4"',
'"2","val1","val2","val3","val4"',
'"3","val1","val2","val3","val4"'
].join('\n');
window.URL = window.webkitURL || window.URL;
var contentType = 'text/csv';
var csvFile = new Blob([CSV], {type: contentType});
var a = document.createElement('a');
a.download = 'my.csv';
a.href = window.URL.createObjectURL(csvFile);
a.textContent = 'Download CSV';
a.dataset.downloadurl = [contentType, a.download, a.href].join(':');
document.body.appendChild(a);
So the first item is the Blob object, this creates the object that can be downloaded. https://developer.mozilla.org/en-US/docs/Web/API/Blob (http://caniuse.com/#search=blob)
The next part is the download attribute of the link, which informs the browser to download the CSV file rather than opening it in the browser window. (http://caniuse.com/#feat=download)
there is jquery plugin for output file at the client side without server side interaction,
https://github.com/dcneiner/Downloadify