In my Javascript, I have a File object using input type file, so I can get file name, file size, etc. How do I get the File's actual data?
You need to address the raw data by looking back to the Blob object. See here:
https://developer.mozilla.org/en-US/docs/Web/API/Blob
You can use a FileReader object, e.g.
function readFile(thefile) {
var reader = new FileReader();
reader.onload = function(e) {
alert(e.target.result);
};
reader.readAsText(thefile);
}
Related
I have been successfully using FileReader to parse some XML data to HTML page from a local file. If I make changes to the DOM, I can successfully parse the data back to an XML file, but if I try to overwrite the file that was used to read, it does not successfully download. If I save the file with a different name, it successfully downloads.
I use FileReader like this from a browse/input selector:
function handleFileSelection(evt) {
var files = evt.target.files;
var url = window.URL.createObjectURL(files[0]);
reader = new FileReader();
reader.onload = function (e) {
Then if I make changes, I save the data like this:
var blob = new Blob(
arrayOfUnits,
{ type: "text/xml" }
);
window.navigator.msSaveBlob(blob, 'Units.xml');
I feel like the FileReader either has the file locked, or perhaps JavaScript cannot overwrite local files?
I have tried using: FileReader.abort() which seems to be like FileReader.close() in java, but this didn't fix my issue.
Any help is appreciated, I am new to using JavaScript with local file system.
FileReader won't write to the file system. You need FileWriter to do so.
I'm using the management API to get all my installed apps and extensions. I want to send this information to server.
Every app/extension has an icon array, that has size and url.
The url is something like chrome://extension-icon/gmgpodcgeocidkeclglljo88jp9kclhhmmdacfo/32/0. I want to send it to my server in base64.
What I'm trying to do is something like:
var reader = new FileReader();
reader.onloadend = function() {
result = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
result = "";
}
Where file is a File object of the icon url. But I cannot find how to create an File object with this url format.
I've tried:
var fileUrlArray = ["chrome://extension-icon/gmgpodcgeocidkeclglljo88jp9kclhhmmdacfo/32/0"];
var file = new File(fileUrlArray, 'icon.png');
And as a result I got an absolutely wrong base64 string.
Any ideas about how to do it?
Thanks.
i'm currently trying to upload a file to my server. But i'm not really sure how to do this with readAsArrayBuffer. This works if I use readAsBinaryString.
If i try to console.log it only returns 'arrayBuffer: {}'.
After I've tried to upload it, i can see inside post that only a empty object was sent. If I use readAsBinaryString, I see a bunch of binary code.
var file = document.getElementById('my_file').files[0],
reader = new FileReader();
reader.onloadend = function(e){
console.log(e.target.result);
$scope.image = e.target.result;
}
reader.readAsArrayBuffer(file);
How can I see my file, so I know it's working when using readAsArrayBuffer?
If more code is needed let me know! Thanks.
According to ArrayBuffer documentation
You can not directly manipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.
So as I commented before probably console.log doesn't know how to represent the buffer and therefore it simply outputs arrayBuffer: {}.
If you want to show something in the console you need to use a typed array or a DataView. For example using an Int8Array:
reader.onloadend = function (e) {
console.log(e);
console.log(new Int8Array(e.target.result));
};
See demo
If you want to upload am image then you have to convert it into base64 format. You can do it either by using canvas element or by using Filereader.If you are using Filereader then you have to use readAsDataURL()
You can refer MDN for this
https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL
also you can use canvas element
Convert an image to canvas that is already loaded
Using the filereader API it is possible to show a preview of the file, by reading the file with readAsDataURL
What I am trying to do is:
The user selects a file
A preview is shown, so that the user has some feedback.
If the user is satisfied, he submits the data to the backend.
Implementing step 3 can be done by re-reading the file with readAsBinaryString, but this looks problematic because the data could have disappeared or changed on disk. So What I would like is to convert the data returned from readAsDataURL to the format returned by readAsBinaryString. How can I do this?
Another alternative would be to submit the data to the backend as returned by readAsDataURL, but I would like to avoid that, since that would require special handling on the backend in my case.
Like CBroe said, you dont need to read the file twice.
JS :
handleFileSelectThumbFile(evt){
var files = evt.target.files;
var file = files[0];
// You can get the mime type like this.
var thumbMIME = files[0]['name'].split('.').pop();
if (files && file) {
var reader = new FileReader();
reader.onload = function(readerEvt) {
// Split the readerEvt.target.result by a ','.
// You can send the binaryString variable to the server.
// Its base64 encoded already.
var binaryString = readerEvt.target.result.split(',')[1];
// Set the image preview to the uploaded image.
$('.img-preview').prop('src', readerEvt.target.result);
}.bind(this);
reader.readAsDataURL(file);
}
}
HTML :
<input type="file" onChange={this.handleFileSelectThumbFile} required/>
<img src='http://placehold.it/300' class='img-preview'/>
You can read the MIME type from the first part of readerEvt as well. Look at CBroe's comment above.
I have a code:
var FReader = new FileReader();
FReader.onload = function(evnt){
console.log(evnt.target.result);
//How can I convert `evnt.target.result` back into a file and save it?
}
FReader.readAsBinaryString(file);
Please do not offer me to use other methods. This is a very simplified code.
In the original code this data is passed to other people via websockets. And I need to transform it into files.
How can I convert evnt.target.result back into a file and save it?