Bootstrap3/angular uploader with with image positioning
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We have a page that allows for drag and drop upload. here is a video of what we do now

http://screencast.com/t/B2edjrCcD33w

which we thought was cool until we say that twitter does the same but allows for some re-positioning of the image. as seen here http://screencast.com/t/Eqf9iF3OsXIv

This bounty is for a sample of this interaction basically drag/drop and then allow the person to reposition the image on the page. Somehow/somewhere we need to store the coordinates for the visible area of the image. I'm open to your ideas on this. ( server side we would probably crop this position on the image - I dont need you to worry about that part but its so you know why we want it)

For the demo please use bootstrap 3 and this uploader from angular. https://github.com/nervgh/angular-file-upload

awarded to MSF

Crowdsource coding tasks.

1 Solution


Check this: http://orbintsoft.azurewebsites.net/Demo/cropUploader/ .

I haven't found a crop with drag, my example uses jCrop: http://deepliquid.com/content/Jcrop.html

It provides a good crop with selectable area.

When you upload , the coordinates are sent to server in POST with the file: x1, x2, y1, y2, h (height), w (width).

Source code: https://onedrive.live.com/#cid=2B542EF04BD69AFE&id=2B542EF04BD69AFE%2112578

I was looking for something that modeled my target ui a bit more, I am having a tough time conceptualizing the jump from the demo to the actual page. I am not sure if you are interested in putting more time on this or not.
Qdev over 5 years ago
Is not simple, these days I have short time, if you have a little patience I'll see what I can do. Thanks.
Stefano Balzarotti over 5 years ago
Sorry for the delay, thanks to jWindowCrop I updated the project, now crop works with drag & drop. Coordinates are sent to server with file during upload.
Stefano Balzarotti over 5 years ago