Cloudinary React attachment upload is very slow - mysql

Question

I have a file upload feature using Cloudinary in my React app. When I uploaded the file, it is saved to both Cloudinary and MySQL. I managed to upload things including PDF documents, however the upload is very slow. It takes more than 10 seconds to redirect to a new page after a successful upload. I am just wondering how I could improve it since it is affecting my system's performance.
Front-end
import React, {useState, useContext} from 'react'
import {Form, Button, Card} from 'react-bootstrap'
import Axios from 'axios';
import { useHistory } from 'react-router-dom';
function AddAttachment() {
const history = useHistory();
const [fileSelected, setFile] = useState();
const uploadImage = async(e) => {
e.preventDefault();
const formData = new FormData();
formData.append("file", fileSelected);
formData.append("upload_preset", "xxxxx");
const r = await Axios.post("https://api.cloudinary.com/v1_1/xxxxxx/image/upload", formData).then((response) => {
Axios.post("http://localhost:3001/uploadattachment",{
imageUrl: response.data.secure_url,
}).then(() => {
window.alert('You have successfully uploaded an image!');
history.push(`/viewproject`);
})
})
}
return (
<div className="d-flex justify-content-center">
<Card style={{ width: '70%' }}>
<Form onSubmit={uploadImage} className = "m-3 p-5">
<Form.Group className="mb-3" controlId="image">
<h3>
Add new attachment
</h3>
<hr/>
<Form.Control type="file"
onChange={(event) => {
setFile(event.target.files[0]);
}}
/>
</Form.Group>
<div className = "d-flex flex-end justify-content-end align-items-end mt-3">
<div>
<Button type = "submit" style={{color:'white', backgroundColor:'#104271'}}>Save</Button>
</div>
</div>
</Form>
</Card>
</div>
)
}
export default AddAttachment
Back-end (NodeJS)
app.post("/uploadattachment", (req,res) => {
const url = req.body.imageUrl;
try{
const addPicture = "INSERT INTO project_attachment(project_attachment_url) VALUES (?);"
db.query(addPicture, url, (err, result) => {
res.send(result);
})
}
catch(err){
console.log(err);
}
})
Just wondering if there are any part of my codes that could be improved? Thank you!

Answer 1

I don't know if this will improve your performance, but it will improve your code.
I strongly recommend you to do the upload in your backend using the npm package that cloudinary has, also it has transform and optimization assets.
With this you will call to your backend and it will be the responsible of handling the files repository and database. And your front-end will be cleaner
Hope it helps you.
app.post("/uploadattachment", (req,res) => {
try{
const upload_result = await cloudinary.v2.uploader.upload(req.file, {upload_preset: req.preset});
const addPicture = "INSERT INTO project_attachment(upload_result.secure_url) VALUES (?);"
db.query(addPicture, url, (err, result) => {
res.send(result);
})
}
catch(err){
console.log(err);
}
})