I am building an Android App Using HTML5+Cordova in IntelXDK. I am downloading a file using HTML5 as shown below.
<script type='text/javascript'>
function saveTextAsFile()
{
var textToWrite = "This Is The Inner Text Of File.";
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = "MyFileName.txt";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
// alert(filesavedat); // <<<--- Need the downloaded file path here
}
</script>
I have no idea weather user have only internal memory or SD card too and have no idea about his/her default download folder. I want to get the path of this file wherever the user device save it after downloading in my JavaScript code(variable). Is this possible or not? If yes then how?
In native app developing, you can use the following method to access to the download directory.
Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS);
Essentially in Cordova file API, there must be some methods doing this in the backend.
Related
I get my file url form backend api, now I want to download it when user click the button.
It works when the file is excel(xlsx）, but for txt files or pictures(jpeg，png), it will only open in a new tab instead of downloading it.
$scope.download = function (row) {
var url = row.entity.downloadUrl;//the correct path of file server
window.open(url, "_blank");//problem lies in here
};
How to make it in AngularJS?
Below is the request
try this:
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.style = "display: none";
downloadLink.href = value.FilePath;
downloadLink.download = value.FileName;
downloadLink.click();
downloadLink.remove();
I have an app that converts files. I'm sending a file, and the converted file is being returned in the form of a data URL. Had everything working great in Chrome, but IE (10/11/Edge) is a different story. Have tried several things to no prevail:
1) HTML5 download attribute is not supported in IE. I tried assigning the returned URL as an anchor tag href, but invoking .click() is not supported, and manually clicking on the link does nothing.
2) window.navigator.msSaveOrOpenBlob() and File Saver.js. The SaveAs dialog pops up, but the blob is empty and never downloads anything.
var file= new Blob([returnedFile], {type: "application/pdf"});
window.navigator.msSaveOrOpenBlob(file, 'doc.pdf');
FileSaver.saveAs(file, 'doc.pdf');
Any ideas or suggestions to try?
First, try to verify saveAs existance:
if (window.saveAs) {
window.saveAs(blob, name);
} else {
navigator.saveBlob(blob, name);
}
As for the Blob itself:
create <a>
update href:
a.href = window.URL.createObjectURL(new Blob(returnedFile, {type: "application/pdf"}));
fire click event
More or less the same functionality can be reviewed there: http://jsfiddle.net/VB59f/2/
Ended up getting the browser via navigator.userAgent.match and handling the save based on each browser accordingly:
var saveData = (data, fileName) => {
IE:
FileSaver.saveAs(blob, fileName + "." + extension);
Chrome:
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.style.display = "none";
downloadLink.href = data;
downloadLink.download = fileName;
downloadLink.click();
I just discovered today about the Blob() API, trying to download text into a file, from some input and span elements on my site. The problem is that the Blob(), no matter what type I give it, removes all the control codes, at least the essential ones like \n\r.
This is the code I am using to download data constructed as an ASCII file:
function saveTextAsFile2(){
var textToWrite = document.getElementById("inputTextToSave").value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.URL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
I tried these types to no avail...
{type:'octet/stream'}
{type:'file'}
When the function is called the text is displayed in a textArea element as follows:
When downloaded, however, in the file it looks like this:
Line 1 - Fine line 2 - Line 3
If anyone could explain how this should be set up for the control codes to pass through the download, I would appreciate it greatly.
Regards,
DK
I discovered the answer, while testing things. It turns out that MS NotePad ignored the control codes as they come through the Blob(). All other editors recognize the control codes! Wackey stuff from MS! To avoid that problem, since I default to NotePad with the "*.txt" files, I will have to download with a different extension and fire it up with one of the other editors.
Thank you all who attempted to help by reading the question.
The good old Reagan slogan, Trust, but verify MS products still holds!
DK
Is it possible to overwrite a file each time it saves. I have a textarea in html and i'm using JavaScript to save the text to a file. It is currently saving as: test.txt, test(1).txt, test(2).txt. Is it possible to get it to save a test.txt every time it's downloaded.
The code i'm using to download is the following:
function saveTextAsFile()
{
var textToWrite = document.getElementById("inputTextToSave").value;
var textFileAsBlob = new Blob([textToWrite], {type:'plan/text'});
var fileNameToSaveAs = "test.txt";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "My Hidden Link";
window.URL = window.URL || window.webkitURL;
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
Thanks for your help.
No , a javascript script doesn't have access to the filesystem and therefore cant manipulate files, all it can do is suggest to the browser that a stream wants to be downloaded and also suggest a name for that stream. The browser is responsible for deciding what and how will be downloaded (you can add plugins and extensions to the browsers to enforce this particular behavior, but i do not think that this was what you needed)
EDIT:
On second note you could actually do that with a java applet. However i cannot help you with that, and in all sincerity, you should not (for one it wont work on chrome, also unless you have a really important reason to, it would be like killing a mosquito with a nuclear bomb, not to mention the chance of accidentally deleting a file from the user's side and a storm of alerts that would make your application look suspicious as it wont have any real reason to use java from they eyes of the user)
I have a few values which are coming from a json via socket call through the hardware on my html page,now these values are getting changed continously over duration of 3 secs.
I want to create a text file which can append the values (not replace them) to these continuously changing values.
What i've done is called a function on change event which creates a new text file every time a change event is trrigered.What i want it is to create a single file and append values inside it,whats happening now is its creating a new file every time value changes.
My code is as:
saveTextAsFile:function(d)
{
console.log("data sent is",d);
var textToWrite = d;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = "testdata.txt";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
},
destroyClickedElement: function(event)
{
document.body.removeChild(event.target);
}
Because the variable textFileAsBlob is a Blob object, it cannot be changed.
A Blob object represents a file-like object of immutable, raw data.
Blob - Web API Interfaces | Mozilla Developer Network
Therefore you should do all of your concatenation work in Javascript before the file is created, or you should do work on the file on the server side.