React JS: Uploading Files with DRAG and DROP API

hello everybody welcome to a new series on drag and drop api in react.js so in the next few episodes we are going to explore the main use cases of the drag and drop api by building some projects so in this first episode we are going to see how we can use this api for dragging and dropping files in the next episode we are going to see how we can we can drag and drop elements in the dom by building a sortable list let's get started [Music] so here i have created a simple react application and i have already created some styles to make our application look nice with the so i'm trying to center the container using flexbox now let's go ahead and create the component we are going to use for the drag and drop functionality and now i am going to import and render that component so here i'm going to create a component using functional component i'll use our functions so our component is going to use the state for storing the the files so i'm going to import the usted hook from react then i'll go ahead and declare the file file state with a default value of null so here for rendering we're going to do conditional rendering in our component so if we have selected files we will display the name of those files but if we don't have any files we will display a div this div would basically be the drop zone where a user can drop files so inside this div we are going to have a button that a user can also click and select files the traditional way let's give the div a class name of container so that we can style it in css so now let's head over to the css and style our drop zone i'm gonna use flexbox to center everything in this div i'm also gonna give it a dashed border i will add padding as well now let's go ahead and start the button to make it look a bit better now that everything is looking cool we can now move on to the logic of our application so since files are going to be dragged and dropped in the dropzone div we are going to have two events the first event is going to be the on drag of our event and we would assign this to a function we will create this function in a second and also the second event is going to be the on drop event we will need to create two functions that will handle the drag and drop functionalities both functions are going to have the event as an argument so when we are dragging files we are simply going to prevent the default behaviors by calling event dot prevent default if we don't prevent the default behavior the drag and drop feature is not gonna work so when files are dropped we we are also going to prevent the default behavior by calling event.preventdefault as well so now let's console log this event and head over to the browser let's try to drag in some files and see what we are getting and as you can see the event is an object with different properties so here if we look at all properties we have there is the data transfer property and this is where we can access the files so let's head over to the code editor and try to update the stat with the files now i wanna show you how to make this select button work so we're gonna create an input field and set it type to file we will also set the multiple properties so that we can select multiple files at once for the only change event we will simply use the set file set files function to update the state within with the event event.target.files so to make things look good we are going to make the input field hidden and then we will trigger it with the button click so for this to work we need to create a reference to this input field so we're gonna use the use ref hook for the button we will handle the on click event with a function that we click the input field so now if we head over to the browser and test this button you will see that everything works just as intended so when the user has selected some files we don't want to show the drop zone anymore we want to show the name of the selected files so by default the files are stored as file list object so we cannot use the map function so we will convert these files into an array and use the map function to loop over every file and then we're going to return the the file name within the list item element i would like to have two bathrooms one button will be the cancel button it will simply reset the state to to now when clicked and the second button will be the button that you you would ideally use to send these files to the server so i'm not gonna get into the actual uploading files section so it's beyond the scope of this video anyways if you wanna learn how to send files to the server let me know in the comment section all right guys this is the end of the video thank you so much for watching i will see you in the next one you

Channel: Albert Devshot

Views: 24,076

Keywords:

Id: vEkf9JgJV00

Length: 7min 34sec (454 seconds)

Published: Fri Jul 29 2022