Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

183
Views
Uploaded files submitted empty in react

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.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!