Image and File Uploading in React JS with Axios and FormData

hey everyone welcome back to coded YouTube channel in this video we will talk about how to upload image in react.js okay so first of all I will light I have created a react app okay and I have created this image upload file so I will start my coding here I have here the interesting input field okay but that's equal to 5 okay also we will have a button so this should be wrapped in single element so yes so now whenever we click on our file so we should save our file to a state okay then I will just write and change whenever the our input field change so we will have and uh image okay so now I will create that function here function handle image okay and we will save this file name to our to a state okay to a state whatever I will create a state Advanced image set image okay it's equal to use state by default value is empty string with us so now we will set this image to the file we have uploaded okay that is it image again here you will pass the event e dot Target dot files zero okay the zero value or file is in files zero so we will just uh use the console to see it console.cloud either Target dot file okay you will just see that files so let's run our server what happened start foreign export our component thanks for default image upload okay so let's okay let's select a file okay I have selected this file okay so let's see it canceled yeah we have this file list okay and zero index in the first we have our image okay file name use effect.png okay the name of that file is this effect dot PNG so now let's perform the action of our submit button or whenever we are submitting our Forum okay on click we will handle API okay so here I will create the function hello API so first we will create an object of forum data we would like to send our data using Forum data in Forum data again transform data is equal to new form data okay we have created the object now we will append all our videos all our data that we have in our Forum we will append that to the Forum data object okay forum data dot up paint yes you know okay first of all we have the name for example we have image the name is image okay image and the video with us is image okay that variable will visit our image file okay and that's why we type in other values if you have in your form so now we will use the axis to force that axis dot not just access yeah X is that post yeah here will be our URL do you already will you would like to post your image and here we will have our form data in okay then we will have the result okay console.log our present so it is all about uploading the image using react cheese okay we will use the Forum data object and then we will definitely all our values with perfect object so then we will pass that to the URL where we would like to store our image so it was all about image uploading so if you like the video please subscribe our YouTube channel thanks for watching

Channel: Code With Yousaf

Views: 60,089

Keywords: react image upload, image upload in react js, react file upload, upload image react js, image upload react, image upload react js, upload image react js axios, upload image reactjs nodejs, react tutorial, react, upload image in react js, file upload, show upload percentage in file upload react, how to upload images in react, how to upload image in react js, how to upload images in react js, profile image upload in react js, multiple image upload in react js

Id: YOGgaYUW1OA

Length: 5min 40sec (340 seconds)

Published: Wed Sep 21 2022