Search code examples
restcordovaparse-platformmime-typescontent-type

courrupted jpeg when uploading to parse.com with cordova file transfer plugin


I'm using parse.com rest api https://www.parse.com/docs/rest#files I'm trying to upload a photo from a cordova app. I'm using the ngCordova projects wrapper of the file plugin and file transfer plugin.

When I upload a photo it's being corrupted somehow. See http://files.parsetfss.com/73b88ac0-8858-4f64-92bf-de6aaf29f525/tfss-7b54f8e8-77fd-4e3d-bbbe-83bf67bb08d0-profile-image.jpeg

if I change the post requests Content-Type to application/json we see the folowing http://files.parsetfss.com/73b88ac0-8858-4f64-92bf-de6aaf29f525/tfss-219ecbb4-091f-45e6-9da1-35ad84022db6-profile-image.jpeg which is equivalent to this hex dump of the uploaded jpeg.

--+++++org.apache.cordova.formBoundary
Content-Disposition: form-data; name="file"; filename="no-filename"
Content-Type: image/jpeg
Content-Length: 35476

<binary>
--+++++org.apache.cordova.formBoundary--

Loading this image into preview brings up a warning that it's corrupted. In photoshop it gets loaded properly, so the information is there, there's just been some corruption.

I'm suspecting that the cordova file-transfer plugin is immature and by default adds unneeded parameters file and filename. And there's no way to remove them. See https://github.com/apache/cordova-plugin-file-transfer/blob/master/doc/index.md#upload

How do I upload a jpeg binary to parse.com using the rest api and the file-transfer plugin?

profilesController.js

// uploads photo to rest api given local file_uri
$scope.addPhoto = function() {

  var options = {};
  options.mimeType = 'image/jpeg';
  options.headers = {
    'X-Parse-Application-Id': 'my-id',
    'X-Parse-REST-API-Key': 'my-key',
    'Content-Type': 'image/jpeg'
  };

  $cordovaFile.uploadFile('https://api.parse.com/1/files/profile-image.jpeg', $scope.imageSrc, options).then(function(result) {
    console.log('result:', result);
    $ionicLoading.hide();
  }, function(err) {
    // An error occured. Show a message to the user
  });
};

Solution

  • Answer is the plugin's api is not compatible with the format parse is expecting. I resorted to using the javascript sdk's file method https://www.parse.com/docs/js_guide#files-classes and the Camera plugin's DATA_URL method https://github.com/apache/cordova-plugin-camera/blob/master/doc/index.md#options