Safari sending empty file to server on File upload via FormData

Question

We're trying to upload an blob of an image that's been cropped.

The following code works in Chrome and Firefox, however we're having issues with Safari.

The File appears to well formed before it is appended to the FormData unfortunately Safari does not give enough support to view the file once attached to the FormData

Our problem is that once it's sent to our server dumping out var_dump( $_FILES['file'] ) shows the file to empty (it's size property is 0).

I believe this to be down Safari's "basic" support of FormData, but Polyfillers I've tried to use have not resolved the issue. Is there a way around this?

// From Controller
$scope.uploadImage = function( croppedImage ) {
  $scope.uploadingImage = true;
  var imageBlob = dataURItoBlob( croppedImage );
  var options = {
    action: 'upload_file',
    format: 'media_item',
    output: 'json'
  }

  var file = new File( [ imageBlob ], $scope.filename,{
    type: 'image/png'
  });

  console.log( file.size );

  MediaService.uploadImage( file, options ).then(
    function( response ) {
      $modalInstance.close( response );
    }
  ).finally(
    function() {
      $scope.uploadingImage = false;
    }
  )
};

// From MediaService (angular service
uploadImage: function( image, params ){
  var formData = new FormData();
  formData.append( 'action', params.action );
  formData.append( 'format', params.format);
  formData.append( 'file', image );

  //The POST header needs to be multipart/form-data
  $http.defaults.headers.post = {};

  return $http( {
    method: 'POST',
    url: apiMediaUrl,
    data: formData,
    transformRequest: angular.identity,
    headers: { 'Content-Type': undefined },
    withCredentials: true
  } )
  .then(
    function( response ) {
      return response.data.payload;
    },
    function( errorResponse ) {
      throw errorResponse.data.payload || errorResponse.data;
    }
  );
}

try to change MediaService.uploadImage( file, options ) to MediaService.uploadImage( imageBlob, options ), if not work then provide the result of console.log(imageBlob) and console.log(file) — artgb
– artgb, Commented Oct 4, 2017 at 17:12
Ha, we literally just got this, previously our api was rejecting them. But if we pass uploadImage the filename and formData.append( 'file', image, filename ); It works. Couple of other kinks to work out, but they should be easy. Thanks! — James
– James, Commented Oct 4, 2017 at 17:19
Yes, thanks! My colleague owes me a pint haha. I'll be happy to accept an answer if you post it as one — James
– James, Commented Oct 4, 2017 at 17:23

James · Accepted Answer · 2017-10-05 09:48:40Z

After a day of pulling my hair out, finally got this.

By sending the imageBlob instead of creating a new File to the MediaService and the appending a filename.

So

// From Controller
$scope.uploadImage = function( croppedImage ) {
  $scope.uploadingImage = true;
  var imageBlob = dataURItoBlob( croppedImage );
  var options = {
    action: 'upload_file',
    format: 'media_item',
    output: 'json',
    params: 'filename'
  }

  // no longer convert to file

  MediaService.uploadImage( imageBlob, options ).then(
    function( response ) {
      $modalInstance.close( response );
    }
  ).finally(
    function() {
      $scope.uploadingImage = false;
    }
  )
};

// From MediaService (angular service
uploadImage: function( image, params ){
  var formData = new FormData();
  formData.append( 'action', params.action );
  formData.append( 'format', params.format);

  /*
   *  Add file name here
   */
  formData.append( 'file', image, params.filename );

  //The POST header needs to be multipart/form-data
  $http.defaults.headers.post = {};

  return $http( {
    method: 'POST',
    url: apiMediaUrl,
    data: formData,
    transformRequest: angular.identity,
    headers: { 'Content-Type': undefined },
    withCredentials: true
  } )
  .then(
    function( response ) {
      return response.data.payload;
    },
    function( errorResponse ) {
      throw errorResponse.data.payload || errorResponse.data;
    }
  );
}

Collectives™ on Stack Overflow

Safari sending empty file to server on File upload via FormData

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related