Safariがサーバに空のファイルを送信するFormData経由のファイルアップロード

Question

クロップされた画像の塊をアップロードしようとしています。

次のコードはChromeとFirefoxで動作しますが、Safariに問題があります。それはFormDataに追加される前に、

Fileは、私たちの問題は、それがvar_dump($_FILES['file'])を投棄、弊社のサーバーに送信されます一度ということで、残念ながらSafariは一度FormData

に添付されたファイルを表示するための十分なサポートが得られないだけでなく形成するように見えます空にするファイルを示します（sizeプロパティは0です）。

私はこれがSafariのFormDataの「基本的な」サポートを無効にしていると考えていますが、使用しようとしたPolyfillersはこの問題を解決していません。これを回避する方法はありますか？

// 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; 
    } 
); 
} 

Answer 1

最終的に私の髪を引き出す日の後、

MediaServiceにnew Fileを作成する代わりにimageBlobを送信し、ファイル名を追加します。

ので

// 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; 
    } 
); 
}