We Keep Coding

How to work with the url of a fileReader object?

Hello! I'am trying to make it work a function called loadDocument, who need a url of the loaded files from the user local computer to work. I'm writing an API to load document from local user computer, and show it on a web reader.
This is my upload button :
<input type="file" id="input" onchange="module.onLoadSelection();" alt="Browse" name="upload"/>
This is my function without fileReader :
var onLoadSelection = function () {
var select = document.getElementById('input');
if (select && select.value) {
var id= '';
var url = select.files.item(0).name;
module.loadDocument(url,id);
}
};
This is my function with fileReader :
var loadTest = function (input) {
var file = document.querySelector('input[type=file]').files[0];
console.log("file loaded! ->", file); // i can read the obj of my file
var reader = new FileReader();
var id = ''; // don't need rightnow
var url = reader.readAsDataURL(file);
console.log("url :", url); // show me undefined....
module.loadDocument(url,id);
}
What i am trying is to get the url of the loaded file from user computer to get my function loadDocument working. She need a url parameter to work.
loadDocument is an API function, i assume i can't get the filepath of my user due to security reason.
What do i need to change/update on my loadDocument(); function to work?
Edit : In fact, nothing to change. The correct way to read my file was :
<input type="file" id="input" onchange="module.onLoadSelection(this.files);" alt="Browse" name="upload"/>
var onLoadSelection = function (files) {
if (files && files.length == 1) {
var id = '';
var url = URL.createObjectURL(files[0]);
module.loadDocument(url,id);
}
};

Don't use a FileReader at all.
When you want to display a File (or a Blob) that is in the browser's memory or on user's disk, then all you need is to generate an URL that do point to this memory slot.
That's exactly what URL.createObjectURL(blob) does: it returns a Blob URI (blob://) that points to the data either in memory or on the disk, acting exactly as a simple pointer.
This method has various advantages over the FileReader.readAsDataURL() method. To name a few:
Store the data in memory only once, when FileReader would need it at reading, then generate a copy as an base64 encoded, and an other one at displaying...
Synchronous. Since all it does is to generate a pointer, no need to make it async.
Cleaner code.
const module = {
loadDocument: (url) => {
document.body.append(
Object.assign(
document.createElement('iframe'),
{ src: url }
)
)
}
};
document.querySelector('input[type=file]').addEventListener('input', function (evt) {
var file = this.files[0];
var url = URL.createObjectURL(file);
module.loadDocument(url);
});
<input type="file">

function PreviewFiles(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//alert(e.target.result);
$('#pclogo').prop('src', e.target.result)
.width(200)
.height(200);
var base64result = e.target.result.split(',')[1];
$('input[name="logo"]').val(base64result);
};
reader.readAsDataURL(input.files[0]);
}
}

File objects have a readAsDataURL method.
Use that.
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
doSomethingWithAUrl(reader.result);
}, false);
if (file) {
reader.readAsDataURL(file);
}

Read Simple JSON file (almost done)

I have a input and when I load it shows the file right in console.log.
But how do I get the actual json data from the file??
$('#importFlow').change(function () {
var files = event.target.files;
var file = files[0];
console.log(file);
console.log(JSON.parse(file)); //doesn't work
});

You'd need to use the FileReader API.
$('#importFlow').change(function () {
var files = event.target.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function(event) {
var jsonObject = JSON.parse(event.target.result);
console.log(jsonObject); // Logs the parsed JSON
}
reader.readAsText(file);
});

You can read actual file content like this:
$('#importFlow').change(function () {
var files = event.target.files;
var reader, fileContent;
if (this.files)
{
reader = new FileReader();
reader.onload = function (e)
{
fileContent = e.target.result;
}
reader.readAsDataURL(this.files[0]);
}
});
In the above code, you can get the actual file data in the "fileContent" variable.

how do you upload a filestream/buffer in winrt html/JavaScript?

I want to read a file from local storage and upload it via ajax. How is this done?

