Single & Multiple Files Upload in React js With Progress Bar using Axios || Upload with Progress Bar

[Music] hello friends no create or uploading file so let's start react app and give any app name like client project hit enter this will take a while to complete the process so did now go to directory cd cd client project enter and simply type npm start to start the react application so here is our direct application no no go to bootstrap and copy this link home page version 4.5 i have been using so copy this link for css purpose paste expand public index html and paste in the head section for bootstrap let's minimize this and also these three links jquery bootstrap.js we have to include in the body section here that's fine now close this into html and go to source app.js first of all first of all remove remove we don't need this and also this style no the blank page let's start for design first also remove this logo the whole div class name class name container to go in the middle of the page e or single uh and multiple file load using merge stack express and react and node mustac technology we have to give the class name for style this only first check this knowledge here first text danger this will this texture found weight border to bold the font and border bottom bottom and also and also for text center let's check some some single small border and text red and bold and in the middle now now we have create first screen for a file upload folder screen like this and file file upload screen dot js react template and function name row margin top two r3 and div class name call dash six also six one one div column more now div class name form group and this we have a label single file select select single file and i have an input type file class to form control now we have a button div class name row div class name call dash 10. i have a button here type button and upload row and div class name called 6 for equal spaces or label label just as a title for gallery upload multiple images and input input type here text for title for multiple images class name form control single self-closing okay now in the second day i have to put this and just change the text for multiple select multiple files and just say attribute multiple type file and attribute multiple now go to browser c refresh the browser no because we have i have to add include here for upload for file upload screen this will automatically import on this and no i have to check on browser now this is a basic style for uploading we have to give the button btn clause like class name btn btn danger and also copy and here i have to paste for single file btn bt and danger now that's looking nice okay this will automatically open and select the file okay this is also working for multiple four files selected okay enter text okay now if you want to place holder here then and text field enter title for your gallery images etc whatever you want to add here now first no on change events and so we have to set on change on file change single file change i have to add a function event single single file change this will take event so you know we we are going to use hooks first of all imports the you know imports the hooks like a use state for state management and use effect for page load on data how to get data for payload single file set single file and use state initial value will be empty a string no cost multiple file set multiple files you state this this will also be a empty string create function const single file change single file change this will take an event arrow function set single file event dot target dot files and this will be a only zero first file only one file this is all single file and now on click upload single file upload single file how to add and create a function upload single file oh sorry upload single file this will be asynchronous function for a signal request i will go through this function after just tell just a bit later now for now also i have we have to add on change in this title event for title add here state cost title set title use state empty string initially now as set title event dot target dot value because this is a input string input field and also for multiple file on change event multiple multiple file change event let's create cost multiple file change event set multiple files event.target.files only because we have to we have to get all the files and also on click for multiple upload upload multiple files plus acsync function for handling async request first check to upload console dot log here single file and also console.log air multiple files go to whether i check these values in the file first single file selected that's this and just no you can see here single file selected this will file name file size image jpeg etc now for a multiple file selected this this this four selected by four selected file now upload and here are these list of four files one two three four length four file selected now let's start for install npm install axios and and react react dashes circular dash progress bar for checking this check for progress bar for progress on uploading file hit enter now for api pxs uh created folder data and file name we'll give the name epa.js first of all import axios from xu's and here define const api url string that that we have let's play to the terminal and cd server server project and enter nbm start or start store the ap server and here is the api url that i have created earlier and copy and paste here and include api slash here this will have base url and export export const give single file upload first to the server this will also be async request try catch throw error if any error otherwise await axios dot post api url plus here are routes for file single file upload and in the server project here and for simplified post request and for route is single file and i have to give the name like this party name in single file and here are data that we i had that we have received and go to file uploads again first import api data slash api and a single file upload function so output function no for single file upload i have to create first cost cost form data new form data and this variable this object for sending the file in form data and form data dot append first string file name that i have given here you have to put same name here and also here will be a form data dot append and single file that i have stored here okay and also a weight keyword on grab the function single file upload single file upload pause the form data only there is no need for console the file that's it for single file npm star knows let's check for single file upload select file just one file open and upload you see here in upload folder here we have one file for upload okay now let's grab the file in our main app.js section now div class container fluid give class name row div class have to margin top four fourth three or four five and everything anything you want call dash six just two here and from in this section um only had h3 h4 class name text dash success font weight bold and single files list here clause row of all first we have to make a function here for getting the single file from api cost get single files async function also try catch any error through error if any error and cost data await axios excuse dot get apa url plus for getting the file single file road we have single file api single quote get single files while we're using axios this will give a response in data and inside data inside data variable so object destruct like this in your modern javascript we have to and we have to we we cannot if we want to give without data or data so first so we just only distract the object and just data and return data only in app here first import api data slash api and get single file and also i also here import react from react and use state hook and use effect hook cost single file set single files you state you state this will be this will initially be an empty empty array and for cost multiple files set multiple files use state this will also be an initially an empty get single file list just we can give any any name async function for getting all single files from api try catch or any error console.log error avoid cost data like [Music] files list or array anything await get single files and set single files files list and on page upload page load loading we use use effect to get data and call that function while pages have been loaded and second will be and this will be a get single files list function here only single files files dot map because we want to map the array and here first file element or object and secondary index here we are row we have to i repeat in two column two so div class name call dash 6 and this div div for image div class name margin bottom two and border will be zero and also padding zero for image we have to add image img tag source we have to contact http colon colon local host to api url 8080 slash here we give the file dot file path all right 200 i200 alt attribute image and okay and also clause image cord dash image img dash top omg dash responsive this is the these are all boo booster class now let's check here is our first image that we have uploaded here no if we want to call this function when an image uploaded and call this function to get all get the latest data so we have to pause in the file upload screen props just easy get single here and get single files list we want to call this function from a flyer upload screen no props from here fileable screen so first we have to write here props and when we upload a single file then props dot get single file this will call the function this call this function when we upload a file and get the latest file latest images just like say now let's try upload another image open okay and this will only autum auto uploaded the server and server give the response back to the client here only no no for multiple file upload for a multiple file upload we have data multiple files in and title and from here let's say title and multiple file multiple in this variable add a function here api export const multiple multiple files upload async request data try catch try catch throw error if any error this will throw error to pause and console or print the actor now wait excuse dot post api url for multiple for multiple uh pi upload route route we have multiple files this will post and this is a selector for multiple files also title here and data only just like this and here comes form data new form data for file upload form data dot append first of all title and and this title field state where that we have set already and also form data dot append files array of files list of files no we have to render in for in for loop i just only and multiple files dot length and just we have to add this here and also multiple files i just like this and import here for multiple file upload function await upload multiple multiple file upload that form data that's it for multiple file files upload the server with title now let's check enter new gallery for food and select food item first first two three four five that's five files upload to server yep now let's check to the api folder now first we have two files only single file and then one two three four and five are also uploaded to the server now now let's show these files in uh render this from this images in the section images section is in gallery section first h4 class name text success text success font weight bold multiple [Music] multiple files list also here div class name draw now here because we we uh because we are adding a title with a multiple file so so and when we check here and multiple file is a single file and also in multiple files here we have an object like this and array of files here in the object of any property like variable files here and title here and youtube whatever you want and no we have to get all these files like this export export constant get multiple [Music] files async dry catch throw error and here cost data await axios dot get api url plus uh for multiple file upload get multiple file we have to add copy and paste here and string like this and we have to return data and also object destruct like this multiple file and get single file also also for multiple files get multiple files also function constant get multiple file guest get multiple files list a sync function here and try cache for any errors cost files just await get multiple files just like say here and set multiple files in this file list just simple and easy way and also get multiple files list function here while when when now check this multiple file first of all console to check the data multiple files go to browser and here is our object for and we have we have a title here and files variable this is also an array of files here and these are all files that we have uploaded earlier and the single font signal object and then array no here here we have to add multiple files dot map map element or any object whatever you want to give this name this single bracket small bracket and here and also leave the key for mapping otherwise this will give an console warning and error just like index or element dot id whenever we want to map an array we have to define a key unique key to give that array otherwise otherwise this will give an a warning error on the console h 5 r 6 class name text danger font wait bold here we have to get the title for gallery element dot title this the element.title okay no here we have to add an additive clause name draw um also element [Music] dot files also array we have to map for images file index and to pass here div class name in two column we have to call add called s6 and again only copy this for single file now let's here add because these are searched for multiple file renderer let's see here we have here our five files that we have uploaded and title here now for quality for this function we have to pause here get multiple attribute and call that function from the file upload screen get multiple files get multiple files list okay copy and here paste here props dot get multiple only now add some multiple files again and for now this time we have to i have i want to add only two files open and give them food items item just arrived now just check there upload and this will enter here food item title arrived and to file and uploaded and replica autocomplete now let no we have to i have to bind on the progress bar here while uploading a file progress bar bar will be showing and visible okay for progress ball i have i have already i have already installed a package react circular progress bar circular progress bar and for style here we have to add react progress dash dist dash style dash css for style purpose for very percentage like cost single progress for single file progress set single [Music] progress initially this will be a zero now axios give give us the progress for while while we are uploading a file from excuse first const single file file progress single file options that we have to that we have to pass to excuse on upload progress progress event here cost progress event two variable the given loaded file and total file size centage math dot floor uh first loaded divided by 1000 because this this loaded file size will be in bytes now we have to convert in kbs and multiply by first impression this this this submission will be slash total divided by 1000 to convert in kbs so this is a percentage and set set single progress to percentage now for single file but we have to pause this this is a second or second object like options like single file single file options here single file options and and find the api section for single file upload options that we have paused and options here only now just like that or multiple progress set multiple progress use state initially will be zero percent and we copy and page just only change the multiple options file options and set multiple progress okay pause the multiple file while you're uploading a multiple file here multiple file options and also in the ap section options and also here options just simple and easy div class div clause call dash 2 circular progress bar and here here we have to you we have to first value value will be single progress single progress that we have set here single progress and text that's showing and just like that single [Music] progress and percentage get and for a style this these are these are styles purpose style build style here i also have to include import build style here now let's check for a single file here give a zero percent and when while we upload a file just like say about 1.66 mb and while uploading this will be a hundred percent okay now file uploaded now again when on change we have we have your own change event and change i have to set single progress zero initially okay and change to add one more file 3.7 mb and just okay file upload it and will change this another file on chain this will be or reset okay just know for multiple files just copy and paste here and here multiple progress and just in here like this okay and also here for multiple progress okay now all set and one final thing on multiple files set multiple progress to zero when you change okay latest files latest food food items now select and this time we want to select all the items here all these files for bulk uploading with progress bar only i have selected 717 files now upload okay and these are all files uploading here latest four items 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 files all files are uploaded no for a single file let's go to zero okay and okay also uploaded now these are all working and progress were also working so that's it for file uploading with one stack technology like react on client set and node.js in this server side to upload a single file and multiple thanks for watching take care bye

Channel: Heart Of Programming

Views: 16,601

Keywords: progress bar, react progress bar, react file upload, file upload in reactjs, file upload using axios nodejs, axios, react with axios, file upload react js, upload progress, file upload, making a project with axios and react, show upload percentage in file upload react, progress bar tutorial, progress bar using css, react single file uploader component, react multiple files uploader component, express server with multer middleware, multiple file upload, image upload react js

Id: DfPJ1h16J-Q

Length: 57min 3sec (3423 seconds)

Published: Thu Jan 14 2021