How to create React files uploader Part 1

In this article we will create React file uploader.So what how it will look like. We have component we can choose file for example one   and we can click submit and as you see we have notification and we have this file as image also   we can upload markup multiple images or any other files it’s not a problem let’s click open submit  and as you see we have huge number of different files so let’s start and do it from the scratch  okay what do we have from the start we have client folder where we will have react application this application was created with the create react app it’s super simple and empty as you see it’s react   render application and nothing special objects is empty file almost empty component with one text   server folder is maim so let’s start and create the first component.

It will be file uploader   we need create new directory it will be components file uploader and the index.js and we need to return something we will use some bootstrap code let’s open this snippet link for this snippet will be in the video description so you can easily copy it as you see we have   prepared template it’s just html and cuss what we need we need this form let’s copy this form and we’ll return form new we have class name we have label   we have input let’s close it multiple empty string and form then let’s add button submit okay now we need add cuss let’s copy this cuss new file we put all the cuss as it is and don’t forget import in our application okay we have component let’s go to up jazz and import it from file uploader folder then we can use it easily and that’s it lets refresh our application.

It’s compiling   and as you see we have our component it’s what we need okay next we can open some file and it works almost okay the next part let’s add some logic we need go to file uploader index cuss index.js and for input we need add   on change function and the save input value so to do it lets create function the same yet target event target value we will get data and for our input on change we will call   on input change okay let’s take a look what do we have and as you see we have this file name okay it works the next we need to save this data to   state local state and when we click submit we will upload this file to save this data let’s use let’s import use state from react and we need the cost use date null by default the next we will use set file this target value and we have file but as you see is only a path to get data we need use file files zero because of by default it saves two files okay let’s console work let’s choose something okay.

As you see we have file list structure with zero element we have all   data about this file it’s a type size name and a lot of additional we will save this data to   state file and okay the next what we need we need when we click submit or in general   when we submit this form we need to send this data to server how to do it it’s easy on submit let’s create function submit handler first of all we need prevent default behavior it’s page refreshing the next one what we need we need   send this data how we can send this data we will use popular library axioms I guess if you work   with react you know how this library works we need to install this library so let’s go to cd client yarn add axioms and meanwhile we need on submit.

We need create data what we will upload so let’s use cons data it will be new form data it’s special binary format for saving binary data like images   or any other files and the next one we need data opened set name it will be file and file it’s what we saved from on input change we save this file okay we have this file and now the next   step we can submit this datum so we will use axioms don’t forget to import axles from axioms and axials pause where we will post it will be localhost 8000 upload and data then if everything was successful the uploaded will show success otherwise if there was error catch okay super simple be here let’s try what we have choose some file let’s click submit and as you see we have network error let’s open network   of course we don’t have this file we don’t have serve.

The next step we will create server with node.js to do it let’s go to server library and we will create new file server yes we will use express   it means we need install express let’s open new tab we will go server and   what do you need install first of all its express so yarn add express then we need the matter library for handling uploading files then course Microsoft we will upload our file from localhost   3000 to localhost 8 000 the different ports it means we will have course issue   and for development work we will use node not demo not demon just to simplify our work let’s install everything.

The next in our server just what do we need we need the cons to express the next cost motor we have all libraries we need then let’s create   application cost up it will be express super simple easy next one let’s add middleware app   use course as I mentioned before as we have different ports we need different we need   handle course issue and the next one we need create storage for files to do it we will create disk storage we have two confit parts the first one is destination it will be functioned it requires request file and call back so we put public it’s a name of folder where we will save our data and the next file name its function the same forms we will create file name.

so let’s call callback with first it’s null then we will create the name by date now so format will be the next we have storage destination it will be saved in public folder   file name will be created based on date now it’s timestamp of current time   dash and the original file name it guarantees that we will have unique names the next we need create upload we will use molder we’ll pass storage as a storage and single   file it means that we will use we will save only one file.

Leave a Comment

Your email address will not be published. Required fields are marked *