I've got a file typed input to attach files in a form. This question was asked before that uploaded files were submitted empty and the answer is to wrap the files in a formData.
The difference in my codes is that these files are not submitted solely, but as a part of a nested object through a PUT request (actions are handled in a reducer)
export default function checklistVersionReducer(configObj, action) {
switch (action.type) {
case "initiate": {
const { payload } = action;
const idAssignedConfig = assignSectionId(payload.config);
return { ...payload, config: idAssignedConfig };
}
case "update": {
const { value, secId, subsecId, item } = action;
let configCopy = Object.assign({}, configObj);
configCopy.config[secId].subSections[subsecId][item] = value;
return configCopy;
}
/////////////// - Action to handle the attached files - ///////////////
case "attach": {
const { files, secId, subsecId } = action;
const filesData = new FormData();
for (let i = 0; i < files.length; i++) {
filesData.append("file", files[i]);
}
let configCopy = Object.assign({}, configObj);
configCopy.config[secId].subSections[subsecId].docs = [filesData];
return configCopy;
}
/////////////// -/ Action to handle the attached files - ///////////////
case "changeStatus": {
const { status } = action;
return { ...configObj, documentStatus: status };
}
case "updateOperator": {
const { newOpId } = action;
return { ...configObj, operatorId: newOpId };
}
case "updateSecondOperator": {
const { newOpId } = action;
return { ...configObj, operatorId2: newOpId };
}
default:
console.error("Unhandled action type " + action.type);
break;
}
}
The problem is it still submits empty formData and I'm not sure where the problem is.
Any help is appreciated.