I have a blob variable which represents an audio file. When this code is executed, a valid data url string is logged into console, but it is very small and works only in chrome, the browser probably stores it somewhere. Is it possible to convert it into a data url string that contains all the audio data? Also, everything works properly on other machines.
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
base64data = reader.result;
console.log( base64data );
}
Thanks.
Related
I want to extract the bytecode from an file I select (pdf) to save it in my database. But I am always getting the error that my byte is undefined. Could someone look at my code and tell me what is wrong with it?
I tried to use the FileReader but my byte returns undefined, the formdata works fine it shows on the console every information I need for the file.
EDIT:
uploadFile2(files: FileList | null): void {
const file = files.item(0)
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
this.documentsArray.push({documentType: this.form.controls.dokumentType.value, file: reader.result})
console.log(this.documentsArray)
}
}
Hi I edited my code and now I am getting a base64 I think, but one question, it starts like this:
data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KM......."
is the start with data:application/pdf correct or do I have to change something to save it in the database
I'd suggest you to store the file as a base64 String in your database.
This would look as following. With the line number 2 you're fetching the file from your input event.
const reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onload = (event) => {
if (reader.result) {
//save pdf base64 into database
}
I have been trying to convert an image file from my local machine but it seems not working for me.
I don't want to upload the image using an input because I'm only having the image path in production and i want to store the base64 string. but if there is a better way i can handle this then i don't mind
const reader = new FileReader();
const file = new File([imgUrl], { type: "image/png" });
console.log(file);
reader.addEventListener("load", function (e) {
console.log(e.currentTarget.result);
}, false);
const data = reader.readAsDataURL(file);
return data;
}
const img = "localhost:8080/start app abnner.png"; // my image path
getDataUrl(img);
The key is to use the result property of your object (see FileReader API.)
const reader = new FileReader()
reader.readAsDataURL(image) // assuming "image" is your file
reader.result // here is your base64 string
So in your case, it should be:
const data = reader.readAsDataURL(file);
return data.result;
I had to do something like this once, so I made a little plugin if you want: encode-image-uri. It has the advantage of using promises, so you’re 100% sure that you’re calling any function only when the conversion is done and your data is ready.
I'm trying to get the base64 content from a local audio on my device using javascript.
I'm using the following code:
var file = new File(["file_name.mp4"], "/data/user/files/VoiceRecordingPluginData/file_name.mp4");
var reader = new FileReader();
// Read file content on file loaded event
reader.onloadend = function (event) {
console.log(reader.result);
};
// Convert data to base64
reader.readAsDataURL(file);
As result, "file" gets populated like this:
file.name: ["file_name.mp4"]
file.localURL: "/data/user/files/VoiceRecordingPluginData/file_name.mp4"
Once "onloaded" is reached, "reader.result" is empty.
Any hints on what's wrong in my code?
I need to use PDF.js local, without a webserver. Just need to display a PDF which is in the same directory. Found this link here and also read in the FAQ that you can pass a Uint8 Array to PDF.js. I'm using filereader() to read the file. But I'm getting "Invalid PDF structure" error message. The PDF is ok - I've uploaded the whole thing to a webserver for testing. When opening the PDF with viewer.html online its working. What am I missing?
This is my code so far:
var file = new File(["compressed.tracemonkey-pldi-09.pdf"], "compressed.tracemonkey-pldi-09.pdf", {type: 'application/pdf'});
var fileReader = new FileReader();
fileReader.onload = function() {
var typedarray = new Uint8Array(fileReader.result);
pdfjsLib.getDocument(typedarray).then(function(pdf) {
//do something
});
};
fileReader.readAsArrayBuffer(file);
I am currently rendering innerHtml to blob in my Angular controller like this:
var blob = new Blob([document.getElementById('exportable').innerHTML]);
What I need to know is if there is a way to convert the resulting Blob to a base64 jpeg?
I tried this:
var reader = new window.FileReader();
reader.readAsDataURL(blob);
var base64data = reader.result;
base64data = base64data.replace('data:;base64,', 'data:image/png;base64,/9j/')
but when I tried to use the result (base64data) I received an error in my Angular controller "Invalid JPEG".
ANY assistance is greatly appreciated!