React file uploader. Beginners guide. How to upload files with React and NodeJS.

Welcome on TravelsCode channel. In this  video 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 mkim 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 css what  we need we need this form let's copy this form and we'll return form 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 css let's copy this css new file we put all the css 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 let's 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 css  index.js and for input we need add   on change function and the save  input value so to do it let's 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 const 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 and 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 axios 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 axios 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  axios don't forget to import axles from axios 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 server   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 it's express  so yarn add express then we need the malter 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 express the next const motor we have all libraries we need then let's create   application const 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  config parts the first one is destination it will be functioned it requires  request file and call back so we put public 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 its 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 moulder we'll  pass storage as a storage and single   file it means that we will  use we will save only one file and 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 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 json error so we will return  this error otherwise we return status 200 everything was ok and send request file   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 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 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 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 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 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 png gpek 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 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   css let's return to our objects and just  put this react sd file this real testify css 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 js what do we need export const 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 image source 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 addrem alt it will be file   original name so preview simple  the next one in up js let's import 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 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 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 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   and as you see we have all these  files saved also let's add them some css and as you see we have all these files uploaded  so everything is done implemented you can find   the final code in my github repository link will  be under the video description don't forget to   take a look at also we'll be happy to  see you soon don't forget to subscribe   my youtube channel and soon you will see much  more interesting react or javascript tutorials

Channel: Travels Code

Views: 39,179

Keywords: Travels & Code, TravelsCode, Travels Code, react, javascript, file upload, react file upload with preview, react file upload, react file upload progress bar, react file upload drag and drop, react file upload with express, react file uploader, react file uploader tutorial, how to upload file with react, how to upload files with react and nodejs

Id: iD5qRL7dI-E

Length: 34min 44sec (2084 seconds)

Published: Mon May 17 2021