Hello so i wanna try to upload data from form to mysql server using react as frontend and node.js as backend. But i want to display/show the uploaded file as pdf not as BLOB. Is there a way to display the document/file as file in mysql so you can download the file easir or do you have to convert it in javascript? Thanks.
App.js
function App() {
const [employeeName, setName] = useState("");
const [employeeAge, setAge] = useState("");
const [employeePosition, setPosition] = useState("");
const [employeeSalary, setSalary] = useState("");
const [employeeFile, setFile] = useState();
const [dataList, setDataList] = useState([]);
const submitData = () => {
Axios.post('http://localhost:3001/api/insert', {
Name: employeeName,
Age: employeeAge,
Position: employeePosition,
Salary: employeeSalary,
Image: employeeFile
})
if(employeeName && employeeAge && employeePosition && employeeSalary && employeeFile != null){
alert("Berhasil ")
}else{
alert("Masukan Input")
}
}
return (
<div className="App">
<p>CRUD Applicaiton</p>
<div className="formControl">
<form>
<label>Name</label>
<input type="text" onChange={(e)=> {
setName(e.target.value);
}} />
<label>Age</label>
<input type="number" onChange={(e)=> {
setAge(e.target.value);
}} />
<label>Position</label>
<input type="text" onChange={(e)=> {
setPosition(e.target.value);
}} />
<label>Salary</label>
<input type="number" onChange={(e)=> {
setSalary(e.target.value);
}} />
<div className='fileUpload'>
<input type="file" onChange={(e)=> {setFile(e.target.value)}} />
</div>
<button onClick={submitData}>Add Data</button>
<button type='reset'>Reset</button>
</form>
</div>
</div>
);
}
export default App;
index.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require("cors");
const app = express();
const mysql = require('mysql');
const db = mysql.createPool({
host: "localhost",
user: "root",
password: "",
database: "coba"
});
app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({extended: true}));
app.post("/api/insert", (req, res) => {
const Name = req.body.Name
const Age = req.body.Age
const Position = req.body.Position
const Salary = req.body.Salary
const Image = req.body.Image
const sqlInsert = "INSERT INTO employee (Name, Age, Position, Salary, Image) VALUES (?,?,?,?,?)"
db.query(sqlInsert, [Name, Age, Position, Salary, Image], (err, result)=>{
console.log(result)
});
})
app.listen(3001, ()=> {
console.log('running on port 3001')
});