How to upload files with React and NodeJS part 2

what we need the last part is the easiest we need create endpoint to save this data so up post upload request response it’s arrow function we have upload let’s use it pass request response and the callback function is possible error if we have error let’s return response state to 500   and the son error so we will return this error otherwise we return status 200 everything was ok and send request file   it’s what its final information about file we used we uploaded and that’s it   but the most important part we need to run our application up listen 8 000. okay we finished our application what do we have we import all modules we create application with express we added model course middleware we   created storage where we said public folder will be a folder where.

we will save datum the next one we created upload it’s storage we will use   where we will save this information and we have endpoint upload we use this endpoint to send datum   and we have application now we can run so use node demon as we see we have application and now on our network   let’s refresh let’s choose file and click submit and as you see we have error file   100 why because all we need create folder public node.js can create this folder public okay we created this folder let’s try again let’s click submit as you see we have 200 everything was saved successfully as you see in preview in response   we have destination it’s a folder weight was saved we have some encoding we have file name and field name and file name and the final path Passover this file was saved public and file name and of course we have size.

As you see we save this data also we can open public and in public folder we have this file ok the next step let’s add the possibility to upload multiple files what do we need we go to   uploader for the form let’s change multiple we will allow uploading multiple files the next step   let’s rename files then it will be array set files and save all files note the first one okay and what we need we need create data open all data to it we will use four so why we can’t use for each method for files because all files is not array it’s as we remember it’s a special format file it’s a clause okay but we can use easily for cycle   and now.

We will append the data files index okay data we have we can just delete this part then we send this data and okay the next part is   update on the server port on the server we have single and name file let’s change it to array we have the same storage and that’s it file server was is restarting now let’s open network refresh our page and try to choose multiple as you see we can choose   four or more files let’s click open and submit so we have upload   we don’t have preview but all files were saved why we don’t have a preview we need update this but request files as its multiple files we need update to files and now let’s try choose let’s click submit we have upload and as you see we have responses array of two   file name.

The first one and the second one as you see we have everything what we need   the next important part is validation client-side validation is not safe and not the best place but   anyway we have on change method where we’re saving these files so easily you can check all datum let’s put the bugger and take a look what do we have we click submit and as you see we can take a look at our files it’s file list and we have as I mentioned before   we have type and name and also size in this place you can check maximum file size to set some   minimum or maximum value also you can check type of file is it image or something else if you need   only images you can check is it the pang geek or any other picture file and validate this data   okay.

The next step what I want to show you is let’s add some notification that file was   successfully uploaded to do it we will use the library called testify yarn and justify and to be sure we need install react justify here and okay what do we have in this this component let’s go to up jazz and we need the container for testify we will use import let’s put this container all notifications will be saved in this container and the next part let’s go to components file uploader we need function called toast and inside let’s replace console.log with toast success and for error okay this is it now let’s choose some file click submit and the next important part we need the as you see we have notifications we need add   cuss let’s return to our objects and just put this react ds file this real testify cuss okay let’s choose file click submit and as you see we have this super nice notification.

The next what I want to show you it’s showing these images on them on the page how to do it as we know we returning data from backend we need create a new file it call component it calls   preview index is what do we need export cost it will have files and if we do not have files we return now otherwise return files map we have file and we need to return image source what will be the source let’s open the network we have file name and we need the   file name file name also as adder alt it will be file   original name so preview simple the next one in up is let’s import preview next we need output it and we need pass datum where we will get this   data we will get it we will get it from file uploader and we will save it in stop state we need react state.

It will be empty array and in file uploader we need paths on success function for example and when we save data on submit   we show notification and on success datum on data it will be then there is response we need response data it will be this array of   files okay we have it we have on success let’s put file uploader on success on success is just a function let’s call it saved files and in preview files files okay so from file uploader we saved   files when we saved these files we call on success save information to files state   and then pass it to preview component   okay let’s refresh our application let’s do this part let’s hide console and the choose files let’s open two and click submit   okay and as you see it doesn’t work why doesn’t work because of we need update server part right now what do we have we have endpoint but.

We don’t have a static server for sharing static files to do it it’s easy with additional middleware up use express static and public is the same name of directory let’s try server was restarted okay we forgot to put in preview it’s not only file name we need to localhost so don’t forget to put server address okay let’s open let’s choose a few files let’s click submit.

Leave a Comment

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