Upload file using Material UI DropzoneDialogBase - reactjs

Question

I am having issues uploading the files using Material UI DropzoneDialogBase;
My frontend is react & backend is flask
My component is defined as below
<DropzoneDialogBase
dialogTitle={addFileClassDialogTitle()}
fileObjects={uploadFiles}
cancelButtonText={"cancel"}
submitButtonText={"submit"}
maxFileSize={5000000}
filesLimit={1}
open={fileClassState.showAddFileClassForm}
onAdd={newFile => {
console.log('onAdd', newFile);
setUploadFiles([].concat( uploadFiles , newFile ));
}}
onDelete={deleteFile => {
console.log('onDelete', deleteFile);
const fileList = [...uploadFiles];
fileList.splice( deleteFile, 1 );
setUploadFiles( fileList );
}}
onClose={() => setShowAddFileClassForm(false)}
onSave={() => saveNewFileClass( )}
showPreviews={true}
showFileNamesInPreview={true}
/>
The component works fine and adds the files to the object "uploadFiles"
This is my saveNewFileClass
const saveNewFileClass = async () => {
const credentials = localStorage.getItem("credentials");
const formData = new FormData();
formData.append("file", uploadFiles[0]);
console.log( "type of uploadfiles =>", typeof(uploadFiles[0]));
for (var key of formData.entries()) {
console.log(key[0] + ', ' + key[1]);
}
formData.append("data", JSON.stringify({ token: credentials, fileclass: newFileClass }));
console.log('onSave', uploadFiles);
console.log("save new file class", formData);
const requestOptions = {
mode: 'cors',
cache: 'no-cache',
headers: { 'Content-Type': 'multipart/form-data' },
redirect: 'follow',
referrerPolicy: 'no-referrer'
};
const response = await axios.post(
'https://myhost.com:5000/api/addfileclass',
formData,
requestOptions )
const responseData = await response.data;
storeCredentials( responseData.credentials );
setShowAddFileClassForm(false);
}
The Console logs displayed are as below
FileClass.js:143 type of uploadfiles => object
FileClass.js:146 file, [object Object]
FileClass.js:151 onSave [{…}]0: {file: File, data: "data:application/vnd.openxmlformats-officedocument…jUHJvcHMvYXBwLnhtbFBLBQYAAAAAEgASANcEAADDUgAAAAA="}length: 1__proto__: Array(0)
FileClass.js:152 save new file class FormData {}
The log on line 151 confirms that the uploadFiles has an array of Files
However when I append to FormData 'files' it is changed as [Object Object]
Due to this on the flask backend I am not getting any values in request.files and I get the following error
Traceback (most recent call last):
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 2464, in __call__
return self.wsgi_app(environ, start_response)
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 2450, in wsgi_app
response = self.handle_exception(e)
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask_cors/extension.py", line 161, in wrapped_function
return cors_after_request(app.make_response(f(*args, **kwargs)))
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 1867, in handle_exception
reraise(exc_type, exc_value, tb)
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/_compat.py", line 39, in reraise
raise value
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 2447, in wsgi_app
response = self.full_dispatch_request()
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 1952, in full_dispatch_request
rv = self.handle_user_exception(e)
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask_cors/extension.py", line 161, in wrapped_function
return cors_after_request(app.make_response(f(*args, **kwargs)))
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 1821, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/_compat.py", line 39, in reraise
raise value
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 1950, in full_dispatch_request
rv = self.dispatch_request()
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 1936, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "/home/ubuntu/.local/lib/python3.8/site-packages/flask_cors/decorator.py", line 128, in wrapped_function
resp = make_response(f(*args, **kwargs))
File "/home/ubuntu/platform-streamxls/react-excel-upload/flaskapp/routes.py", line 286, in addfileclass
downloadfile = request.files["file"]
File "/home/ubuntu/.local/lib/python3.8/site-packages/werkzeug/datastructures.py", line 442, in __getitem__
raise exceptions.BadRequestKeyError(key)
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'file'
The python code segment where the error is raised is
def addfileclass():
headers = request.headers
downloadfile = request.files["file"]
Any help on how to fix the react will be nice

Answer 1

The variable uploadFiles is an object array which has a structure of data,files
uploadFiles = []{ data : "mime information", file : "the file Object"}
I changed the append statement to the following
const formData = new FormData();
formData.append("file", uploadFiles[0].file);
This works fine for a single file
I have worked out the pattern to upload multiple files.
most of the examples I searched had multiple api calls in a loop to upload multiple files; this is not always an efficient solution
I have the following for multiple files
const formData = new FormData();
uploadFiles.map((file, idx) => {
formData.append("file"+idx, file.file);
});
formData.append("data", JSON.stringify({ filecount: uploadFiles.length }));
In my backend - I use the filecount to identify the number of files that are there and use the values of "file0", "file1"... to handle the file uploads