Upload image as PATCH/PUT request through phoenix api (with Arc?)

Phoenix Forum Questions / Help
2

I solved this by going back to using FormData, but adding a separate POST route to the same endpoint used for the update action. After adding the route, I could simplify the elixir code back to it’s original boilerplate. Then, in the redux action I just needed to add the FormData:

Object.keys(formData).forEach((key) => {
      if (formData[key] instanceof File) {
        form_data.append(`design[${key}]`, formData[key], formData[key].name);
      } else {
        form_data.append(`design[${key}]`, formData[key]);
      }
    });
    
     httpPostForm(`/api/v1/designs/${id}`, form_data)
      .then((resp) => {
        dispatch({
          type: DESIGN_UPDATED,
          currentDesign: resp.data,
          message: 'Your design has been successfully updated'
        });
      }) ...

export function httpPostForm(url, data) {
  console.log('data', data);
  return fetch(url, {
    method: 'POST',
    headers: formHeaders(),
    credentials: 'same-origin',
    body: data
  })
  .then(checkStatus)
  .then(parseJSON);
}

function formHeaders() {
  const authToken = localStorage.getItem('AuthToken');
  return { 'Accept': 'application/json, */*', Authorization: authToken };
}

FormData will set the appropriate content-type, so important not to set it manually in the headers.

2 Likes