Laravel 10 Multiple Image upload by Drag and drop using Dropzone in Laravel from Scratch Dropzone JS

hey guys welcome back so guys in this video we are going to learn about how to upload images by drag and drop using the Drop Zone plug-in okay so now guys let's get started so guys let's move to our editor and begin with the creating migration file so basically we are going to take an example of galleries so let me open a new terminal and let's Zoom it so guys let's create a migration file PHP artisan make colon migration where create galleries _ table okay hit enter so here our migration file is created now you can go inside our database migration and you'll find the galleries migration file so now guys let's add all the column fields we are going to add only one column which will be image okay that's it and now guys let us migrate this into our database just hit this command PHP artisan migrate hit enter so you find that our table is migrated let me just show you inside my database so if here is our database okay and here we find our galleries table so galleries click on it perfect so now guys let's get back to our editor and create the gallery model so PHP artisan make colon model where Gallery hit enter and now your model is also created let's go insert app model and gallery. PHP cool so now guys let's connect with the table protected and dollar table property inside single codes paste your table name let's copy from the migration file or you can copy from the database okay no issues and now guys whatever your fields are there you can add that inside this fiable property so I have only one field that is image we are done with the model and now let's create One controller so PHP Artis make colon controller Gallery controller hit enter Gallery controller is created and now you can find that inside app HTTP controller with Gallery controller perfect so guys let's close this model and migration files and let's go to our routes web.php and add the top I'm going to create a route colon colon get method where I will tell Galleries and then go to the controller so which is the controller we have created Gallery controller so let's copy this namespace path first then give back slash and then your gallery controller name then colon colon class to call the Galler class and then mention your function name so here let's create one index function to list all the images so for that let's go to our controller again create a public function public function function name index and open and close CBR and here you can view the blade file so let's tell a gallery folder and insert that index blade file so now guys you can create a folder inside our resource views where create a new folder a gallery and then inside this Gallery create a index. blade. PHP file so now guys let's extend our layout so you can use many ways of extending layouts layouts do app front and at section which is going to be content and end the section so let me just show you my extending of the format here so here you see guys uh let me just close it and here is my extended layout which I have created so here is one bootstrap CDN link and JS bundle JS bootstrap CDN link and one jQuery CDN link okay so make sure these three CDN links are available so we can work on it okay and now guys I'm accessing this content in this index blade file done so let me close that apply out and now guys let's begin with the container design which is bootstrap class so margin top five and row column md12 a card designed with the card header where you can mention in a H4 tag as a gallery lists and a simple a tag for upload images okay let's design this button button primary float to end and let's create a route here like um Gallery slash upload okay so now guys make sure you're calling the same URL here like you have used this Gallery right so same thing I'm going to copy and create as upload here and which goes to a create function so right now we have not created so let's go back to our IND X blade and continue the design here and will be our card body okay so here we'll be listing our images so before that let's see the output of it so let's go to our web brow and copy the URL guys first let's move and give forward SL Gallery cool so here you see Gallery list and done so now guys if you click on it here upload images it goes to some URL okay so here you see that it goes to Gallery / upload and here we are getting a warning because we have not created the controller so let us fix that so here we have access the URL but it's going to a create method on this Gallery controller Let's see we don't have a function so let's create the function public function function name create open and close CES return and view the blade file using view function and then go to a path gallery and create blade file so guys let's create one create blade file inside that Gallery folder go to Resource views and your gallery folder inside that Gallery folder create a file create. blade. PHP all set so now guys let us copy this complete code and paste inside the create blade okay and here you can mention upload single or multiple images and this pattern would be like going back so change the button design to danger and mention as back so it will return back to that galleries View and here our form starts so before that let us see the output refresh cool so upload single or multiple images now go back so you'll be on this Gallery page correct so now guys let's begin with the main concept of image upload using drag and drop that is DropZone plugin so guys there is um Drop Zone documentation you can use this for more detail but I have written a simple blog so you can utilize that also okay so here for drag and drop image file upload using Drop Zone in LL and here is the CDN link guys which is has CSS and GSD link there are two versions one is version five and one is seven so let us go with the latest part copy the CSS and script links and let's move back so guys now let's move to the extended layout and paste there so let's go to that layout so I'm pasting the so here let us keep the CSS inside the head tag and the script inside the body tag at the end okay so our DropZone linking is done and now you can get back to create blade file and continue so now let's move below and let me copy this completely and paste below and we explain you okay so here we have added one label that drag and drop multiple images and which is accepting this four file types and also guys I have added a form tag so which is starting the form going to an action and then going to a method post and one ENC type a simple Le class that is Drop Zone which is going and checking inside our CDN link of Drop Zone CSS so let me just show you so it will just find all the details inside this okay so it will correctly manage that and here our form ends and it has one ID guys so what we are doing this ID I will just explain you about it so before that let us see the output so what is the difference of this so now you can get back refresh cool so here you see guys we have got one drop your files here to upload okay so now guys let us get back to our post so guys let's scroll below and copy the script part so guys here is our script so let me just select all and right click copy and now get back to our editor and now guys let's move below after this end section we have to create a new section which will be linking with the script so just call here scripts and end the section and now guys inside this you have to paste your script code okay so guys uh make sure your section is correctly yield in your extended layout so let me just show you here so I have extended this app front let's go there and here is the yield part right so this same spelling you have to copy it and use it inside this section now guys all the script whatever you have written here it will come after this CDN link of DropZone okay so now guys let's continue with the script so first step here you have to check in this form tag you have added one ID okay and inside this ID you have given some value so this value you have to append here okay so drop down options with that ID so on that ID you have to mention all these fields so guys I will explain you all these fields in a very simple way the param name this is nothing but a input type and name attribute equal to file or if you want to keep different like image you can keep image or my image my data something okay so which will be accessing in the controller part to upload the image let me keep as file itself and then guys we are seeing with the max file size and Max files so max file size means like it is going to be in an MB format so can keep here like Max file size which is 12 Mb I have added and how many files I want to upload at once at once two file or one file or you can use 10 files at once okay so right now I'm keeping a 10 files here and the size of that quality you can keep static value that is 1.0 and accepted files here and then guys here is uh add remove links I have made it to false like when you upload the image it will will show you a remove option so I don't want to show that remove option so I have made it false here and while uploading all this how much time out do you require so I have kept here 60,000 and then Guys these are the default messages what you can show for example here the default message drop your file or click to upload so let me just show you this message what happens here get back to your browser refresh so here you see drop your files or click to upload so if you change this message to something else like hello funa here I add a hyphen and if you see uh the message changes here like drop your files hello Fonda okay so if you want you can just customize your messages and then guys you are seeing one more message that is fallback message like if that doesn't support or your browser doesn't support drag and drop file upload so it's a so default fallback message and if the file size is too big then you can mention file size is too big Max file size will be your MB size that is 12 Mb here it gives and then guys about the invalidation file types also you can mention all that here like as you have added here you can keep one variable and print that variable here and also here okay so you can do either any of the things so let me remove this JF because we are accepting only jpg jpg PNG and webp so let me add that webp here okay and then guys this is the max file exceeded okay so you can upload up to the max file size so here I have given only 10 you have to accept not more than that okay and then guys there is one function for Max file side exceeded okay if exceeds more than 10 then what about the extra files so you have to remove that using this function so this function is inbuilt guys okay and then guys while sending like when you upload each image you can set a message like image uploading okay and this is linked to one ID here which is in a H5 tag to just show the message and then guys coming to the success after success you can get the success response from your controller we'll be sending that and then coming to the error if any error happens while doing this it handles over here okay and we have put that in the message like whatever message you get done guys and now let us continue to write the code in the control appart so for example just imagine you have uploaded the image and what does this form tag do it goes to the gallery for/ uploads with the method post so guys for that we need to create a route using method post so so let's go to the web.php and create a route so create a route colon colon post method and paste the URL what have you created in your form tag and then guys link to One controller so we have already created it let me copy that controller and paste Here and Now guys go to a store function so now let's copy this and create a store function inside our Gallery controller so public function the function name store and open and close CB so first step guys we are getting a request from the form tag so just put request dollar request so now guys let us go to the post and let me copy and paste the code so we can understand more clear so here you see we have an ifal condition in that we have a code okay let me copy this and paste here inside the store function perfect so now guys first step we are checking that request whatever the request has sent from that blade file has file so what is this file this file is nothing but your param name here okay if you don't provide this param name by default it is going to give file and if you want to change you can change here like image and make sure you are updating the code here okay so I'm going to keep as file itself no confusion now get back and then guys here we have created one upload path which goes to uploads forward slash Gallery forward slash okay and then get the file request in a variable and we are using this variable to get its original extension and we are creating a new file name here using this time function and random function by concatenating with the dot extension okay and our file name is ready so then guys we are going to use this file of move function so where this checks with the upload path and the file name so it will generate a path in your public folder and then in that folder we are going to move with this file name okay so once it is moved we are creating a complete path like final image path and we are trying to save into our database okay using this eloquent model so guys let us see uh our Gallery model app so here gallery. PHP now let's import this class okay class imported you can just check here and then guys we have one column called image in the gallery let me just show you so here is my gallery model and this is the column called image let's close this and paste here done that's it guys and once you done you can just return the response in Json format which is going to be success or you can keep it as a message itself not an issue so let us keep on success message until here image uploaded successfully or else file upload failed so guys now you can copy this success and get back to your create blade file and add the script part here in the script add this success so you have to mention that response do success okay or you can mention that message so copy this and change here to message okay and now guys you ready to test so now let's get back yep refresh and let me just show you my folder here inside the public folder so go to public folder uploads we don't have a gallery folder okay so it is going to automatically generate and push that files over there so now get back let me inspect if anything goes wrong we can figure out and now guys let's click to upload with the images so first I'm going to upload the two images at once let's open and here you see image uploaded successfully and you get the response here okay image uploaded successfully in the console log and one is getting undefined so we can just check out this undefined part in the create blade where is that oops this is the issue guys so you can remove this instead of just remove that and here you can commment this code we do not require to check that now all set and we need to see that these images are uploaded or not so we can get back to our public folder uploads you have a gallery and cool so here you see guys we have two images that is uploaded awesome so let's get back let me try to upload it again like checking the max file size so let me just change the code here in this script tag we have a Max file 10 I'm going to keep like Max File 2 okay so yep we should not upload more than two files so I'm going to upload at least four file now let's open so here you see we have got a log like you can only upload two files so here you see that two files are uploaded but two files are removed so if you try to check in your gallery so you see that before two files and now two files okay so guys we have successfully uploaded the image but we need to also check whether it is saved inside our database or not so you can just go to your database perfect so here you see we have uploaded all the images cool so now guys let's get back and here we are on the gallery view on this gallery view we want to display all these list of images whatever we have saved so for that it's very simple process guys just you have to pass the variable and loop that data so go to your gallery controller at index function where we are viewing this Gallery list so this is our Gallery list okay now get back and go back to your gallery controller let's create a gallery variable and call your model Gallery colon colon and use get function to get all the data and now let's copy this and pass here so guys till now we have seen using the compact function to send the data so instead of that you can use in this array format also like paste. gallery and then dollar Gallery variable okay this variable so here it comes and you can access this variable in your blade file so let's go there and yep let me just directly paste this Gallery variable and get back refresh so here you have a list of uploaded images and now guys let me Loop this using for each Loop control X and guys let's begin with the row column md2 use a for each to Loop the data here like this will be a g image and now use that in a image tag to show the images so let's open and close cbbr use a asset function to display the image correctly so I will call the image column and if you want you can set a static height and width or Auto that is your width 100% and give a IMG as a all tag and now guys let us and this for each after your column md2 so it will be clear and now let's refresh here perfect okay so guys this image is like up and down so let me add a static like width Colon 70px height col 70px okay and before this just add a card. border. shadow okay and also P2 tag so it has some padding okay it's looking better guys so guys now uh we have listed the images and let's upload some more images like different images here so I upload this three images at once okay so we have given Max two images upload so we can change that instead of two we can keep it to 10 and okay let's get back and see cool and if you want to delete it's very simple guys let's get back and let's move index blade file which is about the gallery view okay so inside this image card add a a tag and just add a br tag okay so it will break in the next line and mention that delete so let's see the UI how it's going to look perfect okay so when you click it should delete that image yep and now guys let's create a route for this open and close CRA use a URL function then Gallery forward slash and then your ID forward slash delete okay so here concatenate your dollar gallery image so this is the variable guys I'm copying it and pasting a gallery image of ID and now let us copy this complete URL and create a route in web.php create a route using get method and paste your URL and here you are getting a dynamic ID so for that you have to use CRA and mention Gallery ID and then guys go to a controller at specific function so we are going to our Gallery controller at destroy function so let's copy and go to our Gallery controller create a function public function the function name destroy and then you are writing the code about the gallery like to find the gallery first with the help of ID so let's use find or fail function to find the ID okay and how are you getting that ID so we are passing as a parameter in this destroy function so mention that I'm getting a gallery ID and this Gallery type will be integer okay so int and you are passing this and now you can use this dollar gallery of delete function to delete the record okay so which means it will delete this row okay so guys before deleting your row you need to delete the image also so for that use a if condition here and check with the file colon exist function where gallery of image okay which has a complete path of that file so let me import this file here is a and now guys if the file is found you're going to delete that file so you can use a delete function to delete that file image okay yep and now guys let me just show you the imported class here so this is the class which I have imported and now let's return redirect back to the same page with the message so message you can add either like this or create a status okay like image deleted so now you can use the status and go to your index plade file at the top after this column 12 create a alert so alert success and paste that open and close CRA and session of status so guys before that you need to check whether it is set or not so to check that you can use in a if condition that's it done and now guys you can get back so refresh once and now we'll delete this image so let's go to our public folder so this is the fourth image okay so we are going to delete this let's delete here image delete deleted and you will not be able to see that cool so it has deleted that file guys okay that fourth image okay so guys we have successfully seen about how to upload the multiple image by drag and drop and also file upload part okay so let me just show you by dragging and dropping it okay so this is my and this is the images guys let me try to drag and drop this images so drag and drop so here you see drag drop also is working fine cool so guys we have successfully seen about how to upload the image in larel using drag and drop which is DropZone plug-in okay so guys in this video that's it thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 1,881

Keywords: fundaofwebit, Drag and drop image file upload using Dropzone in laravel, image upload by Drag and drop using Dropzone in Laravel, Drag and drop image upload in laravel 10, Multiple Upload Images using Dropzone drag and drop, Laravel Drag Drop Upload Multiple Files using Dropzone JS, Image Upload in Laravel using Dropzone.js, laravel file upload to database drag and drop, laravel upload multiple images, Multiple Image Upload with Example, multiple image upload in laravel

Id: DnqYe9R7LQw

Length: 28min 47sec (1727 seconds)

Published: Wed Jan 10 2024