List null when trying to upload

Question

Team member and I have been working on getting a multiple file upload component working in react with a asp.net back-end. Team member wrote the back-end, so I do have limited knowledge of exactly what the api is doing, but when we send a request using Postman, the file does arrive and is visible in the model debugger.

I've tried various ways of sending the files from my React front-end, including sending as a direct copy of the state, sending as an array with additional information, and sending as a set of independent files, as seen here.

Yes, the form is using

<form encType="multipart/form-data"/>

but the file upload itself is obfuscated behind a DropZone component that I designed.

Team member and I are both fairly new to React and are getting frustrated with this detail.

API Call:

const data = new FormData(form);
for(var i=0; i <this.state.files.length; i++){
    filesArray.push('files'+ i, this.state.files.item(i));
}
data.append("files", filesArray); 

fetch('http://localhost:5824/api/Claim', {
    method: 'POST',
    body: data,
});

relevant portion of the DropZone in the form:

<input ref={this.fileInputRef} className="dropInput" type="file" multiple onChange={this.onFilesAdded}/>
<span>Upload Files</span>

Ever tried to specify `'Content-Type': 'multipart/form-data',` in your fetch options explicitly? — Oleksandr Tyshchenko, Sep 13 '19 at 12:52
What is your Controller action? Is there any demo to reproduce your issue? — Edward, Sep 16 '19 at 07:33

score 0 · Accepted Answer · answered Sep 18 '19 at 14:57

0

All I needed was to add name="files" to the DropZone component.

<input ref={this.fileInputRef} className="dropInput" type="file" name="files" multiple onChange={this.onFilesAdded}/>

Do not append the files to FormData from the component state.

answered Sep 18 '19 at 14:57

neekMarie

11
3

List null when trying to upload

1 Answers1