How to drag and drop files in reactjs using dropzone

hello to you wonderful person watching me on youtube this is my first tutorial i'm moody and i'm gonna teaching you today how to drag and drop files using the npm package drop zone and react yes so without further ado let's just get into it so we're going to be installing the package first of all so i'm going to just be copy and pasting it in my integrated terminal right here in the vs code um so you might be wondering what's going on here actually you might not because it's actually a really empty project i've only used create react app in px create react app and i've deleted the the initial stuff that comes here the header and the logo and the svg stuff and all of that so after installing it this npm package got its own hook which called use drop zone so i'm going to be using i'm going to be importing it so react drop zone and use command i drop zone i've just used inp which is a shortcut i'm going to be maybe making another tutorial for it if uh if i'm good at tutorials so let's um let's call let's make another hook right now so i have another shortcuts sorry if i'm using too much shortcuts actually why i'm sucking it so file and set file and let's just give it initial state it's going to be an array this array is gonna contain all the files which is all the images in our case and here let's change it to cons there is absolutely no reason why i have done that um well maybe because i'm gonna do another cons down here and i want it to look pretty so let's just make um get root props and get input props which is gonna be equal to our used trap zone it's not sorry for this it's gonna take an object all right and this object there is an accept as you can see it's already recognized so in this accept it's gonna take image and i'm gonna just do an asterisk here start which means all the images type jpg png gif and all of those and let's do a comma we are inside an object and here we're going to be doing on drop which is also uh from the use drop zone and the on drop is going to take a function um let's make an argument i'm going to call it accepted files all right maybe it doesn't make any sense but i hope it is and let's just call our set files here um let's call it sit files all right and here files and here files and our sit files it's going to take the accepted files and we're going to map through each file inside this array of accepted files and we're going to assign it to object it's gonna take a file and second parameter is an object which object assign takes two parameters and here we're gonna be making sorry for this here we're going to be making um the url of each image so we're going to give it the preview let's give it url and we have something called create object url and we're going to give it the file so it can create the url for the file so let's um you know what let's just console log the file so we can see the file when we drag and drop it so another shortcut here sorry for that cc and i gave it the accepted files and let's render some stuff down here so we can make it easier um actually i'm gonna do let's make a files you know what let's call it images and this images is going to be equal to the files which is this after we give each file maybe one image maybe more so just in case and we drag and drop more than one image so we're gonna map through each file again and we're gonna actually no curly braces we can just do normal parentheses because we're going to return an html which is in our case it's going to be an image and the src remember we made an object property here called preview and the preview contain the url of each image so we're gonna be accessing this preview which is inside each file so file a preview let's just i don't know just let's say image here and yeah you're right i have a problem here i forgot the map and now i don't have a problem let's give it a key because it's going to ask us for key later so our key is gonna be let's say file name all right and the image is gonna be huge so let's just give it some basic styling let's say with 200 pixels and high it's gonna be 200 pixels all right let's hit enter here so so you can see that and now let's delete you're awesome by the way um let's just render some stuff here so let's start by making um a drop area so we can give it a basic styling in the css later and now we're gonna uh spread the get root props which we made here remember this is the get group props and now as you may be guessed we still have the get input props so let's make another input inside here and give it the input props you can leave this you can make the type file or whatever but i'm going to delete this for now because we're going to drag and drop so you're going to see that later and under the input let's just make a basic um a basic h1 or low this is too big let's just make a p tag and give it a class of text and um let's just say drag and drop here sorry took me a while to type that and under this thing let's just um make a dive and put our images which is as you can see this is the images so i put it inside div because the images is going to be rendering and html which is image so if i drag and drop three files it's gonna be rendering three images that's why i can just put it here inside the div so let's just do some styling we have um drop area and text let's copy those let's start drop area and let's just give it um let's give it display grid which is place items center which is basically like display flex and justify content center and the light align item center so i just saved one line of code and now let's give it some kind of a grayish kind of background and let's give it just some width i know this is not important what is important is the functionality but just just like you know just let me do it for the sake of good looking stuff dotted let's give it five five five let's just give it three pixels and uh let's make a width a little bit shorter um smaller than what we made in the parent deflects align items center align item center yep justify content center and flex direction column and so use state is not defined because i use the shortcut and the shortcut doesn't automatically import it so let's just use command i on mac um control space i think in windows so yeah that's pretty much it so i have some photos that i dropped in my desktop just in order to test them so let's just do some testing shall we so let's drag one photo which is three different kinds of images actually so this is a gif or gif whatever you call it so you can see it's working um so this is a file please just ignore you know the the width you can do some div with background image and some another styling or whatever you want but basically this is what's important as you can see here is our array which is the files which is we canceled it here it is the accepted files and we got this is the preview that we talked about the link that we make which is localhost because you know it's local and we don't upload it right now to the database so what happened if we refresh obviously it's gone because we haven't saved it anywhere so let's just try and drag all three images and as you can see file file file we got the array inside the array here's the three images so you can see the name profile loading and this whatever it is and we got the images right here so this is pretty much it i hope you really enjoyed it and i hope i could teach you something in this tutorial and this is actually my first youtube tutorial ever so i hope i was good at it thank you again for staying this far and yep have a great day

Channel: Moody Codes

Views: 69

Keywords: reactjs, react.js, web developer, drag and drop, draganddrop, how to drag and drop, dropzone, npm packages, coding, simple drag and drop, upload files, react js, web developing, full stack developer, front end developer

Id: hO85tWDctIk

Length: 11min 4sec (664 seconds)

Published: Tue Sep 14 2021