Error: 'slice' called on an object that does not implement interface Blob.

I am previewing the image on page, and after clicking on save button I am uploading image + sending http data of other form fields.

The image gets uploaded successfully but when sending http request to save all data, the error occurs. “Error: ‘slice’ called on an object that does not implement interface Blob.” Tried a lot to solve this not got success.

Please help me on this.

Upload code:

            Upload.upload({
                url: 'myproject/controller/image_upload',                
                file: file,
                method: 'POST',
                sendFieldsAs: 'form'
            }).progress(function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
            }).success(function (data, status, headers, config) {
                console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
            }).error(function (data, status, headers, config) {
                console.log('error status: ' + status);
            }) 

Code to save form data

            $http({
                method: 'POST',
                url: "myproject/controller/get_data",
                data: $.param($scope.store),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            })

[udaybajare]

Did you get a solution for this problem? I am facing the same problem while sending Input type=“file” value using Ajax. Your help is appriciated.

[DanroyNdungu]

Found that you should just add “contentType: false, processData: false,” to your ajax request. Look at this https://stackoverflow.com/questions/19722920/submitting-a-file-with-jquery-ajax-gives-typeerror