Use react to store binary data to SQL Server - node.js

Question

I'm working on a feature that allows the user to upload a pdf to a SQL Server database. The user clicks a button to open a file dialog and selects the pdf they want to upload. The SQL Server database takes a varbinary(max).
I'm using base64 to encode the file, however I am getting an error saying
RequestError: Implicit conversion from data type varchar to varbinary(max) is not allowed. Use the CONVERT function to run this query
Looks like I'm sending a string, not binary.
Here is the code I'm using:
React.js
import React, { Component } from 'react';
import './styles.css';
import base64 from 'base-64';
class SaveSDS extends Component {
constructor() {
super();
this.state = { user: {} };
this.chemNameField = React.createRef(); // create ref for first name field
}
state = {
file: null
}
handleFile(e) {
e.preventDefault();
let file = e.target.files[0];
this.setState({file: file});
}
handleUpload(e){
e.preventDefault();
const data = new FormData();
let file = this.state.file;
data.append('file', file)
var r = new FileReader();
fetch('http://localhost:5000/db', {
method: 'POST',
headers: { "Content-Type": "application/json" },
mode: 'no-cors',
body: JSON.stringify({
chemName: this.chemNameField.current.value,
chemPDF: base64.encode(data)
})
})
.then((res) =>{
console.log(res)
});
}
render() {
return (
<div className="submitForm">
<div style={{padding: "10px"}}>
<input className="fileButton" type="file" accept=".pdf" name="file" onChange={(e) => this.handleFile(e)} />
</div>
<input type="text" style={{width: "50%"}} placeholder="Enter chemical name" ref={this.chemNameField} />
<br />
<button type="button" onClick={(e) => this.handleUpload(e)}>Upload</button>
</div>
);
}
}
export default SaveSDS;
And here is what I'm using on the express side:
Server.js
const express = require('express');
const bodyParser = require('body-parser');
var sql = require("mssql");
const app = express();
app.use(bodyParser.json());
app.use(express.json({
type: ['application/json', 'text/plain']
}));
var config = {
user: 'user',
password: 'pass',
server: 'localhost',
database: 'Master'
};
app.post('/db', function(req, res) {
console.log(req.body)
res.set('Access-Control-Allow-Origin', '*');
let connection = new sql.ConnectionPool(config, function(err) {
let request = new sql.Request(connection);
request.query("insert into chemicals (chemName, chemPDF) values ('" + req.body.chemName + "', '" + req.body.chemPDF + "')");
});
});
const port = process.env.PORT || 5000; //get the process port
app.listen(port, () => console.log(`Server running on port ${port}`));
Is it even possible to send binary to the backend from react, or would it be easier to convert to binary on the backend? Maybe my approach is totally wrong.
Basically I want the user to be able to upload a file, then allow other users to open and view that file. I've done this in C# by uploading binary to SQL Server, then decoding it so people can view it. Not sure if that translates to node/react.
Thanks!