Upload Files in React - Typescript, Drag and Drop, & Form Examples

forms are a critical part of being able to communicate on the web but not only do we want to send text we might want to send files such as maybe we want to send an image whether that's a screenshot or just some kind of image we want to upload to a form but sending files as part of a form isn't as simple as adding a text input we need to consider how we actually recognize the file and be able to get that file to send it through with our request so we're going to see how we can actually grab that file from the Picker and how we can even send it through an API request we'll even see how we can simplify it with a library called react drop zone so let's start off the basics where we actually need a file input to begin with inside my code I already have some of the other components abstracted but really they're just wrapper around Tailwind Styles so in this form row I'm just going to work with the default input rather than try to componentize at this point so I'm going to add input or I'm going to say type is equal to file and I'm going to say the name of it is equal to image as I ultimately want to upload an image and that gives me my input and I can go ahead and choose a file but that's not really going to give me anything I can't actually do anything with it at this point so next let's actually try to grab that file so we can then ultimately do something now one of the more common ways of being able to grab a specific value from a form is to be able to reference the name from that event Target where for instance if I want to grab the name field and if I scroll down and I can see where I'm actually having the name field as a name of name I can actually grab that by running console DOT log where I'm going to just console out my name of e dot Target where I'm going to grab the name which is the name of the field and I'm going to console log out the value so now if I actually try to submit this form we can see that I get that name of Colby as I was able to easily reference that now we'll come back to the types in a second this is valid it just doesn't know ahead of time that it has a field of name but we can't do the same thing with our image field if I try to log that out it's going to give me this path which is as you can see a fake path for for security reasons so what we need to do is actually listen to the change of this input and anytime it changes or somebody selects a field we're going to grab that file from that change event so I'm going to add a new property of on change and I'm going to set that equal to handle on change and I'm going to Define that new function of handle on change where this is going to give me an event as well and I'm going to paste in the typescript Syntax for this but it's going to give me a form event for an HTML input element now for for trying to figure out some of this typescript stuff I like to reference this handy react type script cheat sheet where under the form and events page they give an example of how we can actually start to type out some of these fields so that we don't get warnings but it's going to work a little bit differently for us here so I'm going to define a constant of Target where I'm going to set that equal to e dot Target as where it's going to be our HTML input element I'm going to specify and where we're going to Define our files because it's going to give us a list of files and it's going to be a file list type as I said it's going to give us a list of files not just one file where we're going to just work with one file to begin with but we can technically set this up to work with multiple files but now just to see if this is working let's console log out our target.files where now if I go ahead and choose that file we can see our file list listed out or we have that first file of robot so now let's go ahead and save that file where I'm going to create a new set of states where I'm going to call this file I'm going to make sure I update this to lowercase but what this is going to be is we're going to have either a file or undefined but mostly because I'm going to make the default value undefined but what we can do now is we can say we're going to set file and we're going to take our Target files and we're going to grab the first file inside so our ultimate goal though was be able to grab this file from inside of the submit Handler so now let's check that out so I'm going to console log out our file once I have my file selected I can now click submit and we can see that we now have that file available so at this point we now have that file available in our form Handler and we can actually use it now to send it somewhere as an easy way for me to get this somewhere I'm going to use the cloud rate API where I can use the rest API and I can pass in an unauthenticated request using an upload preset now this isn't going to be a secure method ideally I would have some kind of serverless function in front of it but this is just a good example of how I can pass this right into an API so the way that I'm going to do that is I'm going to create a new constant called form data which is going to be a new instance of forum data where the way that form data works is once you have that original form data source you're going to going to append the different fields to it and I want to append my file so I'm going to go ahead and just pass in where I have the name of the file as file or the field rather then I'm going to pass in that file that I set earlier from above now part of the issue here is file could technically not actually be defined it could be undefined so what we want to do ahead of time is just to satisfy typescript at this point where you know ideally we would have some kind of validation on this but what I can say is if type of file equals undefined let's just bail out now as I mentioned we're going to upload to cloudery part of that is having an upload preset where I've gone ahead and set up an upload preset for myself and marking it as unsigned so I'll paste that in as the field value but then I need my API key which I can grab from my programmable media dashboard where I can just simply copy it where generally I recommend using environment variables instead of pasting stuff right in so we're going to use import.meta.env where I'm going to make my vites cloudinary API key and with that you'll also want to make sure that you actually have that API key configured inside of your environment but now all we need to do is actually send a post request to the upload endpoint so let's add constant results equals await fetch we're going to pass in that endpoint I'm going to also update the cloud name or this demo I need to swap it out to Colby Cloud examples which is my cloud name and then we're going to add a second parameter we're going to specify a method of if I can spell post but then we want to also specify the body which is going to be that form data now just like any other fetch request we want to also make sure that we transform that to Json so that we have that in a workable format but then I'm going to constantly log out those results we're now with my image selected I can click submit we can see that it's going to take a second to actually upload it but now I have my results completely available I even get my URL here look at my secure URL where I can open up that image oops I had the quotes on there and I have my robot now there's a few ways that we can customize this and take this further the way that I have this set up is technically we can really upload any kind of file such as this dot Pages file where that's not going to be an image so that's not going to load how we want so on my input I can specify accept or I'm going to pass in image ping image JPEG and really whatever formats that I want if we try to go back inside of the Picker we can see that I can no longer select those files but if I go back to my robot he's all safe and sound now as I'm mentioned we were only doing a single file for this but if we wanted to do multiple we can specify a property of multiple and now inside I can go to a folder and I can select multiple files but again our current setup is not meant to handle that so how about actually displaying a preview of this what if when I select my robot I want to actually display it on the page before I submit it when we actually grab that file we can also read the file using browser apis in order to actually get the information from that file so what I'm going to first do is I'm going to select set up a new set of States called preview but also make this a lowercase p I'm going to also make the this is a fine and I think this is going to be a string of course that's not going to be wrapped in the string but I'm going to create a new constant called file I'm going to set that equal to a new file reader where we're going to use the file reader to actually load that image file where we're going to say file.unload we're going to run a function which is going to actually occur after we read that file result but then we're going to say file dot read as data URL which is going to allow us to read that file so we're going to pass in our Target dot file and once this loads we're going to be able to grab a different value from this file so I'm going to console log out bile.result so we can see what that looks like so whenever I actually choose that image we can see in the console that looks like it is a data URL which is exactly what we can pass into an image so let's actually store our set preview for that file result value where it looks like this is not happy and what it's actually giving us is an array buffer so I'm going to replace that string with array buffer and let's see if that made it happy looks like it could also be null so what we'll do is we'll actually just default that value as null to make that a little bit simpler we're funny enough we actually need that string as well for this because it could be a string so we're going to go back up make that either a string array buffer or null but what we have done now is actually satisfy that result and now we're going to have that preview inside of our preview variable so now that we have it available let's go all the way back down to where we're actually grabbing that file input and this isn't going to look pretty to start but now we can actually pass that in as our source and this time when we actually go to select that image we can see it pop up right inside of the page and then once we actually click submit we're also going to see that result pop up with the actual image that we can then send along through that form but okay doing a lot of this was manual how can we make this a little bit easier on ourselves and actually use a library such as drag and drop so that's where tools like react Drop Zone come in where we can actually start to install this dependency so I'm going to copy npm install react drop zone I'm going to paste that in where I'm going to install that dependency where we can see the basic usage here we're not going to do the exact same thing but we can start to copy some things in like we want to need this import of use drop zone so I'm going to paste that right at the top now we don't necessarily need to use this on drop what this is going to allow us to do is take the file similar to how we were reading it and we're going to be able to read that file still and provide that preview so let's just copy this all as is I'm going to paste it right at the top but we also need to make sure we import that use callback from react now if we look at the actual Dom that's getting rendered we can copy this div which they provide a lot of these options for us for actually giving the props so we don't have to set that up all of ourself I'm gonna go ahead and replace the file picker here now by default this gives us a pretty unstyled look at something and you can use Tailwind or whatever you want to style that up I'm not going to handle that now but we can see that if we click this we get the file picker but also if I just simply drag my file into it we get a drag and drop area where we can now drag that robot image inside now that basic usage doesn't come with a lot of options but we can see that back up top we got that on drop function that we can start to tap into so we get the files passed in through this accepted files so instead of running all this information on change what we can do is we can grab this similar file reader information and we can paste it inside this undrop function and pass in where we're going to just grab that first accepted file now to make typescript happy we can also type out this accepted files which is similarly going to be a file list but now when I drag in my handy robot we can see that we get that preview again now this does come with some other convenience methods where inside of this use Drop Zone hook I can also grab the accepted files as they're uploaded that way I can probably probably just completely get rid of this handle on change is I no longer need that anymore since we'll have those files available so for instance if I got rid of that handle on change and actually look for where we're grabbing those files if we remember we're setting that singular file where we're setting that into state so we can get rid of that too and instead of grabbing that file alone we can now just replace file with accepted files zero I can do that with the actual appending of the form data where now I can drag in my robot and I can click submit and I get my result where now I can take that result along with all the other fields inside of my form and pass that along to whatever submission that I want dealing with files inside of forms can become a little bit tricky but luckily there's a lot of tools for us to help to work with it and give us some flexibility if you want to learn more about how you can pull together all the pieces for a full stack react app I'm creating a course where you can learn how to do just that so head over to spacejilly.gov react app right where you can sign up to get updates as well as tips for working with react if you're setting up a form chances are you want to have a dedicated page for that form like a contact form so how about set up some simple routing for that contact page using tools like wowder which will easily help you set up routing stop what you're doing like this video Hit subscribe and click the little notification Bell for future web dev tutorials thanks for watching

Channel: Colby Fayock

Views: 17,609

Keywords: upload files, upload images, upload files to cloudinary, react image upload, react file upload, react file upload drag and drop, react file upload with preview, react image upload preview, react image upload form, react image upload drag and drop, cloudinary file upload, html file input, html file input js, html file input react, react dropzone, react dropzone file upload, react dropzone uploader, react dropzone image, drag and drop react, drag and drop javascript

Id: 8uChP5ivQ1Q

Length: 12min 20sec (740 seconds)

Published: Thu Jul 27 2023