reactjs - 如何在没有提交按钮的情况下上传文件

Question

I have an input and submit button for uploading multiple files via axios and multer. It works but I want to upload my files without submit button. So it should upload them immediately after I choose my files.

These are the codes... I tried to use callback methods but couldn't figure out how to syntax should be. Is there a way to call uploadHandler function after upload function. I can't simply merge them because state gives me undefined value. * I use functional components not classes

function upload  (e)  {

const inputArr = new Array()

Array.from(e.target.files).forEach((piece)=>{

inputArr.push(piece.name)

}) 

setInputArray({inputArray: inputArr})
setInputFiles({inputFiles:e.target.files})

} 

After this, this should run

function uploadHandler  () {

const fd = new FormData();

if(inputFiles!=null)
{
  for ( var element of inputFiles.inputFiles) {
    console.log(element)
    fd.append('file',element)
  }
}

axios.post('/upload', fd)
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
}

I invoke them with these

 <input type="file" id="file" name="file" multiple="multiple" onChange={upload}/>
   <button onClick={uploadHandler}>Send Files</button>

Answer 1

Since your arrays states are not updated in the instant when you set setInputArray({inputArray: inputArr}), directly calling uploadHandler make arrays null.

To acheive this, you need useEffect !

 import React, { useState, useEffect } from 'react';

useEffect(() => {
   uploadHandler(inputFiles); 
}, [inputFiles]);

And you have to modify your uploadHandler function déclaration as:

function uploadHandler(files) {

  let fd = new FormData();  // can't be a const if you want to add some key:value

  if(files!=null)
  {
    for ( var element of files.inputFiles) {
      console.log(element)
      fd.append('file',element)
    }    
    axios.post('/upload', fd)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  else
  {
    console.log("Nothing to upload");
  }
}

Answer 2

You can try to create a hidden input after you click something like download button. It will open window to choose files and immediately make you actions with it:

let file = document.createElement('input');
file.type = 'file';
file.multiple = true;
file.style.display = 'none';
document.body.appendChild(file);

file.click();

file.onchange = (e) => {
    e.stopPropagation();
    e.preventDefault();
    let files = e.target.files;
    
    //Here you have you files
    //Here you can make anything with it
};

It's an example with pictures, but method with hidden input is universal