In most browsers, you can use FileReader to read data from file inputs. There are various functions for reading the data; this example uses the function that returns an ArrayBuffer containing all the bytes:
<script>
window.onload = function() {
document.getElementById('upload').onchange = function(e) {
var file = e.target.files[0];
var fileReader = new FileReader();
fileReader.onload = function(e) {
var bytes = e.target.result;
console.log(bytes);
};
fileReader.readAsArrayBuffer(file);
};
};
</script>
<input type = 'file' id = 'upload' />

I managed to figure it out. Here's the code for anyone interested.
var form = new FormData();
form.append("data", angular.toJson(message));
var bytes = new Uint8Array(audio.length); //audio is an IBuffer
var dataReader = Windows.Storage.Streams.DataReader.fromBuffer(audio);
dataReader.readBytes(bytes);
dataReader.close();
var media = new Blob([bytes], { type: "application/octet-stream" }); //application/octet-stream or audio/mpeg?
form.append("attached_files", media, "recording-aac.caf");
return $http.post(AppSettings.baseUri + "api/sendmessage", form, { headers: { "Content-Type": undefined } });

open excel file with xlsx.js by path

Hi i want to open excel file with xlsx extension with xlsx.js library.
I can open file by html input but i want to open it by using file path.
I have this code extracted from xlsx.js demo:
function handleFile(e) {
rABS = false;
use_worker = false;
console.log(e);
var files = e.target.files;
var f = files[0]; {
var reader = new FileReader();
var name = f.name;
reader.onload = function (e) {
if (typeof console !== 'undefined')
console.log("onload", new Date(), rABS, use_worker);
var data = e.target.result;
console.log("target result >>>>>>>>> " + e.target.result);
if (use_worker) {
xw(data, process_wb);
} else {
var wb;
if (rABS) {
wb = X.read(data, {
type : 'binary'
});
} else {
var arr = fixdata(data);
wb = X.read(btoa(arr), {
type : 'base64'
});
}
process_wb(wb);
}
};
if (rABS)
reader.readAsBinaryString(f);
else
reader.readAsArrayBuffer(f);
}
}
I want something like this:
var file = new File([""],"C:\\Users\\PalFS\\Downloads\\Fiverr_Example_List (1).xlsx");
var data = file;
How to do this or how can i convert this file into arraybuffer like it is returned from, var data = e.target.result;.
Thanks

You could use --allow-file-access-from-files flag at chrome, chromium with XMLHttpRequest , .responseType set to "arraybuffer" to retrieve .xlsx file from local filesystem as ArrayBuffer; set new File() data to returned ArrayBuffer. Second parameter at new File() constructor should set the .name property of created file.
Launch /path/to/chrome --allow-file-access-from-files
var request = new XMLHttpRequest();
// may be necessary to escape path string?
request.open("GET", "C:\\Users\\PalFS\\Downloads\\Fiverr_Example_List (1).xlsx");
request.responseType = "arraybuffer";
request.onload = function () {
// this.response should be `ArrayBuffer` of `.xlsx` file
var file = new File(this.response, "Fiverr_Example_List.xlsx");
// do stuff with `file`
};
request.send();

javascript file type not caught?

I am using the javascript file api to read a file and I want to get its type out. I am mainly using it to upload audio and video files. However when i upload amr, 3gp, and aac audio files, javascript can't figure out the filetype. I need to know the filetypes for the different audio formats as I use the files differently depending on the format. Is there anyway for me to figure out the format for the above mentioned files? I have supplied the code I use below.
var f = this.files[0];
var fr = new FileReader();
fr.onload = function (ev2) {
console.dir(ev2);
//$('#image').attr('src', ev2.target.result);
//extra[extra.length] = ev2.target.result;
extra[extra.length] = ev2.target.result;
var splitted = ev2.target.result.split(','); //get the type
fileType[fileType.length] = splitted[0];
console.log("splitted[0]: "+splitted[0]);
console.log("f.type: "+f.type);
};
fr.readAsDataURL(f);
regards

Try this code:Source
Demo
JSFiddle Example
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
//onload code
}
reader.readAsText(file);
} else {
alert( "File not supported!");
}
or also this code:
var file = $("#inputFile")[0].files;
alert(file[0].type);