Develop Reference

Load a local text file in javascript

I need to read a file locally using javascript.
I know that for security reasons the possibility of doing this directly is inhibited.
Is there any way to work around this?
Furthermore, if I try to use the features of the File API specification, I can't get the "load" button to work if the button itself is not directly attached in the document.body. I would like this button to work even if attached to child type elements. Is there a solution for this?
Thank you very much
fileReader() {
console.log("FileReader Called");
var fileInput = document.getElementById('file');
var fileDisplayArea = document.getElementById('source-container');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerText = reader.result;
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!";
}
});
}

JavaScript FileReader is duplicating the onload callback

The following code is driving me nuts. It picks up when a file upload input has changed and then grabs the image via FileReader. The annoying thing is, and i can't work out why, that is keeps incrementally duplicating the onload event. So the first time i select a file it fires onload once, if i select a second file with the same file input the onload fires twice, if i select a file again it fires 3 times and on like that.
var ele = document.getElementById('photo-upload');
ele.addEventListener('change',function(e){
console.log("FLE CHANGED");
var file = e.target.files[0];
var fr = new FileReader();
fr.onload = function(e){
console.log("FILE READER LOADED");
}
}

You are creating new file reader with each click on <input type="file" id="photo-upload" />.
I've modified your code:
const ele = document.getElementById('photo-upload');
const fr = new FileReader();
fr.onload = function(e){
console.log("FILE READER LOADED");
}
ele.addEventListener('change',function(e){
console.log("FLE CHANGED");
const file = e.target.files[0];
// load file with using on of fr methods
// eg.
fr.readAsArrayBuffer(file);
}
Working example:
const ele = document.getElementById('photo-upload');
const fr = new FileReader();
fr.onload = evt => {
console.log(evt.target);
console.log("FILE READER LOADED");
}
ele.addEventListener('change', evt => {
console.log("FLE CHANGED");
const file = evt.target.files[0];
fr.readAsArrayBuffer(file);
})
<input type="file" id="photo-upload" />

How can I store a blob in a form and send it to the server when the clicks on submit without Ajax?

This is my function:
FileCropped.prototype.change = function () {
var obj = $(this).data("plugin.file-cropped");
var files = obj.$element[0].files;
var file;
var URL = window.URL || window.webkitURL;
var blobURL;
if (files && files.length) {
file = files[0];
console.log("I have files");
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
obj.$element.val('');
obj.$hidden[0].value = blobURL;
//URL.revokeObjectURL(blobURL);
} else {
window.alert('Please choose an image file.');
}
} else
{
console.log("No files?");
}
}
I am trying right now to attach the blob to an existing form input but it does not work. With the chrome debugger I see the method works fine and follow the expected path, but at the time of submit the server gets nothing.
Any hint?
Edit: of course the function has no value right now. I could just use the normal file input. The goal is to be able to manipulate the blob before attaching it to the form.

You can use FileReader to read the file as data URL
var fileReader = new FileReader();
fileReader.addEventListener('load', function () {
blobURL = fileReader.result;
obj.$hidden[0].value = blobURL;
});
fileReader.readAsDataURL(file);

How to detect file extension with javascript FileReader

I'm using javascript's FileReader and my customized function for reading an JPG-JPEG image,
My problem is that how it's possible to detect the file extension through my code below and give error to user if the file is not JPG-JPEG:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
alert('image has read completely!');
}
reader.readAsDataURL(input.files[0]);
}
}

You can try this,
I changed your code as follows:
var fileTypes = ['jpg', 'jpeg', 'png', 'what', 'ever', 'you', 'want']; //acceptable file types
function readURL(input) {
if (input.files && input.files[0]) {
var extension = input.files[0].name.split('.').pop().toLowerCase(), //file extension from input file
isSuccess = fileTypes.indexOf(extension) > -1; //is extension in acceptable types
if (isSuccess) { //yes
var reader = new FileReader();
reader.onload = function (e) {
alert('image has read completely!');
}
reader.readAsDataURL(input.files[0]);
}
else { //no
//warning
}
}
}

There's not a direct interface to read the file extension. You have at least 2 options:
Use a regex to extract the extension from the filename
Use the content type of the file as your filter
For the extension method it'd be something like:
var extension = fileName.match(/\.[0-9a-z]+$/i);

How to check type of uploaded image through FileReader?

There is the following code which makes preview before uploading on the server:
$(function(){
var preview = $(".preview");
$("#menu_image").change(function(event){
var input = $(event.currentTarget);
var file = input[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
var img = new Image;
img.onload = function() {
if ((img.with != 160) || (img.height != 160)) {
return;
}
preview.attr("src", img.src);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
});
But this code doesn't check file's type. How can I do it? Thanks in advance.

You don't need to load the FileReader to know file type.
Using your code:
var file = input[0].files[0];
is as easy as checking the file.type property.
You can check if the file is an image:
if (file.type.match('image.*')) {
console.log("is an image");
}
And which type of image is:
if (file.type.match('image.*')) {
console.log("is an image");
console.log("Show type of image: ", file.type.split("/")[1]);
}
Note that file.type.split("/")[1] should be an "image"

You can do something similar to check the file extension:
var extension = file.name.substring(file.name.lastIndexOf('.'));
// Only process image files.
var validFileType = ".jpg , .png , .bmp";
if (validFileType.toLowerCase().indexOf(extension) < 0) {
alert("please select valid file type. The supported file types are .jpg , .png , .bmp");
return false;
}

Try using the extension selector like this:
if($('img[src $= "jpg"]')) // if extension is jpg then dosomething
dosomething;