Can't send files using Redux Form

Question

I'm creating a webpage for me and I'm working with Redux/Redux Form. My backend is working fine, but I can't figure out how to work on my front-end. I'm not using any library to fetch the image in my front, I just copy and pasted a FieldFileInput and it's working fine.

Here is my PostForm.tsx:

    renderInput = ({input, label, meta}: {input: any, label: any, meta: any}) => {
        const className = `field ${meta.error && meta.touched} ? 'error' : ''`;
        return (
            <div className={className}>
                <label>{label}</label>
                <div className="input-group input-group-lg">
                    <input className="form-control"{...input} autoComplete="off"/>
                </div>
                {this.renderError(meta)}
            </div>
        )
    };

    onSubmit = (formValues: any) => {
        //@ts-ignore
        this.props.onSubmit(formValues)
    };

    render() {
        return (
            <form
                onSubmit={ this.props.handleSubmit(this.onSubmit)}
                className="ui form error"
            >
                <div className="create-post-field-two">
                    <Field
                        name="title"
                        component={this.renderInput}
                        label="Enter Title"
                    />
                </div>
                <div className="create-post-field-two">
                    <Field
                        name="body"
                        component={this.renderInput}
                        label="Enter Description"
                    />
                </div>

                <div className="create-post-field-two">
                    <Field
                        name="imageUrl"
                        component={FieldFileInput}
                        label="Enter Image"
                    />
                </div>

                <div className="postButton">
                    <button className="btn btn-outline-secondary">Submit</button>
                </div>
            </form>
        )
    }
}

In this page I'm certain that everything works correctly, because I receive all data in my Action.

Here is my Redux Action

export const createPost = ( formValues: any) => async(dispatch: any, getState: any) => {
  const { userId } = getState().auth;
  let token = userId

 const headers = {
    // 'Content-Type': 'multipart/form-data',
    authorization: `Bearer ${token}`,
 };
  let formData = new FormData();
  formData.append('imageUrl', formValues.imageUrl);

  try {

    const response = await AlleSys.post('/posts', {...formValues, image: formData}, {headers})
    dispatch({type: CREATE_POST, payload: response.data})
    history.push('/')
  }catch (err) {
    console.log("ERROR: Couldn't post for identified user");
  }
};

If I uncomment the Content-Type I receive the error Error: Multipart: Boundary not found in my Back-End. Here Is a screenshot of my request using insomnia.

I'm stuck on this for days and I can't figure out how to achieve the file upload in the front-end. Please don't mind the typings, I'll correct later.

Answer 1

I used bodyFormData.append to my form fields in the Redux Action and worked like a charm.

export const createPost = ( formValues: any) => async(dispatch: any, getState: any) => {
  const { userId } = getState().auth;
  let token = userId

 const headers = {
    authorization: `Bearer ${token}`,
     Accept: 'application/json',
 };

  const { title, body, image } = formValues;

  const bodyFormData = new FormData();
  bodyFormData.append('title', title);
  bodyFormData.append('body', body);
  bodyFormData.append('image', image);
  
  try {
    const response = await AlleSys.post('/posts', bodyFormData, {headers})
    console.log(response)
    dispatch({type: CREATE_POST, payload: response.data})
    history.push('/')