Image Upload In React JS [ How to Upload File in React JS using Axios ]

Step 1 : npm i axios

Step 2 : replace App.js with the following code

import { useState } from "react";
import axios from "axios";

function App() {
  const [image, setImage] = useState('')

  const handleChange = (e) => {
    console.log(e.target.files)
    setImage(e.target.files[0])
  }

  const handleApi = () => {
    //call the api
    const url = ''

    const formData = new FormData()
    formData.append('image', image)
    axios.post(url, formData).then(result => {
      console.log(result.data)
      alert('success')
    })
      .catch(error => {
        alert('service error')
        console.log(error)
      })
  }

  return (
    <div>
      IMAGE UPLOAD
      <input type="file" onChange={handleChange} /> <br />
      <button onClick={handleApi} >SUBMIT</button>
    </div>
  );
}

export default App;

For Image Preview Check the second part of the video : (both videos below )

PART 1

PART 2

Comments

Shopping Cart React.js Project with Explanation✅ [ Simple Ecommerce Website using Reactjs ]

Hello guys in this video we will discuss shopping cart web app. first we need to install the basic react app using - npx create-react-app app-name The folder structure should be containing three files in components folder as below : In App.js : import './App.css' ; import Header from './components/Header' ; import ProductList from './components/ProductList' ; import CartList from './components/CartList' ; import { useState } from 'react' ; function App () { const [ product , setProduct ] = useState ([ { url : 'https://rukminim1.flixcart.com/image/300/300/l51d30w0/shoe/z/w/c/10-mrj1914-10-aadi-white-black-red-original-imagft9k9hydnfjp.jpeg?q=70' , name : 'TRQ White Shoes' , category : 'Shoes' , seller : 'AMZ Seller Ghz' , price : 1999 }, { url : 'https://5.imimg.com/data5/KC/PC/MY-38629861/dummy-chronograph-watch-500x500.jpg' , n

MERN Authentication - Login, Register, Verification Email, Forget Password, User Name & Logout on Navbar

In The React Side : The folder structure will be : Lets start from App.js On this file we will be adding routing , install the package react-router-dom : import './App.css' ; import React from 'react' ; import { BrowserRouter as Router , Routes , Route , Link } from "react-router-dom" ; import Signup from './components/Signup' ; import Signin from './components/Signin' ; import Home from './components/Home' ; import ForgetPassword from './components/ForgetPassword' ; import NewSubmit from './components/NewSubmit' ; function App () { return ( < div > < Router > < Routes > < Route path = "/signup" element = { < Signup /> } /> < Route path = "/signin" element = { < Signin /> } /> < Route path = "/" element = { < Home /> } /> < Route

API Call In React JS using Axios [ React Form Submit To API ]

Step 1 : npm i axios. Step 2 : Create form with email and password. Step 3 : create state to store email and password. Step 4 : Store the value in state using onChange method. Step 5 : Call the Api with data stored in state. Step 6 : Handle Error and Success. App.js Code below : import { useState } from "react" ; import './App.css' ; import axios from "axios" ; function App () { const [ email , setEmail ] = useState ( '' ) const [ password , setPassword ] = useState ( '' ) console . log ({ email , password }) const handleEmail = ( e ) => { setEmail ( e . target . value ) } const handlePassword = ( e ) => { setPassword ( e . target . value ) } const handleApi = () => { console . log ({ email , password }) axios . post ( 'https://reqres.in/api/login' , { email : email , password : password }). then ( result => { console . log ( result .

Saifi Code

Search This Blog