Display uploaded image link to mysql-CodePudding

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>
  );
}

CodePudding user response：

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