How To Convert File To Base64 Format React Hook Component

hello everyone welcome to another video on this video i'm going to show you the how the image or any file can convert to the base64 format on the react applications there are many ways to do it you can also find many ways to do it in google but i'm going to using the uh promise on the file reader and i'm going to put that instead and i'm going to show you the image that is converted on base 64 on jxx so let's begin so i created the react applications using the scli here so here is my uh the files here so on this file basically it has the react tool set is my uh the folder and this folder i have a source and the source i have the app.js index.js in public i have index.html and this all file will created by our react cli if you guys don't know how to create a react cli then you can google it on react cli and once you google it here and once you go it here you can see this command and this command will allow you to create a react applications all right so this is the react applications here so i'll go back to the my file here so is the index.html is calling the root and the root is injected by the uh index.jss here and it's injected by this guy which i don't need this service worker i'm going to remove it and after that it will call the app here so app is basically right here and it will show me this uh the react spg is rotating here back there so what i'm going to do is i'm go i don't need anything here so i'm going to remove it and let's put a test here so now the test is here so let's begin with the tutorial which is converting a file to the base64 format so i'm going to create the input file input here and input type will be the file and basically that's it it's a file type so you will get a file input here now you can uh pick your image here i have a couple of image here and i'll just pick the belt and it will it will uh put it on my input file input type here right so uh i'll just go to the console because i want to see what's in spin imported so i'll go to app.js and it it doesn't do anything here so now i'll put my change event here on the change event i will bind the one of the my event which i'm gonna create it now so the event is going to be uh uh upload upload image i guess could be anything and i will put this uh the event here and even is coming from this input type and yeah it's going to complain it doesn't know what the upload image is so what i'm going to do is i'm going to put the upload image here and i'm going to oops this is going to be uh the the function here and i'm going to print this event here so let's see what's inside this event all right so now let's see so so now i'm going to close this and i'm going to click on choose files i'm going to import it so now it it's a function it's a event here the event is printing here even has a lot of function stuff and but we're not interested in that one we're interested on the event the target and we're getting a target e.target.files and files is the array so now we will get as every of the files so now if i pick this i pick this or maybe pick this one so now i will see your file list and filejs is array and the first one we will get that file here so this is a file information so we'll go back to the here and we will now get getting we know that what the file is so we'll get use this one event and we'll put this in a index of zero now i'm i know what's the file is file is right here so now i need to convert this file to base64 so i will con i'll create another function called base convert convert convert base 64 64. so now basics for need of file file to convert so now i will return the new i'll create a new promise prom promise and in the promise inside the promise we can add the resolve and reject parameter there is a two parameter that is a promise we return so if anything is success then it's return resolve if fail then we reject so i'm gonna create a file reader instance from file reader object act and not yeah and in the file reader there is a read as function read as data url so i'm gonna read this file right but i'm gonna read it when the file reader is on load after reading when the file liter reader is unload then it's gonna yeah it's going to give me the another callback functions here and in this callback function i'm going to do a resolve and on the resolve i'm going to put this file reader dot result it's going to give me a function called result so now it's reading the file when it's on load and successfully when it's successfully then it's it's already reading and it's going to return it all right when everything is loading then it's going to be done but but what happen if it's error right so if it's on error then then we're gonna return the error error and raise the reason for using a resect here all right reset so okay so this is done so now in you know i need to use this convert v64 and i'm going to send the file and it's a promise so i can use await and i i need to use async here and once i await now i can get in the base64 here format so now i can print this and i can see that i'm actually getting it or not all right so now let's upload the picture okay unload is not a function so i'm getting one issue here and it's fire radar on on load is not function let me check what is it let me check file on load on now if i it says the file on load is not function so looks like all right yeah unload is not functioning where i need to do a equal here see now it's converted back to the base64 format and i'm seeing the base64 format sorry for that the unload is now the function is basically it's uh looks like it's a property here and the property will return you the or the event and the event is right here file five results when it's unload and everything's loaded then it's gonna convert this and it's gonna add it on this one all right so i'm getting a base64 format which i'm printing right here this is a basic format image which i uploaded now let's put this image on on our zxs here so what i'm gonna do is i'm gonna give a new uh line here right new oops new line and on the new line let's uh write the image and the source and on this image let's give some height to make that the little not not too big of the image if this is big that's going to make really big but i don't want it really big here so i'm going to put here the uh b base base image it doesn't even matter what the name you provide here it's a space image so i don't have anything to bind with that so what i'm going to do is i'm going to create one state here so i'm going to create a use state functions and it's going to be a base image and base image is the initially will be or empty but it's going to change it after i upload this base64 so now now it's ready to test it okay uh used it is not defined because i need to import that from react all right so now it's ready to test it so now when i upload it if i pick this so now the image is right here so now if i pick this image is right if i check this image then this is a base64 for my right here so it's converted to base64 it's showing it right here which is a perfect what we need and that's all for this video guys i hope you guys like it and if you guys need more videos like this or any of these tutorials please do subscribe and thank you very much for watching bye for now

Channel: Sam Lama

Views: 39,454

Keywords: REACT, REACT JS, BASE 64

Id: qmr9NCYjueM

Length: 9min 49sec (589 seconds)

Published: Sun Jul 26 2020