title: After using Fetch I still Got Multipart Boundary in react.js when send formData
body: <p>I seriously confused how to solve this multipart boundary when using Axios, react.js and multipart/formdata. I already stuck for 2 weeks to try to solve this but I feel like I getting closer to solved it but it still stuck no matter what solution I try.</p>
  
  <p>I read and trysome solution from this topic:</p>
  
  <p><a href="https://stackoverflow.com/questions/49625572/how-to-post-multipart-formdata-using-fetch-in-react-native">how-to-post-multipart-formdata-using-fetch-in-react-native</a></p>
  
  <p><a href="https://stackoverflow.com/questions/51697944/how-to-send-multipart-form-data-with-antd-upload-react">how-to-send-multipart-form-data-with-antd-upload-react</a></p>
  
  <p><a href="https://stackoverflow.com/questions/47168659/how-to-send-a-multipart-form-data-from-react-js-with-an-image">how-to-send-a-multipart-form-data-from-react-js-with-an-image</a></p>
  
  <p>this is my <code>create Order</code> function in <code>orderAction.js</code> :</p>
  
  <pre><code>function createOrder(data) {
      return dispatch =&gt; {
          let apiEndpoint = 'order';
          let payload = new FormData();
          // payload.append('orderImage', data.orderImage);
  
          // console.log("Cek Image : ", data.orderImage);
          for (const file of data.orderImage) {
              payload.append('orderImage', file)
          }
  
          payload.append('userId', data.userId);
          payload.append('materialId', data.materialId);
          // payload.append('materialId', '5d79930c8c4a882f44b1b0fb');
          payload.append('color', data.color);
          payload.append('description', data.description);
          payload.append('quantity', data.quantity);
          payload.append('city', data.city);
          payload.append('detailAddress', data.detailAddress);
  
          console.log("Cek Data : ", payload);
  
          fetch(config.baseUrl + apiEndpoint, {
              method: 'POST',
              headers: {
                  'Authorization': 'Bearer ' + localStorage.getItem('token'),
                  'Content-Type' : 'multipart/form-data; boundary=----WebKitFormBoundaryHl8DZV3dBSj0qBVe'
              },
              body: payload
          })
          // orderService.post(apiEndpoint, payload)
          //     .then(res =&gt; {
          //         if(res.data.status === 200) {
          //             alert(res.data.Message);
          //             dispatch(createOrderSuccess(res.data));
          //             history.push('/user-order');
          //         } else {
          //             dispatch(createOrderFailed());
          //             alert(res.data.Message);
          //         }
          //     })
      };
  }
  
  </code></pre>
  
  <p>can someone help me to solve this? I'm quite confused with this problem</p>
  
  <p><strong>Edit 1</strong>
  after try using @narasimha solution finally I got rid the multipart boundary but I got weird behaviour where The data succesfully got encoded like this:</p>
  
  <p><a href="https://i.stack.imgur.com/VJvQJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VJvQJ.png" alt="You can see the Base64 image finally encoded in headers"></a></p>
  
  <p>but When I trying check the response the photoUrl return <code>null</code> or `` like this:</p>
  
  <p><a href="https://i.stack.imgur.com/OYgc6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OYgc6.png" alt="You can see photoUrl return null array"></a></p>
  
  <p>and when I try using insomnia or postman it successfully generated the photoUrl like this:</p>
  
  <p><a href="https://i.stack.imgur.com/mOtVt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mOtVt.png" alt="You can see at photoUrl array it return the imageurl"></a></p>
  
  <p>where did I wrong in here?</p>