How to get bytecode from selected pdf in angular - javascript

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
}

Related

How to transfer a Base64 string from vanilla Javascript to node Js

I have some code(vanilla Javascript) that allows me to generate a Base64 string from an image and it works. I have to bring this string to node js and then store it in a MongoDB database. The problem is that once the fetch is done the string is undefined. What can I do?
Base64 encoder
var logoUri;
const file = logo.files[0];
if(file.size<=2e+6){
const reader = new FileReader
reader.addEventListener('load', ()=>{
// console.log(reader.result)
logoUri=reader.result
console.log(logoUri) // the console log works
//then i fetch (post) this logoUri
})
reader.readAsDataURL(file)

FileReader Image to Base64 Corrupted Conversion

I am trying to convert an Image from my local files to Base64 by JavaSctipt.
For example please look at THIS website.
When I browse a picture on the input beneath Local File* heading (input having id #form-base64-converter-encode-image-file) and then run this code in the console of the browser -
function getBase64(file) {
var reader = new window.FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
alert(reader.result);
};
reader.onerror = function (error) {
alert('Error: ', error);
};
}
var file = window.document.querySelector('#form-base64-converter-encode-image-file').files[0];
getBase64(file);
The script give me a long string which is supposed to be conversion of image in Base64. But when I assign the string in the source of an Image the image won't show up. The string is corrupted or not a proper conversion of Base64. Please somebody explain what I need to do for a proper Base64 string which I can then assign in src attribute of an < image >
Thank you.

How to create a base64-encoded string from a local file image in javascript

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.

Get base64 content from local mp3/mp4

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?

Convert image to base64 in Angular 2

I am trying to display image while editing imformation but could not do it. I am getting below response from server.
ÿØÿàJFIFÿÛC
%# , #&')*)-0-(0%()(ÿÛC
I want to convert this response into Base64 so that I can handle but dont know how to convert it.
Can anyone tell me how to do this?
I am trying to do this but does not work..
response => {
console.log('Media',response)
let base64Data: string;
let reader = new FileReader();
reader.readAsDataURL(response);
reader.onloadend = () => {
base64Data = reader.result;
this.previewURL = this.sanitizer.bypassSecurityTrustUrl(base64Data);
};
You seem to be doing the right thing in the code you posted. May be the data you are getting from the server is corrupted.
For assistance you can check the sample working fiddle here that I created for you.
You can replace the base64Data with your own data in the fiddle and try to verify it.

Categories

Resources