Multer React Node Js - Google Docs

Multer React Node Js
Partie FE :
const [ Image , setImage ] = useState ({});
const [ DisplayImage , setDisplayImage ] = useState ( "" );
const imageDimensions = ( file ) =>
new Promise (( resolve , reject ) => {
const img = new Image ();
// the following handler will fire after the successful loading
of the image
img . onload = () => {
const { naturalWidth : width , naturalHeight : height } = img ;
resolve ({ width , height });
};
// and this handler will fire if there was an error with the
image (like if it's not really an image or a corrupted one)
img . onerror = () => {
reject ( "There was some problem with the image." );
};
img . src = URL . createObjectURL ( file );
});
const onChangeImage = async ( event ) => {
const file = event . target . files [ 0 ];
try {
const dimensions = await imageDimensions ( file );
console . info ( dimensions );

} catch ( error ) {
console . error ( error );
}
setDisplayImage ( URL . createObjectURL ( file ));
setImage ( file );
};
const submitForm = () => {
const formData = new FormData ();
formData . append ( "X" , X );
formData . append ( “image" , Image );
};
return (
<IconButton color="primary" aria-label="upload picture"
component="label">
<input hidden accept="image/*" type="file" />
<PhotoCamera />
</IconButton>
)

partie BE :
1 - création d’un nouveau dossier images
2- install multer with cmd npm install multer
app .js :
const path = require ( "path" );
const multer = require ( "multer" );
app . use ( "/images" , express . static ( path . join ( "backend/images" )));

// cofiguration d'image
const MIME_TYPE = {
"image/png" : "png" ,
"image/jpeg" : "jpeg" ,
"image/jpg" : "jpg" ,
};
const storage = multer . diskStorage ({
// destination
destination : ( req , file , cb ) => {
const isValid = MIME_TYPE [ file . mimetype ];
let error = new Error ( "Mime type is invalid" );
if ( isValid ) {
error = null ;
}
cb ( null , "backend/images" );
},
filename : ( req , file , cb ) => {
const name = file . originalname . toLowerCase (). split ( " " ). join ( "-" );
const extension = MIME_TYPE [ file . mimetype ];
const imgName = name + "-" + Date . now () + "-product-" + "." +
extension ;
cb ( null , imgName );
},
});
app . post ( "/add_product" ,
multer ({ storage: storage }). single ( "image" ) ,
( req , res ) => {
let host = "http://" + req . get ( 'host' )
const product = new Product ({
name: req . body . name ,
price: req . body . price ,
quantity: req . body . quantity ,
category: req . body . category ,
image:host + "/images/" + req . file . filename ,

});
product . save (). then (() => {
res . status ( 200 ). json ({
message: "product added" ,
});
});
});