Ad

Sending Resized Images Through AJAX/AngularJS

Basically I am trying resize image, then send and save on server. I am using this directive Mischi/angularjs-imageupload-directive mainly for resizing images. However i have no idea how to send this "resized" one. The only return i've got is dataURL for resized image, and i found solution to make blob out of it instead of file. However my server respond with "500 Internal Server Error" and i think its because of Content-Type: application/ocet-stream. I need to send Content-Type: image/*

Heres my script

angular.module('imageuploadDemo', ['imageupload'])
       .controller('DemoCtrl', function($scope, $http) {

         // Not important stuff, only to clear/fill preview and disable/enable buttons
           $scope.clearArr = function() {
             $scope.images4 = null;
           }

           $scope.testowy = function(test) {
             console.log(test);
           }

        // --- Creating BLOB --- //
           function dataURLtoBlob(dataurl) {
              var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                  bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
              while(n--){
                  u8arr[n] = bstr.charCodeAt(n);
              }
              return new Blob([u8arr]);
          }

           $scope.test;
        // --- Here magic goes on --- //
           $scope.single = function(image) {
               var formData = new FormData();

               angular.forEach(image, function(file) {
                 var blob = dataURLtoBlob(file.resized.dataURL);

                 formData.append('files[]', blob);
                 //formData.append('files[]', file.file); <-- This works, but sending non-resized image (raw one)
               })

               formData.append('id', $scope.test);
               console.log('test');

                 $http.post('myserver/addimg', formData, {
                     headers: { 'Content-Type': undefined }, //I am not even sure if its working...
                     transformRequest: angular.identity
                 }).success(function(result) {
                     $scope.uploadedImgSrc = result.src;
                     $scope.sizeInBytes = result.size;
                 });
           };
       });

And here is my server site

public function add(Request $request)
{


$id=$request->id;
    $files = Input::file('files');

    foreach($files as $file) {

        $destinationPath = 'galeria';
        $filename = $file->getClientOriginalName();
        $file->move($destinationPath, $filename);
        copy('galeria/'.$filename,'galeria/thumbs/'.$filename);
        image::make('galeria/thumbs/'.$filename);
        image::make('galeria/thumbs/'.$filename,array(
            'width' => 300,
            'height' => 300,
        ))->save('galeria/thumbs/'.$filename);

        Images::create(['src'=>$filename,'id_category'=>$id]);
        return redirect()->back();
    }
    return Images::all();
}
Ad

Answer

Issue in FormData.append()

Parameter: The append() method of the FormData interface appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.

It has 3 parameters: FormData.append(name, value, filename)

var formData = new FormData();
// Key pair value
formData.append('username', 'Chris');
formData.append('userpic', myFileInput.files[0], 'chris.jpg');

// Array Notation:
formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');

Reference URLs: https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

Ad
source: stackoverflow.com
Ad