React Upload

 

const express=require("express");

const app=express();

const multer=require('multer');

const path=require("path");

const {GridFsStorage}=require("multer-gridfs-storage");

const { request } = require("http");

const cors=require("cors")

app.use(cors())

// storage

const storage=new GridFsStorage({

    url:'mongodb+srv://user:user@cluster0.ayogb.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',

    options:{useNewUrlParser: true, useUnifiedTopology: true },

    file:(request,file)=>{

        const match=['image/png','image/jpg','image/jpeg']

        if(match.indexOf(file.mimetype)==-1){

            return `${Date.now()}profile${file.orginalname}`;

        }

        else{

            return{

                bucketName:'photos',

                filename:`${Date.now()}profile${file.originalname}`,

            }

           

        }

    }

})

// storage

// const storage=multer.diskStorage({

//     destination:(req,file,cb)=>{

//         cb(null,"./uploads")

//     },

//     filename:(req,file,cb)=>{

//         const fileExt=path.extname(file.originalname);

//         const fileName=file.originalname.replace(fileExt,"")

//         .toLowerCase().split(" ").join("-")+"-"+Date.now()

//         cb(null,fileName+fileExt);

//     }

// })

// const upload=multer({

//     storage:storage,

//     limits:{

//         fileSize:1000000

//     },

//     fileFilter:(req,file,cb)=>{

//         if(file.mimetype==="image/jpeg" ||file.mimetype==="image/png" || file.mimetype==="image/jpg"){

//             cb(null,true)

//         }

//         else{

//             cb(null,false)

//         }

//     }

// });

const upload=multer({storage});

const uploadImage=(req,res)=>{

    console.log("helllloooo");

    try {

        if(!req.file)

        return res.status(404).json("File Not Found")

    console.log("done");

    console.log(req.file);

    const imageURL=`rifatewu/file/${req.file.originalname}`

    res.status(200).json(imageURL);    

    } catch (error) {

       

    }

   

}

app.post("/",upload.single("file"),uploadImage);

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

//     console.log(req.file);

//     res.send("Hello World!");

// })

app.listen(3500,()=>{

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

})

App,js

import './App.css';

import {useEffect, useState} from 'react'

import axios from 'axios';

function App() {

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

  useEffect(() => {

    const getImage=async()=>{

      if(file){

        const formData=new FormData();

        console.log("gelam");

        formData.append("name",file.name);

        formData.append("file",file)

        await axios.post("http://localhost:3500/",formData)

      }

     

     

    }

    getImage();

   

   

  }, [file]);

 

  const submitForm=async()=>{

   

  }

  return (

   

    <div className="App">

     

        <input onChange={(e)=>setFile(e.target.files[0])} type="file" name="avatar" id="" />

        <input onClick={submitForm} type="submit" value="Upload" />

     

    </div>

  );

}

export default App;