document.getElementById("uploadExcel").addEventListener("click", function () {
$("#uploadExcel").attr('disabled', true);
$('#loader').show();
if (selectedFile) {
var fileReader = new FileReader();
alert("2");
fileReader.onload = function (event) {
alert(event);
var data = event.target.result;
alert("3");
var workbook = XLSX.read(data, {
type: "binary", cellDates: true, dateNF: 'mm/dd/yyyy;#'
});
alert("4");
workbook.SheetNames.forEach(sheet => {
alert("5");
let rowObject = XLSX.utils.sheet_to_row_object_array(
workbook.Sheets[sheet]
);
let jsonObject = JSON.stringify(rowObject);
alert("Get Data");
getData(jsonObject);
//document.getElementById("jsonData").innerHTML = jsonObject;
});
};
alert("6");
fileReader.readAsBinaryString(selectedFile);
} else {
alert("error");
}
});
Now let me explain what is happening:
The page loads and I select the file to upload, it goes through even if it has excel errors, it will take the file and read it, convert it and throw errors.
So then I change that excel file to be error-free and try to click the upload button again, but this time the code enters the above function, and it won't go past fileReader.onload = function (event) it alerts "2" and then stops working.
Can you please tell me why is this happening and how to avoid this without a page reload, because if I do a page reload everything works as expected.
Thanks
I upload a video (100MB) through the following code:
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
// get file content
var myFile = e.target.result;
var data = {
'data':myFile,
'nome':name_list[i],
'tipo_campanha':tipo_campanha,
'tipo':type_list[i],
'date':date_list[i]
};
$scope.campanha_id = 49;
$http.post(api_url + 'campanha/' + $scope.campanha_id + '/arquivo',data).then(
function successCallback(response) {
if(length==document.getElementById('filedata').files.length){
alert('Upload Done');
$('#loader').hide();
$('#arquivo-submit').show();
$state.go('home');
}
},
function errorCallback(response) {
alert('Error');
$('#loader').hide();
$('#arquivo-submit').show();
console.log(response);
}
);
}
When i upload the file on Chrome, i receive the "Aw, Snap!" page. When i upload on Firefox, it works perfectly.
Informations:
The request(POST) appears on the Network(inspect) but the server does not receive it
Smallest videos work on chrome
Questions:
Is it a bug on Chrome?
How do i fix it?
I tried to write a bit of code to retrieve an image file (from Wikimedia Commons), store it locally and then display it. Here my code:
<!DOCTYPE html>
<html>
<head>
<script>
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
function onError(e) {
console.log('Error', e);
}
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://upload.wikimedia.org/wikipedia/fr/2/26/10_francs_Mathieu_1987_F365-28_revers.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
window.requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) {alert(fs.root.name);}, onError);
window.requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) {
fs.root.getFile('image.jpg', {create: true}, function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.onwrite = function(e) {};
writer.onerror = function(e) {};
var blob = new Blob([xhr.response], {type: 'image/jpeg'});
writer.write(blob);
}, onError);
}, onError);
}, onError);
window.requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) {
fs.root.getFile('image.jpg', {create: false}, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(event) {
var img = document.createElement("img");
img.src = event.target.result;
document.body.parentNode.insertBefore(img, document.body.nextSibling);
};
reader.readAsDataURL(file);
}, onError);
}, onError);
}, onError);
};
xhr.send();
</script>
</head>
<body>
</body>
</html>
Nothing is displayed. Chrome's console doesn't display any error message, so I have no idea why it's not working. Any clue?
Edit :
I have just seen I actually get a FileError, code 10, which means QUOTA_EXCEEDED_ERR, even if I start my Google Chrome with these parameters:
"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --unlimited-quota-for-files
Actually, I get the same error with or without the --unlimited-quota-for-files parameter, which is weird. But I get a File Error 2 without --allow-file-access-from-files
In answer to your questions about why launching with "--unlimited-quota-for-files" won't work, I think you're confusing two different things. That parameter simply removed the quota limit, it does not automatically pre-approve scripts to usurp space in the sandbox without permission. If you were using "temporary" file system request, then it would allocate it without prompt (see link at the end of my answer).
But as you experienced by needing to call the requestQuota() method, Chrome will not allow the allocation of persistent file system storage without explicit user permission. There are a few reasons for this, but security as the best: namely that if Chrome were to allocate persistent file system storage on demand (without user knowledge) to any script that asked for it, then a malicious script could quick easily fill a user's hard drive, crash Chrome memory due to many thousands of objects, and cause general mayhem. Such a vulnerability could also trigger buffer overflows by hammering the memory like that.
Bottom line: Chrome only allows persistent file system storage with user approval. More from Google: Managing HTML5 Offline Storage:Persistent storage
If anyone stumbles across this the --unlimited-quota-for-files is no longer a valid flag. However, there is a list of current chromium flags maintained here.
--unlimited-storage would be the new flag to run, I believe.
Overrides per-origin quota settings to unlimited storage for any apps/origins. This should be used only for testing purpose.
I think you had to update to the quota request because the flag didn't override anything (but I don't actually know when the flag itself was deprecated). Because it didn't work as it previously did (assuming your code either worked before, or you got it from a tutorial) I think the browser fell-back on the quota system when the overide didn't happen and saw the quota was exceeded with what you were doing, thus throwing the exception.
You got the File Error without the --allow-file-access-from-files because it'd be a security issue if the browser was allowed to access those files under normal operation, hence the File Error should've been of type SECURITY_ERR.
The information in the following link is old, but the tactic is similar to the code in question(the flag being --unlimited-storage now instead).See this article for more details.
All said, In an actual application the Quota request is a must and the OP's solution at the time of this writing contained the correct code. Currently the javascript for the quota and fs request would look as follows:
navigator.webkitPersistentStorage.requestQuota(1024*1024, function(mB){
window.requestFileSystem(PERSISTENT, mB, function(fs){
//fs write/read, ect. code goes here. Or set a global variable to the value fs
globalFS = fs; //to be accessed later in code, so you don't have to keep requesting.
}, onError);
}, onError);
I added a call to window.webkitStorageInfo.requestQuota, and now it works. I can't get why it is necessary, as I started Chrome with the --unlimited-quota-for-files option.
Here the working code:
<!DOCTYPE html>
<html>
<head>
<script>
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
function onError(e) {
console.log('Error', e);
}
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://upload.wikimedia.org/wikipedia/fr/2/26/10_francs_Mathieu_1987_F365-28_revers.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) {
fs.root.getFile('image.jpg', {create: true}, function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.onwrite = function(e) {};
writer.onerror = function(e) {};
var blob = new Blob([xhr.response], {type: 'image/jpeg'});
writer.write(blob);
}, function(e) {
console.log('Error', e);
});
}, function(e) {
console.log('Error', e);
});
}, function(e) {
console.log('Error', e);
});
}, function(e) {
console.log('Error', e);
});
window.requestFileSystem(PERSISTENT, 1024 * 1024, function(fs) {
fs.root.getFile('image.jpg', {create: false}, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(event) {
var img = document.createElement("img");
img.src = event.target.result;
document.body.parentNode.insertBefore(img, document.body.nextSibling);
};
reader.readAsDataURL(file);
}, function(e) {
console.log('Error', e);
});
}, function(e) {
console.log('Error', e);
});
}, function(e) {
console.log('Error', e);
});
};
xhr.send();
</script>
</head>
<body>
</body>
</html>
this is frustrating. I've been running this code in Safari, Firefox and Chrome - all latest versions - and it doesn't work. Is it working for anyone else? I'm getting my file reference from <input type='file' id='file' name='file'>
console.log("Have now created a new file reader and it looks like this..." + reader);
reader.onload = function() {
var contents = event.target.result;
console.log("File contents: " + contents );
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsText(file);
}, false);
What am i doing wrong?
Thanks,
J.Wells
What am i doing wrong?
You seem to have forgotten the event parameter of the onload handler. Instead of using event.target, you also might just use reader.
Also, in the fiddle you are creating the FileReader in a very odd way. You might want to read the introduction Using files from web applications at MDN.
document.getElementById("file").addEventListener("change", function(e) {
var file = e.target.files[0],
reader = new FileReader();
console.log("Have now created a new file reader and it looks like this..." + reader);
reader.onload = function(event) {
// ^^^^^
var contents = event.target.result;
console.log("File contents: " + contents );
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsText(file);
}, false);
I'm currently working on finding out what PhoneGap can/can't do in iPhone app development. So far I have managed to write a file to the LocalFileSystem using FileWriter and on the click of a button reads the file back to the user. I have been asked to find a way to set the app so when the app writes a file, the file is saved to a folder/location specified by the user. I've been looking, but I can't find any information to do with this. Is it even possible to do so? And if so, can you please help me?
(I am using JavaScript, HTML and PhoneGap in Xcode for this app)
Here's the code I used to write/read the file using the LocalFileSystem;
var reader;
var text;
var myFileSystem;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function myfile() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotmyFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail);
myFileSystem = fileSystem;
console.log(fileSystem.name);
}
function gotmyFS(fileSystem) {
fileSystem.root.getFile("readme2.txt", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
fileEntry.file(gotFile, fail);
}
function gotFileWriter(writer) {
writer.write("some sample text");
}
function gotFile(file){
readAsText(file);
}
function readDataUrl(file) {
reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as data URL");
console.log(evt.target.result);
};
reader.readAsDataURL(file);
}
function readAsText(file) {
reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as text");
console.log(evt.target.result);
console.log(file);
text = evt.target.result;
};
reader.readAsText(file);
}
function readmyfile() {
var myPara = document.getElementById("mytext");
myPara.innerText = text;
}
function fail(error) {
console.log(error.code);
}
This all works, but is there something i should add/remove to make it work?
Thanks a lot in advance xx
iOS apps are sandboxed and you can write only to specific directories. more details here.