How to upload file in Google Drive with { google apps script + Reacts js + clasp } web app

Question

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

Answer 1

value of HtmlInputElement type file only contains the string path to the file. Furthermore, file isn't a legal parameter to the server (except if it's in a form and the form is sent as a whole). Only strings and other primitives are legal parameters. You maybe able to get the data using HTMLInputElement.files[0], use a Filereader to convert the blob data to a base64 string and send the string to the server and parse it back to binary data server side. But probably the easiest way is to send the form directly:

google.script.run.appendEntry(document.querySelector("form"));

The server directly parses the names and values to objects and the file input will automatically be cast to blob on the server.