Connect React to Flask project

Question

I first came across a project in which the backend is written in Python (framework flask), and I wrote the frontend in React. It's time to connect a little functionality between these two parts.

The essence of the project is that the user uploads a file, sees its display (name), can click the convert button and receive a file in a different format. The frontend part is written and the backend part is there, I need to connect these two parts, so that by clicking on the convert button (this is the React part), the Python code will run.

I have been reading and watching the best practices for the second day, but I have not succeeded in anything, I hope you can help me.

So, in order.

Next, the it is passed to the parent DisplaySelectedFile component. DisplaySelectedFile is responsible for displaying a button for selecting a file (SelectFileButton), displaying the file itself, a button for starting the conversion, and a few more elements that are not of interest to us

 export default function DisplaySelectedFile() {
    const [fileName, setFileName] = useState(null);
    const [showCard, setShowCard] = useState(false);

    const handleSelectFile = useCallback(
      (file) => {
        setFileName(file);
        file && setShowCard(true);
      },
      [setFileName, setShowCard]
    );
  
    return (
      <div>
       ...
      </div>
    );
  }

Answer 1

I think the problem should be how to design the DisplaySelectedFile component.

The first option that you could discuss with your back-end guys about the /convert endpoint. The endpoint /convert should support the callback onUploadProgress which return the upload process.

The second option that you could polling call the /status endpoint to get the upload process. Here is an example code:

export default function DisplaySelectedFile() {
  const [fileName, setFileName] = useState(null);
  const [currentFile, setCurrentFile] = useState(undefined); // store the current upload file
  const [showCard, setShowCard] = useState(false);

  // save the files to the state
  const selectFile = (event) => {
    // I'm assuming that you support upload single file
    const file = event.target.files[0];
    setCurrentFile(file);
    setFileName(file?.name); 
  };
  const getFile = async(task_id) => {
    const interval = setInterval(() => {
      fetch(`http://www.yourEnpoint.com/status?id=${task_id}`, { // Your GET endpoint
        method: 'GET',
        headers: {
          // Content-Type may need to be completely **omitted**
          // or you may need something
          "Content-Type": "You will perhaps need to define a content-type here"
        },
      }).then((context) => {
        if(context?.get_link) {
          clearInterval(interval)
        }
      })
    }, 500)
  }

  const handleConvert = () => {
    fetch('http://www.yourEnpoint.com/transcript', { // Your POST endpoint
    method: 'POST',
    headers: {
      // Content-Type may need to be completely **omitted**
      // or you may need something
      "Content-Type": "You will perhaps need to define a content-type here"
    },
    body: currentFile // This is your file object
    }).then((response) => {
      return getFile(response.task_id);
    })
    .then((context) => {
      console.log(context); // Please do the further steps
    })
    .catch(() => {
      console.log("Could not upload the file!");
      setCurrentFile(undefined);
    });
    setCurrentFile(undefined);
  }

  return (
    <div>
      <SelectFileButton onChange={selectFile} />
      <div>
          {showCard && (
            <TableHead sx={styles.CommonStyle}>
              <TableRow >
                
                  <TableCell sx={styles.CellStyleFileName}>
                    {fileName}
                  </TableCell>
    
                  <TableCell sx={styles.CellStyleButtonAndCross}>
                    <ConvertFileButton onClick={handleConvert}></ConvertFileButton>
                  </TableCell>

              </TableRow>
            </TableHead>
          )}
      </div>
    </div>
  );
}