title: React Native jpg file upload to Parse.com
body: <p>I am implementing a React Native app that uses react-native-file-transfer to upload jpeg files to Parse.com.  I chose this library because it implements the file transfer via Object-C and so has performance advantages over implementing the transfer in React Native (i.e. avoids transferring data over the React-Native / iOS bridge).</p>
  
  <p>The file that I'm uploading is a known good jpeg file, but when I upload it using react-native-file-transfer, it adds the following prefix to the beginning of the file:</p>
  
  <blockquote>
    <p>------react.file.transfer.form.boundary Content-Disposition: form-data; name="file"; filename="proposalPhoto.jpg" Content-Length:
    22308</p>
  </blockquote>
  
  <p>I believe the prefix is added because react-native-file-transfer uses Cordova multi-part. When I try to open the uploaded jpeg file, it is no longer recognized as a JPEG file (and can't be opened).  If I use a hex file editor and remove the prefix, the file is once again recognized as a proper JPEG file.</p>
  
  <p>Does anyone have any suggestion for uploading a JPEG file to parse.com without making the resulting JPEG file unreadable or taking the performance hit of doing the upload directly in React Native?</p>
  
  <p>Btw, here's the code that I implemented using react-native-file transfer...</p>
  
  <pre><code>uploadPhotoToParse( photoPath ) {
  
      var headers = {
          'X-Parse-Application-Id': CONFIG.PARSE_APP_ID,
          'X-Parse-REST-API-Key': CONFIG.PARSE_REST_API_KEY,
          'Content-Type': 'image/jpeg2'
      } 
      var data = {};
  
      photoURL="/Users/wookiem/Library/Developer/CoreSimulator/Simulator/446F37B1-477B-4492-B2B8-8C8FE33327DF/data/Containers/Data/Application/1B1B2449-42F1-40FB-85ED-4781CC68E191/Documents/logo.jpg"
  
      var obj = {
              uri: 'file://' + photoPath,
              uploadUrl: 'https://api.parse.com/1/files/pic.jpg',
              fileName: 'proposalPhoto.jpg',
              mimeType: 'image/jpeg',
              headers: headers,
              data: data
      };  
  
      NativeModules.FileTransfer.upload(obj, (err, res) =&gt; {
              console.log(res);   
      });
  }
  </code></pre>
  
  <p>Update #2 -- Using fetch method, attempting to upload raw jpeg file.  </p>
  
  <p>This results in a zero-byte file being uploaded.  Here is my code:</p>
  
  <pre><code>uploadPhotoToParse() {
  
      photoURL="file:///Users/wookiem/logo.jpg"
  
      fetch('https://api.parse.com/1/files/pic.jpg',
          {
              method: 'POST',
              headers: {
                  'X-Parse-Application-Id': CONFIG.PARSE_APP_ID,
                  'X-Parse-REST-API-Key': CONFIG.PARSE_REST_API_KEY,
                  'Content-Type': 'image/jpeg'
              },
              url: photoURL
          }
      ).then((response) =&gt; {
          if ((response.status === 200 || response.status === 201)) {
              return {};
          } else {
              var res = JSON.parse(response._bodyInit);
              throw (res);
          }
      })
      .catch((error) =&gt; {
          throw(error);
      });
  }
  </code></pre>