allow upload of blob

[bettysteger]

hey I just used https://github.com/alexk111/ngImgCrop to crop an image before uploading.. and now I did this to upload the blob with angular-file-upload:

  uploader.onBeforeUploadItem = function(item) {
    var blob = dataURItoBlob($scope.croppedImage);
    item._file = blob;
  };

This works just fine, but the file name is ignored because of this line: (and because of that the server doesn't recognize the file extension)

form.append(item.alias, item._file);
-->
------WebKitFormBoundaryGD5fYyZwXHVXxfZ4
Content-Disposition: form-data; name="avatar"; filename="blob"
Content-Type: image/png

It would be possible to add the name as third parameter, see https://developer.mozilla.org/en-US/docs/Web/API/FormData

what do you think of adding a third parameter or allow to upload a Blob in the first place?

btw: you made a really cool plugin!

[nervgh]

Hi. Thanks.

allow upload of blob

Blob uploading is possible. You can pass any data with file. Probably, in your case it looks like this:

// client
uploader.onAfterAddingFile = function(item) {
    item.formData.push({name: item.file.name});
};

// server
$name = $_POST['name'];

what do you think of adding a third parameter or allow to upload a Blob in the first place?

I can write something like this

form.append(item.alias, item._file, item.file.name);

insted that code. What do you think about it?

[bettysteger]

Yes @nervgh, changing this line of code is what I meant ;)
because then I don't need to add additional formData (client) and I don't need to get the name extra on the server, because it would work out of the box (with carrierwave)

[bettysteger]

Blob uploading is possible. You can pass any data with file.

yes, I know that, but I don't want it to pass it with the file, I want to just upload a Blob... that's why I overwrite item._file before the upload ;)

[nervgh]

Thanks =)

[EnchanterIO]

@lpsBetty @nervgh Do any of you have a functional example of using ngImgCrop together with this uploader? I just can't make it work.

[bettysteger]

hey @TrkiSF2, I used onBeforeUploadItem to overwrite the actual '_file' with the blob:

updated solution, if you have a scope inheritance problem: https://gist.github.com/lpsBetty/2057e0bd0b4142d4070db0e1175ca47e

  /**
   * Show preview with cropping
   */
  uploader.onAfterAddingFile = function(item) {
    $scope.croppedImage = '';
    var reader = new FileReader();
    reader.onload = function(event) {
      $scope.$apply(function(){
        $scope.image = event.target.result;
      });
    };
    reader.readAsDataURL(item._file);
  };

  /**
   * Upload Blob (cropped image) instead of file.
   * @see
   *   https://developer.mozilla.org/en-US/docs/Web/API/FormData
   *   https://github.com/nervgh/angular-file-upload/issues/208
   */
  uploader.onBeforeUploadItem = function(item) {
    var blob = dataURItoBlob($scope.croppedImage);
    item._file = blob;
  };

  /**
   * Converts data uri to Blob. Necessary for uploading.
   * @see
   *   http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
   * @param  {String} dataURI
   * @return {Blob}
   */
  var dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var array = [];
    for(var i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: mimeString});
  };

and the HTML:

        <!-- crop area if uploaded image-->
        <img-crop ng-show="image" image="image" result-image="croppedImage" area-type="square" result-image-size="250"></img-crop>

I hope I can you help you with that snippets ;)

[trivago-llukac]

IpsBetty thank you for the code! I will try it when I come home but from a quick view I am missing one thing. When do you call something like $scope.uploader.addToQueue(item) and how the item object looks like in that state please?

[bettysteger]

the uploader is bind to the dropzone and to the input field in my HTML.
so when a file is chosen uploader.onAfterAddingFile (see above) will be called

[EnchanterIO]

Thank you very much. I made it work finally!!! :) If you would like to stay in touch https://twitter.com/TrkiSF2

[nervgh]

@lpsBetty , thanks =)

[brianfeister]

Sorry to continue this thread that's already long - @TrkiSF2, any chance you could post your working code as a Plunkr or similar?

@lpsBetty - thank you SO much for posting your code. I'm just curious what the HTML context is for the upload directory? I realize that we're saving the base64 encoded image string to $scope.image. But the reference to that via your example (<img-crop image="image">) doesn't seem to be working. If I simply do <img ng-src="{{image}}"> then the data URI correctly renders an image, but passing $scope.image has no effect when used in the context of the <img-crop> directive from your example. Any ideas? This is such a WONDERFUL use case, would be great to include in the docs, since client side crop is an amazing complement to this directive.

Maybe someone can share what wraps the example crop code from here:

        <!-- crop area if uploaded image-->
        <img-crop ng-show="image" image="image" result-image="croppedImage" area-type="square" result-image-size="250"></img-crop>

@nervgh - I spent days recreating this functionality in raw javascript, and got it working. However, this directive is so well written and documented I'm definitely tossing that work in favor of this library. Great documentation, robust eventing, and modular / flexible - Thank you!!!