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

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

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.

awarded to MSF

Crowdsource coding tasks.

1 Solution

Check this: .

I haven't found a crop with drag, my example uses jCrop:

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:

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 7 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 7 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 7 years ago