Drag and Drop Files using react-dropzone | React Tutorial

hi guys welcome back to a new video in this video we will look into react drop zone we are going to use this library so we're going to create a drag and drop basically like an area that user can actually drag a file on top of that area or that specific zones and we're going to use this library so here we can have a quick look that is a simple react cooks to create like an html5 compliant drag and drop zone for files and and it's how we use that so we will look into or dip-dye into all of this and going to definitely create one as well and here this is the other page so this is the office or website about this direct and reactive zone so this they show how to use that and this is the some of the reference and testing so we will try to copy some of the code here so in this case is like the example of basic usage and with something like this drag and drop into this area then or we can just click to select a file from our PC and this is the the code also there's a lot of things this is so this one is disabled and this is a lot of things then we're going to use or try to copy some of the code for testing purpose so here is the drag and drop is disabled and you can see that I can just click on this here and we can see a pop up so we can just choose a select the file that we want to upload and here in this case the drag and drop is disabled I try to drag a file so in this case is the picture and you can see that it's actually disabled that we cannot write and drop here and there's a lot of example more right here and we will look into all of this so this one here only except the JPEG and PNG file only otherwise they will be rejected and here next one the same as the previous one it's just that this website hosted with the 95 which is another tutorial that re show you how to deploy react on to metal 5 and next one right here this is the new install react application so this is what you can see and I just change the text a little bit about this tutorial it's react drag-and-drop tutorial so now let have a look into the code and we're gonna get some of the code from this page and try to see if it's actually working all right so here's the newly installed react application and I'm going to actually reflect on some of the code here so what I can do I can just try to copy the code from here and inside index dot JSP are going to use only this file for demonstration and we can actually delete the app that is afterwards so here I'm going to remove all base not accessory and paste the apps right there so here I can just disable this line this is the logo that we already seen this one here swell so let me save that and see if it's working on the browser all right so um we already done the factoring so this is what we can see right now so here we can start working on the basic example here okay so by the way I'm gonna close this app dorje s we no longer need that we can also delete the file as well so now let's focus on this react drop zones sample code so we first need to install this library it's called react drop zone or there's also like commands here as well so we can just copy right there and inside the of terminal or the command prompt you can just install using this command nmp install the SAS trail and react drop zone and this one here is quite popular so as you can see this is the number of download for this week and currently it was in 10th so here see we can come back again after this installed finished all right so now this has been installed let now start our react so again all right so um it's been installed now what we can do we can try to use some of the code here so I'm going to import this and also using this react cook style and basically copy all of this then we can reflect us afterward so here we're going to keep this as we required right here without using the app table GS so this one is required I'm going to replace this here we just put it there the basic right here which is the function name I'm going to replace it inside the react on the render and let's see what L we need I think we are good to go so now let's see the website here all right so here we can see that it's actually working it's just that we don't have the CSS as for styling so right now if I want to test whether it's working or not I can just click in this area to select fast so I click on that so here you can see that the pop-up is actually sewing and right here what I can try I can open one of my here the folder and then I just want to see if I can actually drag and drop some file here inside this area so I'm going to choose one file which is this one here so this file I'm going to drag and drop you can see that it actually working so here is actually the name of my father and I just drag and drop so here you can see the name of the file and this is the size of the fat in that is shown as a vise and now let have a quick look onto the code so see we just want to know how it works and let's have a look together so here we try to import the react top zones and using this and here we gave it a function name this the function as a basics and is prompt we don't actually require this one and this here is a required as accepted file or to get a rule property and this is to get input property and we used it as you seen here so here accepted fast we loop it one by one and we want to know the file path and also the size of the file so that what we actually see so here let me try it again so let me try to track and drop here so you can see that is the file name the path of that and here's the size so here inside the render function we can see that we try to get the root property class name it's just a drop zone and input here is that you get the prop coming from here and just give it a name as drag and drop some file here or click to select file and then this is the file that we see and once we track or we try to click or select one or from the pop-up then we just show the file name which is coming from this right here and that's how we see it on a screen okay so now next step here I want to actually see the styling that looks something like this so let have a look if we can find something like that so down here we sued see something like here styling dropzone so we can either use like this one here the inline styles or we can just use a style component so I'm going to use the first one here the inline styling so we can try to copy this part right there and also with the function as well so basically all of this and then we can change the code afterward so here from this part I'm going to copy this and put it right here we can delete this and save and see what to change on our file here so it's a juice memo it's not defined so here we can just put it right here on top the memo after reacts and then sale again and see if you can see something right here okay so here what we can see is actually the same as the one that we see on to the screen here on the website so before getting into or try to test this I just want to show you what use memo is so you can see that a use memo the Fang the benefit of using it is that if there's no array is provided and no while you will become cuter to every render so the reason of using that is that we may rely on use the memo as performance optimization so this is something that we need to consider using for the performance optimizations all right so I'm a little into that and we have already done the styling so now I want to see if it actually working so I can drag and drop a file from my folder and see that you can see the style actually around it it's become green so meaning that is active and I can drag and drop here but nothing's happened and we will look into the code very soon so I want to also click to select files so I click in this area and we can see that the pop up is actually still working all right so it's just one try it again but nothing happened okay so the reason is that we can see that there's no action and actually have been asked the one that I just showed previously and we need to put some code right here and we just want to have a look here first so here this is the styling the base style with the flags and this is the column centered padding all of this color the border color and this is the dash that we see the star on the border of the drop zone and this is the active style with this color and it's accept style with this color if it's rejected then we can see this color and we use function and here get the root property input and track or also active and this is track except is the traffic checked and we only accept in this case only the image if the file is say documents with the txt or something L like Word or Excel then this will be rejected and here we use that memo which we already look into that and this if actually the drag is active then we use this the active style which will come with this color otherwise if it's not then we just used to fall it and it's going to show you like this gray color which is nothing happen and we can actually try to change the color here as well and this one here if it is drag accepted then we can show the accepted style with whatever color code up there and it's rejected it's supposed to be like a little bit red color and now I just want to show you if it's actually active then I can change the code here so like what I can do I can right here just put copied this here and put it inside this curly bracket and I change the color say in this case I want it to be black save it and see if it actually affected here so here you can see that it refreshed and by default it going to show something like this so that how we can change the color here as well if not we can just change it back and put it here so you can see that it's become like a grey color just ask the style that we see on the website here all right so that's done for the styling and here next step we see if what L we can do okay so we can actually use some of the code from the first example here so we can copy this block and then put it underneath here also we need to have be fast so this one coming from this block and inside here is required the accepted file so we need to declared right here as well so here is put it here and the accepted files I'm gonna put it right here and save the file and see if we can get it okay so now we can see like files right here so when I click on it see if it happen okay so you can see that it's actually happening so let me choose one of the file so in this case would be this one and you can also see that inside the code here it's say accept only the image type and you can see that it actually selects all type of the image only image and I can just click this and you can see that here is the name of the file and this is the size of that image file okay so see what else we can try so is the drop zone Starlin accepted the specific file type which is the one that we have right now the image only accepted the image drag some file here and opening file dialog program thickly so you can see that's some time you see there's like a button that we can actually click to open the dialog so something like this but we don't have that implemented here so I think we can try to use the code right here for that as well okay so here we can see that this is actually the same and what we need is the button after the drag and drop some file okay so we can't just put it drag and drop some file should be down here and we need to have the open one and on top here's well so this will open the dialogue for us and now let's see you can now see that there's like a button here and when I click on this so we see a dialogue and now let try any other file here so I just want to try this one and you can see that there's a problem it keeps showing me like the second time of the pop-up and let me try it again so this time it works so meaning that it doesn't work as expected the reason is that right here you can see that it's already have one which is we click on this part and it show like AB dialogue but when we try to implement it's like a duplicated or on top of that as well so that's why I keep showing like a second time of popping up so let me try it again to show you what it's like so this is the issue that we are having right now and we need to disable the default one right here so we can see right here that it says for no click we can set it to true and no keyboard also set it to true as well so now let me go back and here inside this use drop zone so I can do a comma and put it right here and I might need to change the name of that as well so maybe we no longer use that and now let's go back and see if we have that implemented all right so let me click on this area but you can see that there's nothing happened because we have reset it to no click equal to true now let me try it again and I choose any of the file so you can see that it's work as expected is the filename this is the size of the far so um and in the next tutorial i will try to show you let's say I choose an image and what it does it will actually show us the image preview right here rather than just like seeing the title of the image and the size of the image and that's pretty much it for this tutorial see you guys in the next video [Music]

Channel: Hong Ly

Views: 28,110

Keywords: drag and drop react, drag drop react, drag drop react js, drag drop reactjs, drag and drop react js, drag and drop reactjs, dropzone react, react dropzone, reactjs dropzone, dropzone reactjs, drag and drop dropzone, drag and drop react dropzone, drag and drop react components, drag and drop, reactjs drag and drop, reactjs drag and drop list, reactjs drag and drop tutorial, react drag and drop file upload, react drag and drop list, react-dropzone

Id: frud5acrGLQ

Length: 19min 50sec (1190 seconds)

Published: Sat Nov 30 2019