title: Sending a file with react dropzone and express multer
body: <p>Using react-dropzone (<a href="http://okonet.ru/react-dropzone/" rel="nofollow">http://okonet.ru/react-dropzone/</a>) I can get files onDrop. I'm sending them using isomorphic-fetch but I can't get the MIME-type correct. </p>
  
  <pre><code>  onDrop(i, files) {
      console.log('Received files: ', i, files, files[0]);
      const file = files[0];
  
      apiCaller('box/upload/check', 'post', {
        fileData: {
          name: file.name,
          size: file.size,
          type: file.type,
          parent_folder_id: '11788814757',
        },
      }, {
        // 'content-type': 'text/plain',
      }).then((resp) =&gt; {
        console.log('upload check', i, files, typeof resp, resp, resp.ok);
        // if (err) {
        //   throw new Error('UPLOAD_CHECK_FAILED');
        // }
  
  
        if (resp.upload_url) {
          apiCaller('box/upload', 'post', null, {
            // 'Content-Type': 'multipart/form-data',
          }, {
            payload: file.preview,
            parent_folder_id: '11788814757',
          })
          .then((res, er) =&gt; {
            console.log('upload', i, files, res, er);
            if (res) {
              this.state.docsToBeUploaded[i].uploaded = true;
            }
          })
          .catch((e) =&gt; {
            console.error(e);
          });
        }
      })
      .catch((err) =&gt; {
        console.error(err);
      });
    }
  </code></pre>
  
  <p>Here is the fetch module:</p>
  
  <pre><code>import fetch from 'isomorphic-fetch';
  import Config from '../../server/config';
  
  export const API_URL = (typeof window === 'undefined' || process.env.NODE_ENV === 'test') ?
    process.env.BASE_URL || (`http://localhost:${process.env.PORT || Config.port}/api`) :
    '/api';
  
  export default function callApi(endpoint, method = 'get', body, headerConfig, isFormData = false) {
    console.log('calling API:', arguments);
  
    const defaultHeaders = {
      'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
      'X-Requested-With': 'XMLHttpRequest',
    };
    const headers = { ...defaultHeaders, ...headerConfig };
    if (!isFormData) {
      headers['content-type'] = 'application/json';
    }
    console.log('headers', headers);
    return fetch(`${API_URL}/${endpoint}`, {
      credentials: 'include',
      headers,
      method,
      body: JSON.stringify(body),
    })
    .then(response =&gt; response.json().then(json =&gt; ({ json, response })))
    .then(({ json, response }) =&gt; {
      if (!response.ok) {
        return Promise.reject(json);
      }
  
      return json;
    })
    .then(
      response =&gt; response,
      error =&gt; error
    );
  }
  </code></pre>
  
  <p>If I set the MIME type manually then I get the typical 'no boundary' issue (<code>Error: Multipart: Boundary not found...</code>), because the browser needs to encode that itself.</p>
  
  <p>If I don't set it then the file is not seen at all...</p>
  
  <p>How should I do this? I can achieve upload through Postman, so it's definitely the header config...</p>
  
  <p>EDIT: FYI I'm using <a href="https://www.npmjs.com/package/isomorphic-fetch" rel="nofollow">https://www.npmjs.com/package/isomorphic-fetch</a> to send xhr...</p>