#25 Try REACTJS Tutorial - Dropzone

hey there in this one and in the next few videos we are going to be doing a drag-and-drop image and crop so that component will allow us to drag an image into our react component drop it in there and then eventually we'll be able to crop it so there's a few things that we need to do to make that happen so those next few videos will actually do all that so make sure you subscribe to get everything but the first thing I want to do is build in a drop zone so the drop zone is literally that drag and drop component that we're gonna in abusing and I'm using this this component called react drop zone so we're just gonna install it the docs are actually really good there's a lot of examples in there of things that you can divert from what we're doing here but I'm doing it for this specific purpose of doing drag-and-drop image and crop didn't mean to make it rhyme but it does okay so let's go ahead and first off install it so NPM install - - save react - drop zone drop zone okay while it's installing we're gonna take a look at the actual code that we're using basic component here as as we've seen before and it's in our fjs so it's already rendered all of that so what I want to do is I want to import the drop zone itself so we do import drop zone from react - drop zone okay so this drop zone is really it's just a div tag that's gonna trigger a file upload that's one thing but then it also is a actual place that we can drag a file over and let go of it and it will it will actually be handled so what I'm gonna go ahead and do is just bring it in and say draw up file here and then close off that drop zone okay so we save that and of course I gotta run it again so NPM Run is start it installed with no problems I think the version there might be changes to the version in the future but the general concept is most likely going to be the same that's where the Doc's come in I mean if anything changes check out the docs for all that ok so I've got this draw file here again if I click on it it will allow me to grab something or I could also drag and drop you know something over there let's say the react drop zone stuff right so I could drop that over and nothing happens well nothing happens because I haven't set up anything to happen right so what I need to do is handle the event on drop alright so that is something that's built into this drop zone right it's much like a file on change right so on change would be how you do it with file upload on drop is how we're doing it with just a standard file drop and the drop zone is intelligent enough to know if I just click it and upload it something to either way the on drop method is called so we need to create what that method is gonna be and I'm gonna call it handle on drop I call it handle on drop and like handle change I think that is more explicit so I don't ever get confused because you know in the docs they have on drop and on drop I think that's confusing I like a handle on drop and we're gonna use a arrow method here or the arrow function fat arrow function to bind it so I'm gonna go ahead and say this that handle on drop now if you look in the docs you'll see it bound in a different way let's see let's scroll down we see that it's bound like this right and there's nothing wrong with that that's just a different way to do it I think this is cleaner and the syntax follows the fête arrow binding versus doing it in line okay cool so what happens with this handle on drop well two things actually come in by default and one is the files that we're actually gonna use and the other one is rejected files okay so this is an array of both of those things so files and rejected files now I can easily just do console.log files just to see that that part's working this will show me that my drop is working all right so let's go back into Chrome into our app and I'll just drag and drop a screenshot in there right and of course if I console elongate or look at my console.log I see an array of files awesome gives me the name last modified you've been all sorts of data in here that's that's important right we actually want to make sure that we have those things so how do I actually get rejected files right so like I have this rejected files thing in here how do I actually get that well there's a few different properties that we can add so we can say max size and set it equal to some sort of size in bytes so I'm just gonna go ahead and say Const let's say image max size equals to 10 literally 10 bytes that's really really tiny I don't think there's an image around today that is actually 10 bytes 8 that's any any of any use okay so I've got max image size since I have this now I'm just going to go ahead and console.log the rejected files are right so I have my accepted files and then my rejected files we save that let's bring in an image again and this is just a whatever image and that was we see with that we've got an error okay so that gave me the rejected files with this max size parameter now I'm gonna make it a lot bigger I'm not gonna do the math on that just yet but now it should be an accepted file okay did it and what do you know it's accepted okay cool so so really really simple on how to handle it I mean now what we can do with it oh there's a lot of other things right so we can upload the files to a server we could upload the rejected files to another server right it doesn't mean that just because it's rejected for a user doesn't mean we can't do stuff with it because it's not actually rejected it's just a way for us to sort of know what's going on but of course that's only one different argument that we can have there's there's a lot of them so if we look at the documentation we see that all of these arguments or these properties are things that we can use so allow multiple well maybe we don't want to allow multiple so multiple equaling to false all right so now I can't actually have multiple images on here and I can just have one now I only put one in but it still comes in and is array so so either way this is gonna be treated as an array so if I try to do multiple files let's go ahead and do multiple files it doesn't even let me like I'm trying to select multiple here but it doesn't let me and only lets me select one so that's that's a file feature that's fairly straightforward pretty easy but again when we do the drop it's always going to be considered as an array the next thing is that I think is rather important is accept you know accept is just like in a file field itself right so what type of image do we want or what type of file type do we actually want to have now I can just say what I need which is going to be image - and then star all right so this is all images that there are that will accept that so when I save that and come back into this drop file here notice the Photoshop image doesn't come through but that PNG does so by default it does do that now I think we can also just accidentally grab that right so I just pretty much overrode what the file field was saying with my browser and tried to upload a PSD file and hey what the heck that was that was accepted it's a PSD file so this except is not completely handling it as it might should like maybe should so so we would have to actually handle some of those errors in this handle on drop right that is true we want to still handle what files are coming through in here before we would move on to whatever is next so I mean really simply on how we could go about doing that is we just create different conditions for these so we would first off do the rejected files or I mean you don't have to do with this with this one first but I'm gonna just do the ones that I don't want first and say length greater than zero so this is the condition if they're there and there's more than zero then we're gonna just kind grab any of them or all of them and work through it that way so I'll just say Const current rejected file equals two rejected files 0 and then Const current rejected or reject file type equals to current reject file dot type and that we could do size same sort of thing Const and then dot size and again we can now then bring in some of our things so if the current file is you know reject file is greater than that size then we'll go ahead and alert this file is too big ok so the cool thing about this let's let's bring it back down to something tiny like 10 the cool thing about this is it is a rejected file and it's giving us a custom alert to various things right so if I come in here I can now have a custom alert write file is too big whereas if I didn't have that alert if I just commented it out and it came in here it doesn't give me you know an error related to it it just says that it's rejected so that's where we can come in here and have our rejected files do various things but what I also want to make sure is you know even in my actual files so if files and and files dot length is greater than 0 even in here I might want to do something very similar so again I'll say file or current file and current file type and current file size and then just change these things through oops current file size we still might want to have those things ran through right so they are separated that's why we have these two different methods and yes I can create a other method that would just do all these things for me and we'll probably do that but for now all we need to really worry about is hey I was able to handle the drop I was able to handle the files and now I'd be able to send them somewhere else if I needed to like I'm ready to actually upload them to our server we're not we're not gonna we're not going to do that in the next few videos at all because that requires a server to be set up but what what happens here is just fairly straightforward on a simple drop zone if you have any questions let me know make sure you subscribe to get everything because we are gonna be covering more of this in the next few videos and a lot more react and many more videos to come - thanks for watching see you next time

Channel: CodingEntrepreneurs

Views: 23,207

Keywords: try reactjs, reactjs, react, react tutorial, react2018, tryreact2018, javascript, jquery, angular, learn javascript, learn react, javascript tutorial

Id: aK3aUW08YGw

Length: 11min 40sec (700 seconds)

Published: Tue Jul 03 2018