Upload multiple documents react JS

Question

So I have to upload a list of Documents, I have in my code two services, one to get the document type and setup the frontend, and the other to upload the documents.

const getDocumentType = async () => {
    const path = "endpoint";
    const request = {
        method: "GET",
        headers: {
            "Content-type": "application/json",
        }
    }
    try {
        const result = await fetch(path, request);
        let response = await result.json();
        return response;
    } catch (error) {
        return error
    }

}

const postLoadDocument = (data) => {
    const dataBody = {
        documentType: data.documentType,
        refundId: data.refundId,
        index: data.index,
        file: data.file,
        fileName: data.fileName,
    }
    const path = "endpoint"
    const request = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(dataBody)
    };
    try {
        const result = await fetch(path, request);
        let response = await result.json();
        return response;
    } catch (error) {
        return error
    }
}

export { getDocumentType, postLoadDocument }

also I have an Input component to map through what getDocumentType brings: Input component


var fileName;

const Input = ({ setValue, setFileName, id }) => {
    const handleInput = (e) => {
        const value = e.target.value;
        if (value !== null) {
            if (e.target.files[0].size < 5000000) {
                fileName = e.target.files[0].name;
                setFileName(fileName);
                const reader = new FileReader();
                reader.readAsDataURL(e.target.files[0]);
                reader.onloadend = () => {
                    setValue(reader.result);
                }
            }
        }
    }
    return (
        <div>
            <form>
                <label>
                    load your file
                </label>
                <input
                    type="file"
                    accept=".png, .jpg, .pdf"
                    onChange={(e) => handleInput(e)}
                />
            </form>
        </div>
    )
}

export default Input;

and the main component that wraps everything looks like this:

import Input from "./components/input.js";
import { getDocumentType, postLoadDocument } from "./service/documentLoad.js"

function App() {
  const [fileLoad, setFileLoad] = useState(null);
  const [fileName, setFileName] = useState("");
  const [documentsType, setDocumentType] = useState([]);

  useEffect(() => {
    getDocumentType().then((obj) => {
      setDocumentType(obj.result)
    })
  }, [])

  const saveData = () => {
    const data = {
      // data ...
      file: fileLoad,
      fileName: fileName,
    }
      (async () => {
        const response = await postLoadDocument(data);
        return response;
      })();
  }

  return (
    <div className="App">
      {documentsType !== undefined &&
        documentsType.length !== 0 &&
        documentsType.map((documentType, index) => (
          <div>
            <span>{documentType.name}</span>
            <span>{documentType.description}</span>
            <Input id={index} setValue={setFileLoad} setFileName={setFileName} />
          </div>
        ))}

      <button onClick={saveData}>Load documents</button>
    </div>
  );
}

export default App;

so the problem comes when I try to upload the documents...it looks like the inputs overlap one each other and only sends the last document choos. How to identify every input from the other and upload the document list?

inteoryx · Accepted Answer · 2022-04-07 21:53:49Z

1

There are two problems I see here. First, you want to add the attribute "multiple" to your input. This will allow your input to accept multiple files. Basically, just after the line "onChange={(e) => handleInput(e)}" add a new line with only the word "multiple".

Second problem is that inside of your handleInput function you always use the first element of the files list. Instead, what you should do, is iterate through all of the files in the "files" list. As you iterate through the files you should handle each file.

For example, here is a JavaScript version of handleInput that just logs out each file object to the console. This version of handleInput expects that FileList object (what you get from event.target.files) will be given as the only argument.

function handleInput(fileList){
    for(let index = 0; index < fileList.length; index ++){
        let file = fileList[index];
        console.log(file);
    }
}

edited Apr 7, 2022 at 21:53

answered Apr 7, 2022 at 21:46

inteoryx

8055 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Santiago Spinetto Jung Over a year ago

the problem persists. if you see the code again, you'll see that I'm iterating an array and displaying an input component through a map. So I don't necessarily need multiple files per input. what I do need is to send a list containing each of the files selected in each input

inteoryx Over a year ago

I see only one ".map" in your code and that is the map to create the inputs. I understood you to be asking how to allow the user to upload multiple files on one of the inputs you've created with the map.

Collectives™ on Stack Overflow

Upload multiple documents react JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related