i have a file a image/png file i need to read it with the FileReader api and then make a file or blob from the text the problem here is when i try to make a file the data seems to be corrupted i tried to read the data as text after reading the file as dataURL and there is difference i need a way to make the text from the FileReader.readAsText match the one from decoded dataURL by atob
let inp = document.querySelector("input")
async function read(file,type) {
let reader = new FileReader
reader[type](file)
return new Promise((res) => {
reader.addEventListener("load",_ => {
res(reader.result)
})
})
}
function decodeDataUrl(dataurl) {
return atob(dataurl.split(',')[1])
}
inp.addEventListener("input",async _ => {
let [file] = inp.files
let dataURL = await read(file,"readAsDataURL")
let text = decodeDataUrl(dataURL)
console.log({text,length: text.length});
text = await read(file,"readAsText")
console.log({text,length: text.length});
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file">
</body>
</html>and here is a screenshot after testing the code with file
notes:
- i don't want any library or framework for that so no jquery
- don't present another way for dealing with files or blob best than that i know i can use another ways to manage files data better than read it as text by
FileReader.readAsTextbut i don't have control over this point - don't mind my bad english
Answer 1 - using
readFileAsTextwhere bytes from the file are inserted in
binaryStringas 8 bit character codes.binaryStringcan be converted to a base64 encoded string usingAnswer 2 - using
formDataThis is best covered in formData method examples on MDN:
Using
formData.setTo upload multiple files using the same named form field, use the
formData.appendmethod instead.