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.
Related
How do you view a blob data that is from a sql database file (.db .db3 and others) and view it on web browser by only using a single html file? The blob data are probably meant to be seen as an image file (jpg, png and others)
Let's say I have a blob data like this:
du�� C�BVwv�q8q7k�1�H�asfdasdfasdf�#s;47sk"as��'7hib-�3$asdffdsfa�a�����U�����P������
And I want to put that single blob data directly (without calling the database file, just using the value of the blob itself) inside a html file so I can directly open it from my browser without installing other software or setting up a local server inside my computer.
I'm sorry if I explain this weirdly, I rarely code, I honestly don't know anything about sql or that server thingamajig, I just want to view the blob file.
You could use Blob. Here I construct a blob and then turn it back into a string that I insert in the document.body.
var array = ['<p>Hello World!</p>'];
var blob = new Blob(array, {type : 'text/html'});
const reader = new FileReader();
reader.addEventListener('loadend', e => {
document.body.innerHTML += e.target.result;
});
reader.readAsText(blob);
And I guess that the Filereader can also read a file if needed.
I want to create an online viewer where a user can upload models and view them, rather than having to edit the path in the source code.
Since browsers don't allow to retrieve file path but I can read the contents of the file, how do I load a model (obj, ply, mtl etc) given the contents of the file?
There a couple ways to do it, but if you go to the github three.js repository, in the examples you'll see an obj loader. There are examples with mtl, stl, collada, etc.
http://threejs.org/examples/webgl_loader_obj.html
The repository has the examples folder which has a js folder with all the example loaders:
https://github.com/mrdoob/three.js/tree/master/examples/js/loaders
If you want to subvert the internal three loader, each loader example has a parse(text) method.
Well just found out that the three.js online editor does this #http://threejs.org/editor/ .
File -> Import.
You can use the HTML5 filereader API and then you can call parse method from the corresponding loader directly with the result.
Or you can use the file reader, read the file into a data url and load the data url instead of your normal url.
HTML code allowing user to load the model file
<h1>Model File Reader</h1>
<div>
Select a model file:
<input type="file" id="fileInput">
</div>
Javascript code to handle the onload event:
window.onload = function() {
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
// file selection is done you can now read the file
var file = this.files[0];
// set your file encoding
var encoding = 'ISO-8859-1';
// create a file reader
var reader = new FileReader();
// set on load handler for reader
reader.onload = function(e) {
var result = reader.result;
// parse using your corresponding loader
loader.parse( result );
}
// read the file as text using the reader
reader.readAsText(file, encoding);
});
}
Check here for more information on the file reader class
I am reading a local CSV file using a web UI, and the HTML5 FileReader interface to handle the local file stream. This works great.
However, sometimes I want the file being read to be updated continuously, after the initial load. I am having problems, and I think it might have something to do with the FileReader API. Specifically, after the initial file load, I maintain a reference to the file. Then, when I detect that the size of the file has increased, I slice off the new part of the file, and get a new Blob object. However, there appears to be no data in these new Blobs.
I am using PapaParse to handle the CSV parsing, though I don't think that is the source of the problem (though it may be).
The source code is too voluminous to post here, but here is some pseudocode:
var reader = new FileReader();
reader.onload = loadChunk;
var file = null;
function readLocalFile(event) {
file = event.target.files[0];
// code that divides file up into chunks.
// for each chunk:
readChunk(chunk);
}
function readChunk(chunk) {
reader.readAsText(chunk);
}
function loadChunk(event) {
return event.target.result;
}
// this is run when file size has increased
function readUpdatedFile(oldLength, newLength) {
var newData = file.slice(oldLength, newLength);
readChunk(newData);
}
The output of loadChunk when the file is first loading is a string, but after the file has been updated it is a blank string. I am not sure if the problem is with my slice method, or if there is something going on with FileReader that I am not aware of.
The spec for File objects shouldn't allow this: http://www.w3.org/TR/FileAPI/#file -- it's supposed to be like a snapshot.
The fact that you can detect that the size has changed is probably a shortcoming of an implementation.
I'm just starting out with Meteor and (and coding in general) I have done the tutorial projects and examples etc and am looking to start my own project. My project is I want users to be able to select a file on their computer with an field, user selects file, the contents of the file is read and the webpage provides a hash of the contents. Possible to be done clientside without the file being uploaded to a server?
A bit lost where I should be looking- HTML5 file-read API, cryptoJS, or something else? How would I go about providing that functionality in a webpage?
Yes, this can be done using the HTML5 FileReader API.
Template.fileUpload.helpers({
'change #file': function (e) {
var files = e.target.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
}
reader.readAsText(file);
}
});
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?