What is Base64 ? How to Prepare file Upload with Base64 in Javascript Using Laravel and Vuejs

hello and welcome in this video we are going to learn how we can prepare our file for uploading you know when we select the profile image it should use Ajax request to upload our file so there are different approach for doing this one if you have already used PHP you know you can just give the form as a file type like a multi type form the form data like that and then you submit it it will say in the file and then you can take it and the server upload it doing something like that but we are not using PHP so we are using view J's and JavaScript how would you do that that here I I'm going to use base64 if you don't know about base64 it is basically if you just touch it around or just go to stock or flood they have already good answer here but I will tell you a little bit easier then maybe I'll make it a little shorter base64 is type of encoding basically if when you are selecting an image we change the image to a string and then we send a string to the server in the server we take the listing and then we convert that to an image basically like that so how you convert it the checks that that you are converting that takes is called base64 encoding that's that much easy why we use that one bit 64 is very popular like when you are transferring data instead of changing it to binary and they say that if you transfer it to the binary there will be the they will cause problem when you send a protocol something like that but it is going to be six the food is easy because it is an a string and you can send it to the server like any other text type and in the server you can take that and change it to image and then save it somewhere so that is basically how we are going to drink this one so if you don't know if you just touch how this 64 is going to work so here is a very good answer here that got a lot of routing here I show you the examples here so that you should search around and understand what is going on behind the scene that's why otherwise I was just going right kidding it would be fine I know the purpose is to learn stuff not just to create it so that's why I just wanna show you different approach here so I'm going to use the third approach which is easy and it is very short as well so I will just modify it a little bit for ourself so if I come here this is our affliction when we select a file selecting here I have prepared a few profile picture from here I can select any of them when I select it yeah this file is selected but after the selection what I am going to do is I am going to fight an event so let's write the event if I come to my coding here going to resource up Jes then component here is the profile and I'll close it for now the sidebar if I come all the way down you know this is where we select the file here is the file so what I can do is I can just right at change it means on change I can just call a function let me just give it a name like update profile something like that no this is the function so it will call this function let's see how this function is going to work I will come here we have mounted we don't have methods so I will come in here and write methods it is going to be containing all our method so I will write the method we have here this is going to call this function I will pass a parameter here like and like a file anything you can write because we are dealing with file I can just give it a name of file by file I mean event like when you fire an event this is going to be an e most people rated e like even or anything you you can put is better because this is going to be an event so now this event you can do is this just cancel the law for for a while if I write console dot lock uploading to make sure that our event is working I will save the file and if I come here wait for the compile yeah if a harder load and see if this is going to cancel the locks with it shot it should fire our event I will go to the console page here this error because of its low network connection that's why it is showing so this is not related to our afflictions if you see this error this is because of the Chrome so let's see if this is going to work if I click on this let's pick something yeah uploading you know the function is going to fire so what I'm going to do is instead of considering the lock here I will just comment it for now I will grab the file the file that we are uploading so how you grab the file you know there is evey pass the event so when you pass the e E is going to contain a like the file we are uploading to see if I come to a stock or flow they are using they are passing an E or element like that and in the say file get to e so this is how you are going to check the first order this is going to be an array and take the first file so for us since we are going to use es6 I will say late and now as a file is equal to now e dot what was the name of the function that we are going to use the name of the array it is going to be files so this is going to be files for us too now we have the file and we store that in the file very well here so they also give it as file and then what you can do is you can convert it using the file reader using the file girl you can convert it to a base64 here is the function for the file leader you just say reader dot read as data URL and then you pass your file this is going to work like that so let's see how we are going to do this one for us so if I copy this one for now I will come here paste it here I will just make it for ourselves you know we have a variable instead of the war we can say just lit because we are we using is six both of them are fine for now so this is the reader it is going to be enabling a sense of file reader and we say the reader on load unloaded or if if it loaded like we expected and it should like this is going to just console that lock the file we have this is basically doing like that it isn't doing nothing than that if you can completely remove this one because this is optional the important part is this part the reader read as data URL and you pass your file so I think everything is fine for now if I save it they have written on load end both are correct like you can say on load as well unload end I think both of them are going to work so if I come to browser this time if i refresh it let's see if it is going to output the file for us you know on changes we say that dude is stuff so let's see if it is going to control the lock the file we have if I pick a file let's we select this one oops it is going to give us and undefined type of 0 so let's see what is wrong with this one if I come to the code here so we have our file and it's going to open the other than error so we say e dot file it should be e dot target dot file something like this it is going to check this the the array or this root of the number one on you know the 0 that is going to start from 0 this is going to take the first file from the one we uploaded so this should work this time you know if I go to example here this is just element dot file I think this is not going to work maybe nobody said about this one so if I save it this time we come here yeah compile we refresh it so you know that if it work it is going to say result and then it is going to display the result of our four while in the console if I pick this image now ah you can see this is the string this is base64 string result is going to be this one basically like that no it is not too much text like this is a bit text like any content like you can put it an available and then you can send it to the server in the server you are going to change it back to an image and then save it this is very easy like an AJAX request is going to work like that maybe there are some other options too the good thing is like you can detect the file size the file type you know all of them are equal here but again there are some other way you can do this one of course I will show you how you can show the foil soil and some other stuff so let me show you now if I come here you know we just see to split the result so what if I say cancel that lock let's say file yeah our foil or no we just cancel the lock our readers URL console oops I am very bad in English to a console dot log we put the whole function here to console dot log this one and if I save it this time we will come in this part it is not going to do anything so if I save it this this is very helpful when you want to change something for example if someone click on the getting the file you want to change your the profile picture instantly something like that this is handful like helpful otherwise you don't need to do this one for now we just put it like this if i refresh the page this time let's see what are going to displayed on the console window if I pick this oops undefined what is undefined this time we pick the file name yeah everything is fine and this it is undefined so if I check out the code we should not yeah we should not consume the luggage let it be like this now what we can do is you can control the lock the foil very well we have here if I console dot log file I just want to show you the things that we have accessed like the file type the file name the file size all of those things I mean when you are when a user upload the file instantly you can see if they have uploaded more than two megabytes you can alert them like you have more than two megabytes of foil please try something else something like that so if i refresh this time yeah we don't get any error this time because we have maybe a good internet connection so if I pick a file from here let's say this boy here we cancel the lock the file this file now contained the name this is going to be an object the name is this one the name and last modified is going to be the date and everything you have seen here this yet here is the size it is going to display in mega not in megabyte this boy I think something like that yeah and plus it is going to be type of P image PNG yeah these are the things you have access like even the last mod if I did all of those things are returned here so this is very handy for you know what you are going to do is instead of considering the lock we do need to this one of course we will discuss about how we can detect the file size later for now what we can do is we can assign the file to the photo here so when when we submit the form it is going to send the photo in the server and in the next video we will learn how we can convert it back to an image so let's do find a lot of it finalize it yeah oops we don't do this one you know this is the function here what you can do is you can do it like this this is going to be the es6 version so yes it is going to be equal to this one this is a lot easy you can pass the e or no not e Melissa is going to be fine something like this so here what we can do is you can say there's that photo it should refer to this photo from here so let's see if it worked because we are writing this inside another function here so this is going to be reader dot result let's see if it works because we are just doing it if I save it for now if I come to the view to the profile we check the profile component opening the form here is the photo here which is by default if I select an on any image let's see if I change oh sweet it didn't change anything so if I even if I reload this one opening the forum no it didn't change it because we do not have access to this inside the function what I'm going to do is you need this keyboard is written here so we do not have access I will sell it VM anything just see a random text here it's a variable like VM is equal to this and now instead of this one oh maybe we have access to this it should be this dot forum that photo because this is inside the form object since we are using the es6 it should be able to refer to that this if i refresh this time let's see if it worked otherwise we should do the old way like we should assign this to another word about and use it if I pick the image from here let's go to profile opening the forum yeah at work the photo is going to be equal to this thing we have now this is a longest thing but when we send it to the server we can change it back to simple like image for now you know we just convert it to a base64 and this is how you can convert it to text now this is the text but this is readable this is convertible this is flexible everything unit so in the next video we will learn how we can send it to the server and check it and cannot to image and save it in database so I hope it has been informative for you if you have any question feel free to us below the video and thank you for watching

Channel: Code Inspire

Views: 21,295

Keywords: JWT with Laravel, tutorial, coding, laravel, laravel and vue js tutorial, laravel and vuejs, laravel and vue js project, laravel admin panel, laravel adminlte, laravel admin, vue js tutorial, vue js, axios, laravel application development, learn laravel 5.6, learn laravel framework, laravel crud, laravel crud tutorial, spa, laravel how to, laravel tips, coding tips, admin lte laravel 5.6, adminlte with php, laravel api, laravel passport, hosting, cloud, web hosting

Id: ikQbjRcV9W0

Length: 15min 28sec (928 seconds)

Published: Tue Sep 11 2018