Cloudinary linked

 Backend:

const express=require("express");

const app=express();

const cors=require("cors")

const dotenv=require('dotenv');

const cloudinary=require("cloudinary").v2;

dotenv.config();

app.use(cors())

cloudinary.config({

    cloud_name:process.env.CLOUDINARY_NAME,

    api_key:process.env.CLOUDINARY_API_KEY,

    api_secret:process.env.CLOUDINARY_API_SECRECT

})

app.use(express.json({limit:"50mb"}));

app.use(express.urlencoded({limit:"50mb",extended:true}))

app.post("/upload",async(req,res)=>{

    try {

        const fileStr=req.body.data;

        const uploadedResponse=await cloudinary.uploader.upload(fileStr,{upload_preset:"dev_setup"})

        console.log(uploadedResponse);

        res.json(uploadedResponse.url)

    } catch (error) {

        console.error(error);

    }

});

app.listen(3500,()=>{

    console.log("Server is running at port "+3500);

})

Frontend:

import './App.css';

import {useEffect, useState} from 'react'

import axios from 'axios';

function App() {

  const [file, setFile] = useState("");

  const [selectedFile, setselectedFile] = useState("");

  const [preview, setPreview] = useState("");

 

  const handleInput=(e)=>{

    const fileValue=e.target.files[0];

    previewFile(fileValue)

  }

  const previewFile=(image)=>{

    const reader=new FileReader();

    reader.readAsDataURL(image);

    reader.onloadend=()=>{

      setPreview(reader.result)

    }

  }

  const handleFormSubmit=(e)=>{

    e.preventDefault();

    if(!preview)return

    uploadImage(preview);

  }

  const uploadImage=async(base64EncodedImage)=>{

   

    try {

      await fetch("/upload",{

        method:"POST",

        headers:{"Content-type":"application/json"},

        body:JSON.stringify({data:base64EncodedImage})

      })

    } catch (error) {

      console.log(error);

    }

  }

  return (

   

    <div className="App">

      <form onSubmit={handleFormSubmit}>

        <input onChange={handleInput} type="file" name="image" value={file} id="" />

        <input type="submit" value="Upload" />

        </form>

      {preview &&(

        <img src={preview} alt=""  style={{"height":"300px"}}/>

      )}

    </div>

  );

}

export default App;