We Keep Coding

How can i open a pdf from a

I was trying to open a pdf from buffer, I try with this code, but when the window open the pdf have the correct number of pages, but all are empty.
Im programin in ui5 and I get this file from ui5 class sap.ui.unified.FileUploader
Thanks in advance and greetings!
openPDF: function (file) {
if (file && window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
var raw = e.target.result;
const url = window.URL.createObjectURL(new Blob([raw], { type: 'application/pdf' }));
window.open(url, '_blank', 'fullscreen=yes');
};
reader.readAsText(file);
}
},

you are reading the file as text with the readAsText() method, the raw data will be a string, not a binary file.
To fix this, you need to change the readAsText() method to readAsArrayBuffer() method.
Here is the fixed version of your code:
openPDF: function (file) {
if (file && window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
var raw = e.target.result;
const url = window.URL.createObjectURL(new Blob([raw], { type: 'application/pdf' }));
window.open(url, '_blank', 'fullscreen=yes');
};
reader.readAsArrayBuffer(file);
}
},

How to set a FILE Name while downloading a file from FileReader?

I'm trying to download a file from a server using FileReader, when it downloads the file like download.zip, but I want to set some different file names here.
var newBlob = new Blob([blob], { type: blob.type })
var reader = new FileReader();
reader.onload = function(e){
window.location.href = reader.result ? reader.result.toString() : "";
}
reader.readAsDataURL(newBlob);

You can update the file name of what you want using the reader.fileName
var reader = new FileReader();
reader.fileName = file.name // file came from a input file element
reader.onload = function(readerEvt) {
console.log(readerEvt.target.fileName);
};

typescript angular 2 - creating own blob from input corrupts data

For learning purposes, I want to use the html input tag to select a jpeg image, retrieve the File Object, load it with fileReader and use the retrieved image string (base64) to create a new blob/file.
the service can upload the original file retrieved from the input just fine. However using my newFile the file get's corrupted and the file size somehow is larger.
I figure I'm doing something wrong with the blob constructor?
I'm using angular2 in typescript
<input type="file" (change)="onFileChanged($event)">
onFileChanged(event){
if (event.target.files && event.target.files[0]) {
let file = event.target.files[0];
let newFile;
let fr = new FileReader();
fr.onload = (event:any)=>{
let base64 = event.target.result
let img = base64.split(',')[1]
let blob = new Blob([window.atob(img)],{type:'image/jpeg'})
newFile = this.blobToFile(blob,'test')
}
fr.readAsDataURL(file)
console.log(file)
console.log(newFile)
this.service.upload(newFile).subscribe()
}
}
blobToFile(blob: Blob, fileName: string): File {
let b: any = blob;
b.lastModified = moment.now();
b.lastModifiedDate = new Date();
b.name = fileName;
b.webkitRelativePath="";
return <File>blob
}
EDIT------------
After finding out that fileReader is asynchronous, i've adjusted it a little bit and indeed the problem is with the blob constructor.
loggin the both the target.result of original file and new one revealed that the base64 as been transmuted. Any ideas why?
if (event.target.files && event.target.files[0]) {
let file = event.target.files[0];
let base64: string = null;
if (/^image\//.test(file.type)) {
let reader = new FileReader();
reader.onload = (e: any) => {
console.log(e.target)
base64 = e.target.result
let img = base64.split(',')[1];
let blob = new Blob([img], { type: 'image/jpeg' })
console.log(blob);
let fr = new FileReader()
fr.onload = (event: any) => {
console.log(event.target)
}
fr.readAsDataURL(blob)
}
reader.readAsDataURL(file);
}

Modify your function like this. Because FileReader is asynchronous, to process the result, you need to do it inside the onload callback, but here, you are uploading the file outside of onload which at that point, is undefined or whatever initial value it contains.
onFileChanged(event){
if (event.target.files && event.target.files[0]) {
let file = event.target.files[0];
let newFile;
let fr = new FileReader();
fr.onload = (event:any)=>{
let base64 = event.target.result
let img = base64.split(',')[1]
let blob = new Blob([window.atob(img)],{type:'image/jpeg'})
newFile = this.blobToFile(blob,'test')
this.service.upload(newFile).subscribe()
}
fr.readAsDataURL(file)
console.log(file)
console.log(newFile) // Either prints undefined or whatever initial value it contains
}
}

I am suspecting your code:
onFileChanged(event){
if (event.target.files && event.target.files[0]) {
let file = event.target.files[0];
let newFile;
let fr = new FileReader();
fr.onload = (event:any)=>{
let base64 = event.target.result
let img = base64.split(',')[1]
let blob = new Blob([window.atob(img)],{type:'image/jpeg'})
newFile = this.blobToFile(blob,'test')
}
fr.readAsDataURL(file)
console.log(file)
console.log(newFile)
this.service.upload(newFile).subscribe()
}
}
onFileChanged(event) and (event:any), these two 'event' mean different objects. event in onFileChanged is the event object of onFileChanged. event in fr.onload is the event object of FileReader.onload. Don't you think it is confusing and might cause cross reference?

Filereader JS API not reading files properly

I have written the following code to read text from any csv or text file. However it sometimes reads successfully and stores in the variable and sometimes doesn't. Is there something missing in my code.
groupCsvData = [];
$('#add-group-upload').change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var text = reader.result;
groupCsvData = [text];
};
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));