The Last React File Input You'll Ever Need

hey what's up in this video I'm going to show you the last react file input you'll ever need and I know that's a really bold statement to make but I'm gonna try my best to back those claims up in the video so let's take a look at how it looks and how it works under the hood okay so this is the component we're gonna build that's the file input as you can possibly tell and it's looking really good and it has a lot of functionality this is inside of an open source project I'm currently building that allows you to generate all descriptions for your images um completely for free however before we dive into the gold I want to show you how this works so I prepared three files on my desktop and first one let's just drag it in here that works perfectly and there's a bunch of information that we can take a look at with this component so there's a preview of the image there's the name obviously the size of it and then a status bar and now I'm gonna upload another image and pay attention to the status bar so I'm gonna upload a larger image and the status bar takes a bit to load because we are actually more working in API delay by one or two seconds I believe so that's why it takes a bit and if we try to upload an image that is too large we get a toast notification and a red status bar indicating that it didn't work so this is really neat and the image upload action can be handled however you want so this is not opinionated at all you can handle this in your API route however there's one limit enforced by Nexus being that the API Rod has a maximum body size of 4 megabytes due to the nature of edge functions having to be fast if you want to exceed that with larger images which you probably won't but if you do then you would have to host your own server something like you know node.js okay now let's take a look at the interesting parts and those are the preview the size and the status bar I think is probably the most interesting part the rest is kind of boring and simple if you want you can take a look at the code but I'm not going to get into The Styling at all okay so let's take a look at how the preview is done so um to give you some context the file input this whole component right here is being rendered in the page.tsx this is inside of a nexjs13 project and then we go into the file input and we have a bunch of imports and stuff and one very neat thing about this is that I've implemented a bunch of good practices for example the reducer when we're trying to update state so if I try to update or upload more than five images let me show you what happens um these still upload but if I do one more you can see too many files you can only upload a maximum of five files at a time and how that's done is through this reducer right here so before updating the state in the reducer we can actually handle logic and say you know if the if the current state plus what is about to be pushed into it is larger than five we're gonna toss an error and else we're actually gonna set the state that's why the reducer is really useful and it can also be extended with something like remove files from input if you want however I didn't bother with that and then let's take a look at the drag right as you noticed there's a drag and drop functionality with the editor if we drag an image over it it highlights in every drop it the image is uploaded and this works just fine with a click however that would open my files and then I don't want to show all my files um however um the handle drag is what makes the drag work and the handle change is what makes the click work so whenever we receive a drag event which we get by react by the way so if you take a look at this on the form we have on drag enter that's a react method we can use to handle the drag then we're going to use this function prevent the default and stop the propagation of the event and then just update the state that handles the the Tailwind CSS logic conditionally so we apply a bit of different styling when the drag is active and that's how that effect is achieved okay now let's take a look at the preview though and then after the status bar I think that's the most interesting part of it all so let's get into the preview first to show you how the preview Works um you need to understand that it's not being handled in this component for each input so for each line of image we are rendering one component that allows us to keep the status bar for each one instead of having them synced altogether that component is called image upload and let's take a look at how the preview is generated inside of here so whenever um one image gets pushed into the state remember we're mapping over them another component of these is being created so in each component we know the actual file that is rendered because we're passing that as props up here I call it image and then we can do something called url.createobjecturl essentially making a blob object that we can then render and we also need to clean that up in the use effect and then to upload the image there's a custom hook called upload form and we are uploading that form or that image which we are appending to form data to this API route allowing us to also track the progress so we handle that logic in this user fact right here whenever this component gets rendered then we upload the form of the form data and you can see the hook right here where axios is doing something really nice and that is right here we get the upload and download progress from axios and that's how the status bar works so if I show you that again let me upload to one more file one last time take a look at the status bar you can see axios is giving us the current progress and if there is no progress then we're just using a hundred for a hundred percent so this hook abstracts a lot a lot of the upload logic away from wherever we use it which is really useful making it very reusable across components so whenever we want to upload images we can use this hook and also get the progress we get if there is an error which we do right here and we also um post a toast notification to the user and that is all the logic there is to this component we display this uh the the values in table format which is just semantic HTML you could display them however you want and then last thing is the API route which I kind of mentioned earlier where we have the body parser size limit um it's the maximum that nexjs allows at 4 megabytes and then we are awaiting the delay of three thousand if we didn't or let me just comment that out take a look at what happens to the status bar so I lied the previous image wasn't the last one take a look it's really fast it completes right like when we drag it in there and we cannot upload images that are too large which is really nice and then we can do whatever we want with the image on the API rod in my case that's going to be I'm generating the alt tag with a machine learning algorithm but you can do whatever you want oh by the way if you're wondering about the size um we can take a look at how that is handled really quick and that is the image.size so whenever you're working with a file the file also has a DOT size on it and there's a bunch of properties so there's a size a name last modified type like image or GIF or whatever whatever you upload essentially we're just working with a size dividing that by 100 and then limiting that to no no numbers after the comma and that's how we get the size and that's all there is to this drag and drop component it works with a click it works with drag and drop it looks pretty good if I do say so myself and yeah I hope you learned something from the walkthrough how you can handle the image preview how you can handle the status that's all there is to it and I'll see you in the next one have a good one and bye

Channel: Josh tried coding

Views: 8,495

Keywords: react, file, input, react file, react file input, react input, nextjs file input, tutorial, how to, axios, typescript, react typescript, nextjs 13, nextjs, nextjs 13 typescript, josh tried coding, joshtriedcoding, best practice, best practices, react best practices

Id: PXcfQ_Y8Jbo

Length: 7min 43sec (463 seconds)

Published: Sat Feb 18 2023