How do I save uploaded file with other fileds using MERN?

Question

I'm trying to save a uploaded file with other fields like 'title', 'description',. I'm able to save data using postman but I'm not able to save data from Reacjs form with Redux.

This is how my backend received the data:

const department = req.body.department;
const title = req.body.title;
const description = req.body.description;
const file = req.files.file;

I can save from postman but not react form.

This is my react form:

<form onSubmit={(e) => onSubmit(e)} encType='multipart/form-data'> ... some fields ... </form/

This is my react state and submission form data:

  const [file, setFile] = useState('');
  const [filename, setFilename] = useState('Choose file...');
  const [bodyData, setBodyData] = useState({
    title: '',
    department: '',
  });

  const { title, department } = bodyData;

  const onChange = (e) =>
    setBodyData({ ...bodyData, [e.target.name]: e.target.value });

This is my Redux

   // Create document file for specific patient
export const addFile = (form, id) => async (dispatch) => {
  console.log(form.bodyData);
  try {
    const config = {
      headers: { 'Content-Type': 'application/json' },
    };

    const res = await axios.put(
      `/api/document/file/${id}`,
      (form.bodyData, form.formData),
      config
    );

    dispatch({
      type: ADD_DOCUMENT_FILE,
      payload: res.data,
    });

    dispatch(setAlert('Successfully Uploaded Patient Document', 'success'));
  } catch (err) {
    const errors = err.response.data.errors;
    if (errors) {
      errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
    }

    dispatch({
      type: DOCUMENT_FILE_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
    });
  }
};
  const onChangeFile = (e) => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    const collect = { formData, bodyData };

    addFile(collect, match.params.id);
  };

Answer 1

It seems like you are somewhat confused about how to handle this form submission.

In your onSubmit function, you reference a variable file which isn't defined in that scope, also you return formData, bodyData but bodyData isn't defined, and formData and bodyData are synonyms for the same data, so I don't know why you need both.

Consider this question for an example solution: How to post a file from a form with Axios

Answer 2

Yes. Finally I figured it out.

I changed my submit to this code:

 const onSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('title', title);
formData.append('department', department);
formData.append('file', file);

addFile(formData, match.params.id);

};

and the Redux I changed to this code:

    export const addFile = (formData, id) => async (dispatch) => {
  // console.log(form.bodyData);
  try {
    const config = {
      // headers: { 'Content-Type': 'multipart/form-data' },
      headers: { 'Content-Type': 'application/json' },
    };

    const res = await axios.put(
      `/api/document/file/${id}`,
      // { title: form.bodyData.title, department: form.bodyData.department },
      formData,
      config
    );

    dispatch({
      type: ADD_DOCUMENT_FILE,
      payload: res.data,
    });

    dispatch(setAlert('Successfully Uploaded Patient Document', 'success'));
  } catch (err) {
    const errors = err.response.data.errors;
    if (errors) {
      errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
    }

    dispatch({
      type: DOCUMENT_FILE_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
    });
  }
};