We Keep Coding

uploading files in js

i'm using below method to upload files to laravel backend
setFile(id, e) {
let self = this;
let reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = function () {
console.log(reader.result);
self.documentArray.forEach(function (element) {
if (id == element.id && reader.result) {
element.file = reader.result;
element.file_browse_name = e.target.files[0].name;
}
});
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
},
but when i select a file larger than 5mb or around, it doesn't add the element to the relevant object of the documentArray but it logs the result in console, so i cant add validation on backend. please give me a way to solve this problem

Maybe the problem is with your PHP settings. Check your upload_max_filesize and your post_max_size

Javascript Downloading and reading file contents from Dropbox

I am trying to download a file I uploaded as test to Dropbox. The download function works and I am getting the fileblob as well but having trouble to actually read the file contents
function downloadFile() {
dbx.filesDownload({path: '/_bk_test/test3.json'})
.then(function(response) {
var blob = response.fileBlob;
var reader = new FileReader();
reader.addEventListener("loadend", function() {
console.log(reader.result); // will print out file content
});
reader.readAsText(blob);
})
.catch(function(error) {
console.error(error);
});
}
But I am getting this error as output
Promise {<pending>}
VM215:11 TypeError: reader.addEventListener is not a function
at <anonymous>:5:24
This is strange.
But if I store the response.fileBlob in a global variable and then use the reader function, it wont show the TypeError. But I still cant read the file contents.
Either way, these are the issues
1. In a function the FileReader is throwing an exception.
2. Outside the function, the FileReader is not showing the file contents.
PS - Testing in Cordova

Alright, Cordova has a different API
function downloadFile() {
dbx.filesDownload({path: '/_bk_test/test3.json'})
.then(function(response) {
var blob = response.fileBlob;
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("read success");
console.log(evt.target.result);
};
reader.readAsText(blob);
})
.catch(function(error) {
console.error(error);
});
}

JS convert PDF to base64 in local path

my project have this foldes:
-html
index.html
-css
-js
my.js
-pdf
test.pdf
I need to convert this "test.pdf" to base 64 and send by POST
I try use a function like this:
function getBase64() {
var reader = new FileReader();
var file = new File("/pdf/test.pdf","r");
reader.addEventListener("loadend", function() {
// reader.result contains the contents of blob as a typed array
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
return reader.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
});
But I'm not the correct way to get past the folder path, or if I have to use another object and not File.
var file = new File("/pdf/test.pdf","r");
What's the best way to do it?
Thank you!

FileReader not reading file properly

I ran the following function with a valid file object but it didn't work. The read text was an empty string. However, when I run the same commands via the console, it does work.
function(file) {
console.log(file)
var reader = new FileReader();
reader.readAsText(file);
console.log(reader.readyState);
console.log(reader.result);
}
Why?

I needed to set a callback for when the reader finishes reading the file, as this is done asynchronously.
function(file) {
console.log(file)
var reader = new FileReader();
reader.onload = function() {
console.log(reader.readyState);
console.log(reader.result);
}
reader.readAsText(file);
}

Using Javascript FileReader with huge files

I have a problem using the Javascript FileRead trying to read huge files.
For example, I have a text file of 200mb and everytime I read this file the code stops working.
Its possible to read the text file, but for example ONLY the first 10 lines or stop reading after 10mb?
This is my code:
var file = form.getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
data = e.target.result;
form.displayedData=data;
};
})(file);
reader.readAsText(file);
The e.target.result always has the whole data of the file.
What can I do here?
Thx

This will only read the first 10 mb:
var file = form.getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
form.displayedData = data;
};
reader.readAsText(file.slice(0, 10 * 1024 * 1024));