Uploading Images in React with a Progress Bar: A Step-by-Step Guide

yeah the result of this video would be to upload a file in react.js if with the progress file okay and display that back so this will be the end result let's get started this video is about to upload a file in react.js with progress bar so let's get started I have created my react app ly upload.js and I imported it in the index.js okay so now let's get started react functional component text code it will automatically generate this let's add a class name Flex 65 it is the bootstrap classes you can use children CSS material UI error someone else or css to one another two pages should be white budding should be five and rounded should be five or we can simply see which should be 15. foreign after this let's create an input field okay create input field and the type should be file and whenever we click we change the file we should call an event when we take in a file we click on this we should call this method and file okay and let's create a progress bar here so to create the promise bar we will use the bootstrap okay for that I have imported the bootstrap here in the index file so now let's create first of all the class and a class name progress bar to this after that create another view industry to this and after that the Progress power [Music] after that assign rule to this rule would be progress power and the area label would be animated prove this bar just for respond and the area value now we will generate it dynamically okay here is equal to minimum value will be zero and area video Max would be under it and I'll send its add a style we will add width to this equal to it width will be dynamically we will generate that okay so now we will create this function here Intel file before that we will keep two State variable the first one would be the image set image is equal to U state and the second would be for the dynamic group progress bar it is equal to use by default value is 0 with us now let's create the function const ant is equal to a function is dot Target we will create a variable const equal to event dot get Dot files zero and after that we will create an object of form data getting the equivalent file to this now for this now we will call our API and we will pass our data so I will use that XCS Library you can use fetch function XCS access is imported dot post you use for that here you will that your URL and here the Forum data you are data should be first from data and after that let's create the headers the heaters would be you will pass the content type content type should be volte but it is for the file multi-part 4 data if that lets on upload progress okay and upload progress event and here we will sit our progress bar now since progress bar now and we will use the math function objected around function okay after that he is handed it apply by [Music] event.loaded he went out and loaded and divided by event dot total okay we set that dynamically after that dot thing we will get a result response and we will set our image set image and we change our image path okay we will get the path of this and we will write something like this URL dot rate object create objective RN and we will write that um we will first our five minutes okay if there was any error it is just to display okay we don't or the reality we are not passing any data right now we don't know any real bus we will show you the progress part for that okay but the uploading file is this is the way okay you will just add your url here now let's read our progress bar here and so here it would be generated and we will join the percentile sign with that and now we can display it also okay if you would like to display your photos bar so we can display the image okay we can display our image now so I will write image and here I will write this RC is equal to with the image that we have okay we have created the image here we'll use that and let's see where it will be 100 and we can sit 75 in Heights between 75 so now let's run the server and then start so the server will start now okay right now we should not see this let's press this we don't have the progress bar so let's check it probably cities programs with us so let's check it let's refresh our page and let's press this one see the processor okay so the image didn't display it okay we should write here think like this image and sorry by image but we are not getting the response here okay the reason is that we are not getting the response that is we are getting an error okay we didn't pass our emitter the reality but instead of that what I will do I will copy this and I will set my image here okay sitting image I will pass this let's depreciate see it it is working now okay so it is all about uploading an image and displaying that and the browser and react yes with the progress bar if you like this video so please subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 5,600

Keywords: React, Image uploading, Progress bar, Cloudinary, JavaScript, Front-end development, Web development, File upload, UI/UX, React libraries, image upload in react, react image upload, image upload with progress bar, react image upload with progress bar, progress bar with file upload, file upload in react with progress bar

Id: 1gIvsmNQTlg

Length: 10min 56sec (656 seconds)

Published: Mon Feb 27 2023