Let's Create a Drag & Drop Image Uploader on React #01

Key Takeaways

have some guys all were doing welcome to a new video tutorial on openness channel and it just like you bring your video on learning programming any new skills today we're going to do it tutorial like a practice and examples about react so just gonna go ahead like create a really really awesome example like actually going to create a draggable or an app loaded example an image uploader example on react so if you haven't like watched the series of react or if you're like a newbie to react and you want to learn react on the ground up I just want to mention that our shoes on my youtube channel and my website of course I produced calm so make sure to go and check it out in the link description below so you can clearly check this out and you can clearly like all along the the whole shoes with a lot of other practice examples and practice videos and all different examples as we have created along the side the series so this is like a very example this is like a different project I'm working on but this is what we're going to work or create something too similar to or like to today's video tutorial or pretty much I'm coming just like I know cut the video in two parts I'm not pretty sure about this I will think about it if the video goes too long so I'll try to cut it but anyway so this we're gonna create anticipatory so it can clearly see like a dragon image you can clearly go ahead a dragon imaging here you can clearly you will be able to see an image gets uploaded in here and you can please create the upload button and gonna send like an asynchronous request or an AJAX request to the server tell the server that you want to like upload this image or whatever file you want to upload in here we'll see a video or any other PDF or document file you wanna upload button we are just going to focus on this on an image file or an image type on this video tutorial and you can clearly do that with a dragon job where you can just go in and click the Browse button in here is just gonna grab your that so this is all we're gonna work on you using reacts from from the ground up I have like the style made ready for this so we don't really like need to work with a CSS style tuberose say we're gonna use a sass a pre-compile sass to work on this so I have like the style pre-made for us we can do some like on our tricks or hacks for it to work perfect for our case we're not going to use a pop up or something heroes can clearly receive knowledge I'm not gonna use a pop up just gonna put it in the webpage so you can clearly you will be able to own this tutorial like it gets the container you can get detected here you can get the browser and you can get the drag-and-drop functionality of the images and you can you will be able to get in images in here you can delay the images and you can obviously upload them with a really nice UI you will be able actually to remove the images from list you will see like a progress bar telling you that the image has is being uploaded or the uploading processing in progress or something with the awesome you are and in this case for the UI this is an awesome you're actually going to use a framework which is the blueprint JS blueprint JS is pretty much reiax library reacts forests are CSS but it works perfectly with react it gives you hell a lot of components to work with you can go to the core it only needs to just go poop and J's calm you can find a lot of things in you I use it my my projects either for an escape projects for my production projects or even my tutorials I use this on my daily life it's super super user also my men's say and with with an awesome API it see behind this is like absolutely gorgeous I love their creations they clearly does something really also made approver chance so yeah this we're gonna eat you could go and take a look on from all this library on this room works from home mister link and you know let's go ahead and get started for this story so without further ado let me just go ahead and jump into the visual studio code have the projects in your open which is the project that we have been working on which is the react app so you can probably see on the top here the top left corner so this project I've been working on for a couple of like react projects we've created here like the wonky react form and like a couple other model things like the timer and we've worked on the series on this so once you watch the series you will be able to like create a project pretty much like this so you can follow along with the practices and examples exactly the way we are doing it right it so without further ado as you can probably see here I've created a pool called image uploader which is going to be like the fool that I'm gonna work puts this example so you can clearly see the log in here represents another example we created longer series if you've been like you know following along but this one is gonna be presented with joy so the image out well it's gonna start by putting your NOC and render dot guess which is going to be pretty much responsible for rendering a foreign doing stuff to the Dom so I'm gonna do is just import react really quickly from Yax an obvious thing done poorly else dumb well you've seen this a lot probably so we think you know what I'm actually doing here you could do it even more faster so what we're gonna do it just like called react Dom to render and stuff but after like you know exporting something here and let's go ahead and create like the main components you're going to work on this view story which is gonna be the on all I'm gonna call it let's say I don't you tell image uploader or something or just go with the simple uploader name dot J's for the JavaScript and this should do the job perfectly for us so we do the same thing so I'm gonna importantly yaks of the library gonna be you so we're gonna need only need to be yet note the Dom rendering thing let's go and create a class which is gonna be the out loader or yeah or let me call it draggable uploader and which is gonna be like extending from react components as you know so all of these are basics so I don't really need to get you throughout the base it exists all you guys knows that if you don't deserve said you need to watch the series first before coming up and do this like in advance because Toria just for like people who knows and works with react so they good benefits really allows from this tutorial from this long practice video tutorial here this like the render we're gonna like here change the name as well so let me just go at me kids draggable well lemme draggable Apple loader which makes it super difficult to match up the the actual class name and it should work pretty much fine for us we're gonna need luxury is this where you not using type code in case you are actually using types given set up jobs could do like needs to clear some interfaces and different classes and YouTube provided to the component stuff it's gonna be awesome so I read places good go ahead alone type scripts if you haven't already but for now just keep it up basic and you can just go ahead and do things with the actual JavaScript thing you don't actually see behind the scenes but I'm looking like codes that I have created so I can clearly see what I'm coming to do for you guys so you could probably understand what I'm actually doing it and you know you can you can easily see that let me just actually find the rendered file thing and we're just gonna go ahead and start like you know rendering stuff yeah here we go so let's go into render first things person got out like he no return so gonna return things or return the main component so I'm gonna call it the urban here like just give it give it a dev and sis like I'm not using reacting using powers you can go to the the rise here if you're using Visual Studio code or the bottom start to spawn you can select reacts but what I'm preferably need to do is just rename the palette or gsx in order to know that we are using like a react same orange ESX so you wouldn't know perfectly for this social now he knows that I'm using the dev and stuff so here let me just go in and give it like a customers file instead if I'm giving it you know okay let me just go in to the display thing we're gonna use flex display and I'm just gonna do with the Flex direction and I think I'm gonna give it a flex direction of let me find this really quickly well it's gonna be a column so sort of row since we're gonna have like you know the draggable container let me just get a few stats you this like the text up here the drag rubber container inside it is a browse button and you know all the way down are gonna have like an upload button which gonna be real proper as possible for sending a request to the server which we don't have to control election in this tutorial just need to provide an API so whenever let's say you have a back-end running PHP or an IDs or something so you need to send like in asynchronous requests or an AJAX request to the server the server can handle the image whatever there you're gonna send it to him and he's used to not like responding back to you that saying you know the DLL the image has been successfully updated or like uploaded successfully and then like all and needs to do but without further ado I'll just go with with this one I'm just gonna clear the like header in here let me just gonna put the class name so I'm gonna give it like a sub hitter which is just gonna be like you know responsible the dragon image in here it's a sub header so let me just drag an image okay the other thing I'm gonna do is a draggable - container one thing I forgot completely forgot mentioning is the style of CSS or you can find it on the link description so you feel like following this from the YouTube channel you can probably just go to the description point the written tutorial go to the website you can find the snippet or this style right over here you can clearly see this one the whole thing here just gonna copy it paste it and you can you know like work with it or you can go ahead and find it on the github repository because I'm gonna just put this and github we passed it you can go ahead cloning or something just grab the CSS code in here and you can easily put it only style to a CSS file or whatever and you can you can easily get started with it and yeah this is this is all you're gonna need to cover all so you make sure to go ahead and import the basic style sheets of the blueprint that we have installed and that I totally forgot about mention installing but all you're gonna need to do is just type NPM install blueprint is forward slash core and also make sure to install blueprints genius for Ghost Ranch icons because it comes with with an icon stock library that he uses like you know energy uses so in me so you have to install that otherwise you're gonna give you like a really weird information gonna stop both of these is the core components which holds all the components all science but this one holds like specific icons made by the blueprint team so I'm actually gonna grab it and just say this puzzle we're dependency and everything should work be much fun for you guys and one users can probably hear some run running the web pack was so everything would work and here obviously run hold on you can just copy it and everything should work pretty much fun now coming back to your work now we need an input so we're gonna need inputs which gonna be probably you're gonna need is the input is gonna be a type of file or I put it in text excellently so it's gonna be a type of file so remember this tempo is gonna be used for uploading the file whenever we click this browse button we need to like trigger the click on the inputs but as can clearly see here the input is completely hidden so it doesn't it doesn't show up at all what it does is just like behind the scenes but it like receives the events it works like an event but it doesn't show up in here so instead of showing up the like the actual input bar we are showing this really awesome container with this browse button in here so and hiding in the input is everything like depending on the actual CSS search you can go to the style here find up in the input whatever input in here we're gonna give it some ID of probably the file browser so file browser inputs it's gonna have a name we're like the same thing so file browser - inputs the same thing with no problems we're gonna have like on dragged on dragged over so on track over events which is whatever you're actually targeting image or something over this this events gonna be triggered what we need is to capture the events and we need to prevent the people behavior so the default behavior whenever we drag it like you know an image or a file on the Chrome browser or in the browser actually Firefox Mozilla or opera or something you're actually using whenever you drag it and drop it you can actually trigger the browser to load the file instead of the web page so we need to like prevent the default behavior of this by calling the proven default function right over here and also we're going to need to eat us stop propagation which can stop the like the events to move move from the parents because the event is gonna be captured first from the parents which is the the main container to to the actual last elements so forth so this is just like for the preview thing I'm just gonna like I'm just showing you what is behind the series why you're actually going to see everything later on whenever we finish like you know doing the first steps the basic steps pretty much so this for the for the emboss we need to like do all the drive over I mean obviously we need to replace the input so we have to like to put a reference which is going to put an inputs and for the inputs we're gonna need to save it on the class so I'm gonna say file input it's gonna be like gonna equal the inputs thing and here for the help file compose well it's still done like you know we're gonna work for instance of the class and added the rest of the class pretty much fine with no problems with the reference and to the most obvious thing or the most important thing we need to like capture all the drop events the drop events actually represents whenever we like drag and drop the actual image on it this event is gonna be like triggered not only just drag it but drop it so this is the base we need to capture let me just go in it into the class and I'll give you like a new function on Pioli node well this is gonna be responsible folio dienophile from the actual hard disk or from the actual you know like in the main machine to the actual website and just like you know reload it and show it in here then we can from from this like section or we could just go ahead and send it to the service so we first have to reorder to the browser then from the browser we need to send an asynchronous call to the server and do all the different other things which we don't actually care for importance right now because we all care about rendering now as I've said so this is gonna be like the the main thing so this is gonna be a boss deal this job I'm gonna call this das only you know file and you make sure to point that this context because if you don't it's gonna give you like an error since you know this function is not gonna be cold on this context because it's gonna be cold in other context whenever the event is being triggered so we have to bind it to the current context which is the current class context you know so you have like known about this a few if you know the basics enough so also we have to have the only change on J's means we have to changes something to the input let's say we have clicked this button it's got in trigger the on change so we can just go ahead and do that so brief three obvious is the doc the inputs things and as I've told you using this ID in here which is pre computed good the CSS style is not gonna show the input whatsoever so it's gonna be completely hidden now like alongside the input we need like a files preview container so I'm just gonna put files pretty container in here this - preview container pretty much it's gonna like hold the actual file so whenever we drag and drop an image in here let me show you in that in a second I don't know let me just go and grab an image really quick so from pictures I don't know let's just go ahead and lock my picture in here or whatever let's just go and put all got this picture real quick so I'm gonna go to the chrome and put that and hopefully this will be triggered boss oh no this is not being triggered I'm just gonna grab another picture let's say this one and let's can clearly see this is what we want to do eventually so we want like you know grab it from the hard drive or something and just put it like a preview in here whenever we hold with us we get this exponent to get rid of this like to remove it from the layered it or remove it from the cube to be uploaded and this over effect is called over that so we need to like this is the the like preview or files preview container so it's gonna hold all the images who are going to improve view to the user so this is what it does just to let you know what it is and what actually happens so just gonna prepare to leave that MC since we're gonna need this in a little bit so let me just talk about this in a little bit and after finishing this we're gonna need the help of text well the hello protects is gonna be about like this one the drag and drop images here which is going to be in the middle so I'm just gonna give it like help or text and I'm gonna draw well job energies here so yeah just just a quick head protect to show the user or tell the user what to do and the most obvious thing we're gonna need is the file browser container which is which is this container that holds the Browse button and everything so I'm just gonna like fire our browser cache container and like holds the main thing and we're gonna use the Inc robot and still the inker bronies pretty much from the from the blueprint J's library so that's why I told you that we're gonna need because this one is being loaded from the blueprint framework and this one in as well so that's why I'm what could be ordered is so in curve button and let me just really quick go ahead and include that so important to birthday so I'm just gonna saying curve right here and imported from blueprint chance for response core and it should be there with no problems not going back again this one is gonna need a couple of things it's going to need the text so the text is actually going to I think so whatever text you want to display in here I'm just gonna put let me just put it right here so browse browse for files and the instance the engines actually means whatever call you can give it a blue you can give it a glowing green in here which represents success so I'm just gonna call an intent and first need to like camp or the intent class from here so I'm just gonna say engines which needs which pretty much will like import the engine to class for us I'm just gonna say anything starts a primary for just playing T in blue the other thing we're gonna need is minimal so the middle which means we're not gonna like represent or show up the background color and everything many more equals true and I'm gonna give it an own click function the only click function is gonna pretty much trigger the click on the info files that was told telling you so only file import I'm gonna just go ahead and do a click so so just clear drop trigger the trick the click and you will pretty much whatever you click that you're gonna see me browse your output us to you know like important image or whatever so this should do a job provides like file import on click and you should you should actually click the file importing give us the the actual pop up for you know you know just select any image so yeah as basic as this we should be able actually to go ahead and do something with us for the draggable mutaters should work pretty much fine but we can't tell everything that is working pretty much fine before like important let me just go ahead and do this but before we need to explore this as a default so we need to do like in sports default class which you're gonna like important from the main renderers so it's gonna be draggable uploader draggable uploader and I'm just gonna copy this really quick and here you need to use the react Dom don't render I'm gonna render the draggable components or the draggable upload or whatever you call it and we're gonna use the document to get the elements for ID and we're gonna need to point out the roots remember who it is the actual thing this one you're actually going to require or like look for it on the actual HTML so we can use it as a container for the rendering purposes so symbols that we should be able to save this really quick and let me just go ahead and lucky use the server all the live server extension from the marketplace on a visual studio code so if you're running another like video or another editorial code ID image to it go ahead and you can run this like a normal HTML but I really like this room love it with a hot Welo functionality and a lot of other features and just just very very reliable so we're like this very very much to work with with alter those Salem it's going like inspect I think there's some kind of errors happening behind the scenes in here so we need to go to the console and as far as can tell there isn't something being actually happening and that's mainly because we're not actually important in the you know like not require awareness and the up dog case which is responsible or we're web pack is gonna pretty much go ahead look for files and start bundling this is the main entry point for the web pack bundler Orville arable mix whatever you call it pretty much so we're gonna need to require that really quick so I'm gonna going to need to go with it how much uploader and you need to go to render and it should say that now I can probably see the web perks started doing its job with bundling things and stuff I shouldn't take that much time just because this is the first time it knows about this the first time you know discovering a new blueprints files and stuff so you know what he finds brand new things and you know tries to compile it but it should done pretty quickly and here we go so now you should be successfully we've got the build success notification right here we got this but we haven't got the minimum so and this is me because we are not sure actually not including the style so let me just go to the renderer in here and include the style I'm just gonna go with like an import well I'm gonna approach where is this okay the style is CSS so I'm just gonna quickly import a style a CSS you can import the style of CSS from here or you can import it from the other way around but this is not a real gsx file that's why we gain the error so I'm just gonna rename this to eg attacks I'm gonna put this the way it means to be saved this again always remember to like rename your new files that you actually using gsx on it or trying to render some you know HTML elements one is to GSX or you can clearly or easily just go to the you know the Select language mode and select from the list in here whatever language you're using especially like javascript we asked what ties to reaiise but this should do the job for us perfectly as i've told you before well this is like i'm enough stops working or something should pretty much go ahead and do this really quick one more time so i think this type of a CSS is being you know called successfully got run to watch just in case and one thing just like quick problem happened to us is for some reason I've been using actually when I devote the other application of the news actually WebP and version 4 but this is like a little bit outdated web pack versions is real a box this react series so to make this work or to make it Leo the actual CSS stylesheet of the blueprint framework or library you have to like you know Rufus and he was in a relative path so instead of like using the other path you have to go like no go back since you're actually one one you know like one directory forward so to go back one day I should go to the North node modules go to the blueprint J's or a blueprint a as directory called blimp CSS and blueprint or CSS and the same goes for the icons library so just quick fix if you have that if you don't you can use the other notation as we haven't used before this but as I've told you since we are using like an outdated version of go back and all along sign literal mix because that one makes it a little bit I would say outdated so it really wise to go ahead and watch I my web pack be killed show you about how to use like a native web pack with reacts and stuff like this so to make it work and afterwards also make sure to go ahead and add the class name to the damn the div the main deep-fryer I totally forgot about adding this the inner container in order because the inner container contains all the other classes to make it work now if you can clearly go to the react application in here you can clearly see that's the example if it works and he shows up I really also continue with a click click you can you can click it and you can you know go to the whatever place you want to go you can drag an image in here it works be much fun but for some reason we're actually not seeing any born that holds the actual you know the bottom thus we have got to add so under the div container in here I'm gonna add a really quick anchor button it's gonna be an anchor bonus again with the text I'm gonna call this like an upload button the the green potting doesn't gonna be seen there so home Clegg which cannot like you know responsible for a console don't log or I'll just get rid of this for now I'm just gonna give it some intense for opening to success now yeah that should be it so it should work pretty much fine for now now what we need is like Giulio the actual files we have to do a new functional this only odd function you know we need to use the basic up or power readers so the APM so with JavaScript actually provides us with a reader API that will allow us to read files from the actual disk or from the actual you know the machine of Windows or whatever like machine you're running so it would be able to let us do this using the actual file reader APM so to do that really quick I'm gonna just go ahead and initialize this create the new insist so fit of the file reader it's just you know like quick instance of it it has a couple of things it uses callback so use the callback mechanism callback system so we're gonna need to only it whenever the only node function or events is gonna be triggered whatever the file or the image has been successfully loaded so we can clearly tell that so whenever we gonna just go ahead and do this really quick I'm gonna just quickly use image loaded and I'm just gonna go with the file reader so I'm gonna file reader result so whenever it's being wielded and everything and read and everything so it can add the actual result or the DA's gonna do so so like saved in the file read and don't resolve properly and we have actually to me the actual file so we have to do like the power reader does read us let me what was okay so let's go with like a DNR URL okay so we have to give it the actual blob the DNR blob us we have you know gods and the DNR blob we're gonna receive it actually from the actual events so as we told you so the Omaha ER is gonna receive the events from the on drop and then click on change so it's gonna have like an events and all the events how we can get there some particular like user costs file so this file is gonna access it from the eve or the events doc charges dots or diversity I'm gonna use the current target so the current Irish which represents pretty much the actual import file that I'm gonna receive the actual power or the actual image and I'm gonna access the since it has a couple of plans and since we only lagina will be able to input one file a single time so you're gonna access the first file since it's gonna be always the first file or the zero index so this is how you can probably tell it to go ahead and access the plow and I'm just gonna give it the file really quick in here to read it you know this is the actual pilot that I was gonna be storing it's a blob data type of thing I'm on layout and also we're going to need to do like the other events on boards really quickly here I'm just gonna a large reading aborted and the other thing I'm gonna do is on error so whenever an error happens on the middle of like a reading the actual file from the hard drive or something I'm just gonna clear pretty quickly on there so the owner actually still file reading error you should say that so now whenever we change something we should be able actually to get the only yo pretty much working for the console log and everything we go back in here and they just weekly refresh dance it's like disabled with live server because that's a little bit like socks and a little bit of like I don't know why since the last update buds we've got the bottom the hablo bottom everything what can be much fun let's come and try to browse something and let me just go and grab this image for example if you take a look on the console log we've got the image data so this is the image data image liova successfully you can go and copy the image d arick go into in like a new tab paste it there because since chrome will be able to like read this data and the data is like huge so it's like you know has a lot of the amount and will be able to get the actual data so that means we are successfully reading the data in here and we're getting the actual base64 encoding of the actual data pixels or the image pixels together say so every dish working very much fun and we've been able to do that correctly with no problems and yeah everything is working pretty much fine so you know we've got that much we've got everything under control so I think that was actually because for this tutorial those who really think as I totally wanted to like split back into two parts so it doesn't really look that ugly and like you know have a lot of informations to cover and stuff like this so just gonna cut one or you know all the way through this I'm just gonna continue in the older parts we're gonna continue that and created successfully with the preview that's show you in here with the lucky things in here you can click on this with mode you can add multiple images and you can obviously click in here and Apple arrays and provide the API to the actual server to use and it said in in synchronous requests through the image data alongside the way so yeah that was actually guys for this tutorial those are really contradiction just showing you how well they're going to do and we've created like the you know so far so good with the react complication we've got a couple of things we created the basic layout with like being able to read something from the Power Drive and stop I'm gonna continue in the next videos Rousseau over you guys you can stay tuned and I'll catch you guys in the next one