Angular File Upload, jCrop, and Rotate

javascript angularjs file-upload angularjs-directive jcrop
user3495469 picture user3495469 · Apr 3, 2014 · Viewed 7.2k times · Source

I am using this angular file uploader directive (with modifications):http://nervgh.github.io/pages/angular-file-upload/examples/image-preview/.

I was able to get the source and redraw the image so it is larger. One of my requirements is that user should be able to crop and rotate that image.

I planned on using jCrop, but I am unable to get it to work and am at a loss. The jcrop-holder appears in the HTML, but it has width and height of 0.

My code is here: http://plnkr.co/edit/bC3g58ZdTGGJeoueipnQ?p=preview

Would anyone have any suggestions on what I could do to make it work?

Answer

user3495469 picture user3495469 · Apr 9, 2014

My colleague solved my problem and I hope this will help others!

https://github.com/LukeMason/angular-img-editor

Related questions

File Upload with Angular Material

I'm writing an web app with AngularJS and angular-material. The problem is that there's no built-in component for file input in angular-material. (I feel that file uploading doesn't fit the material design, but I need it in my app) Do …

Read More
Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular)

Wrong question asked, see my update below I need to integrate my AngularJS Project with an existing RESTful API. These API consume POST request which upload a file, and also submit the form data in a request. Unfortunately, one of …

Read More
Angular File Upload with Parameters

I'm using Angular-file-upload to upload files to an API by doing this: var upload = function (file) { return $upload.upload({ url: '/api/place/logo', data: {place_id: 1, token: <some_token>}, file: file }); }; All the parameters seem to be …

Read More