Okay I am using react js and parcel along with google apps script to create web application. Every think working fine and all entries are getting save into google sheet but problem is when it comes to file upload input it only saving local path of file instead of uploading the document into google drive. It is working fine with vanilla JavaScript but don't know why its uploading document what the issue any help much be appreciated.
App.js
import React from "react";
import { useState } from "react";
export default function App () {
const [values, setValues] = useState({
email: "",
firstname: "",
screenShot: ""
})
const handleInputChange = (e) => {
const { name, value } = e.target;
setValues({ ...values, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
google.script.run.appendEntry(values);
}
return (
<>
<form onSubmit={handleSubmit}>
<input
className="form-control form-control-sm"
name="email"
type="email"
value={values.email}
onChange={handleInputChange}
placeholder="Email"
/>
<input
className="form-control form-control-sm"
name="firstname"
type="text"
value={values.firstname}
onChange={handleInputChange}
placeholder="First Name"
/>
<input
className="form-control-file"
type="file"
name="screenShot"
value={values.screenShot}
onChange={handleInputChange}
placeholder="Upload Screenshot"
/>
</form>
</>
);
}
Code.gs (backend code)
const SheetURL = "https://docs.google.com/spreadsheets/d/1-zrE_wEoNFaFuGh_9CBvy6shqIBNhaaoML875BLnUxQ/edit#gid=165730349";
const SS = SpreadsheetApp.openByUrl(SheetURL);
const WorkSheet = SS.getSheetByName('Portal Responses');
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.addMetaTag("viewport", "width=data.device-width, initial-scale=1.0")
}
function appendEntry(data) {
let folder = DriveApp.getFolderById("191THLqPpVIT-1Pdj1ylm1QEskOtV31HD")
let fileUrl = "";
if (data.screenShot.length > 0) {
let blob = data.screenShot;
let file = folder.createFile(blob)
file.setDescription(`Uploaded by ${data.firstname}`)
fileUrl = file.getUrl();
} else {
fileUrl = "No File Uploaded";
}
let entryWithFile = new Array(
new Date(),
data.email,
data.firstname,
fileUrl,
)
WorkSheet.appendRow(entryWithFile)
}