django-rest-imageupload-example icon indicating copy to clipboard operation
django-rest-imageupload-example copied to clipboard

Extension of this project

Open chetanreddym opened this issue 7 years ago • 3 comments

This is not an issue, but I am trying to extend this project by adding few more functionalities to it like: 1)I want to add one more button for every image called segment(see image) 2)on clicking this button that corresponding image should be passed to my view(python script).this python script returns four values(x,y,w,h) and i want to render these coordinates as a bounding box on the corresponding image.

Can you point me to the right resources to learn about this and implement it.

chetanreddym avatar Jan 03 '18 05:01 chetanreddym

@ChristianKreuzberger Can you please help me with this.Can you atleast give me the procedure(flow) which i need to implement.

chetanreddym avatar Jan 03 '18 07:01 chetanreddym

@ChristianKreuzberger after some reading i learned that i should a $http request from my controller to the django view.so i did this in my app.js file $http({method:'POST', url:'127.0.0.1:8000/image/segment_image/', data:{'image': image}, headers: {'Content-Type': 'application/x-www-form-urlencoded'}}) .then(function successCallback(response) { console.log('success') },function errorCallback(response) { console.log('failed') console.log(response.config) console.log(response.statusText) } )};

A simple view like this:

def script_function(request): if request.method == 'POST': print(request.body) data=json.loads(request.body) print(data) x = y = w = h = 102 return x, y, w, h

But i am not sure where to place this views.py and its corresponding url, whether in frontendapp or backenfd app.and also i ma not sure of how to render this x,y,w,h values back to angular app, so that i can use them.

chetanreddym avatar Jan 04 '18 12:01 chetanreddym

Hi! First of all, you would want to write a REST API View with the @detail_route decorator, e.g.: http://www.django-rest-framework.org/api-guide/routers/#extra-link-and-actions

This would go into the UploadedImagesViewSet: https://github.com/ChristianKreuzberger/django-rest-imageupload-example/blob/master/django_rest_imageupload_backend/imageupload_rest/viewsets.py

Instead of doing return x, y, w, h I recommend returning a dictionary:

return {'x': x, 'y': y, 'w': w, 'h': h}

In your frontend you can accomplish accessing this by using $http, or even better, extending the $resource Images service in https://github.com/ChristianKreuzberger/django-rest-imageupload-example/blob/master/django_rest_imageupload_backend/imageupload_frontend/static/js/images.rest.js

ChristianKreuzberger avatar Jan 04 '18 17:01 ChristianKreuzberger