Display uploaded image link to mysql - mysql

Question

this is my first project i made using react, node, and mysql. i have a form that contain data and upload file. I have succesfully uploaded file into node and stored it inside folder. The problem is i want to make a link to that uploaded file, so i can insert the link to mysql. This is so a person accessing the database can download the file. Is there a way to do that ?
index.js back end
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'Images')
},
filename: (req, file, cb) => {
cb(null, Date.now() + path.extname(file.originalname))
}
})
const upload = multer({storage: storage});
app.post("/upload", upload.array('DocumentFile', 10), (req, res) => {
const Currency = req.body.Currency
const Title = req.body.Supplier
const Email = req.body.email
const InvoiceNo = req.body.InvoiceNo
const Invoice_Date = req.body.Invoice_Date
const Amount = req.body.Amount
const Description = req.body.Description
const Attachments = req.files[2]
q = "INSERT INTO payg(InvoiceNo, InvoiceDate, Title, Currency, Amount, Attachments) VALUES (?, ?, ?, ?, ?, ?)"
db.query(q, [InvoiceNo, Invoice_Date, Description, Currency, Amount, Attachments], (err, result) => {
console.log(Attachments)
res.send("Uploaded")
})
})
App.js
function App(props) {
const [invoice, setInvoice] = useState("");
const [date, setDate] = useState ("");
const [currency, setCurrency] = useState ("IDR");
const [amount, setAmount] = useState("");
const [title, setTitle] = useState("");
const [path, setPath] = useState("");
const [attachment, setAttachment] = useState("");
const [dataList, setDataList] = useState([]);
Axios.defaults.withCredentials = true;
return (
<div className="App">
<BasicExample />
<div className='formInput'>
<form method='POST' encType='multipart/form-data' action='http://localhost:3001/upload'>
<div className='textUser'>
<h1>{props.data}</h1>
</div>
<input className='inputForm' type="email" placeholder='Email - Disabled' name='email' disabled />
<input className='inputForm' type="number" placeholder='Invoice No' name='InvoiceNo' />
<input className='inputForm' type="date" placeholder='Date and Time' name='Invoice_Date' />
<input className='inputForm' type="text" placeholder='Description' name='Description' />
<select className='selectBox' name='Currency' onChange={(e)=> {
setCurrency(e.target.value);
}}>
<option value="IDR">IDR</option>
<option value="USD">USD</option>
<option value="YEN">YEN</option>
</select>
<input className='inputForm' type="number" placeholder='Amount' name='Amount'/>
<input className='custom-file-upload' type="file" name="DocumentFile" />
<button className='btnSubmit'>Submit</button>
</form>
</div>
</div>
);
}

Answer 1

If you have saved the image to a folder in your server node (eg ./your-folder/your-file-name.png). You can get that file name and save it to the database.
To access that file from express API:
app.get("/image", (req, res) => {
const filename = req.query.filename;
res.sendFile(filename, {
root: `./your-folder/`,
});
});
Get with url (at port 5000): http://localhost:5000/image?filename=your-file-name.png