4

What I would like to do is

1) Allow the user select an image 2) get the image and add it to a canvas 3) allow manipulation (re-sizing) inside of the canavs 4) Push "Upload" 5) Take the canvas and generate a data URI off of it

This all works dandy in JS leaving me with three hidden fields:

<input type="hidden" id="imageData" name="imageData" />
<input type="hidden" id="imageName" name="imageName" />
<input type="hidden" id="imageCaption" name="imageCaption" />

Here is the Python code

class Image(models.Model):
    filePath = models.CharField(max_length=200)
    imageCaption = models.CharField(max_length=200)
    imageName = models.CharField(max_length=200)

class ImageSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Image
        fields = ('filePath', 'imageCaption','imageName')

class ImageViewSet(viewsets.ModelViewSet):
    queryset = Image.objects.all()
    serializer_class = ImageSerializer

I am missing some key points here.

1) Where / how do I intercept the rest request to parse / handle the incoming REST post to be able to pull apart the Data URI and store the image on disk?

2) I probably don't understand a bunch of this - so if there is something else I am missing, please let me know

I think the trick is in overriding the serializer restore fields method. When it looks for the "file" field, which is built off of the model.FileField, i need to redirect the framework to look for the dataUri field which is the field getting passed, but I need to instantiate a new field,with no limits on the max length. Pull the dataUri apart, store the file, and add the file field to the dictionary of parsed resources and let the framework continue as planned. Overriding the pre_save was not necessary in this case, as this code needed to execute prior to the validation.

JS:

// angularJs controller submit method, using RESTAngular
$scope.submit = function() { //function(event) {

        var someImg = {
            file: ''
            , dataUri: $scope.fileUrl
            , caption: $scope.caption
        }

        ImagesResource.post(someImg )

    }

Python:

class ImageSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Image
        fields = ('file', 'caption','id')

    def saveImage(self, imgFileUri):
        #parse dataUri and save locally, return local path
        return 'somewhereOverTheBlah'

    def restore_fields(self, data, files):
        """
        Core of deserialization, together with `restore_object`.
        Converts a dictionary of data into a dictionary of deserialized fields.
        """
        reverted_data = {}

        if data is not None and not isinstance(data, dict):
            self._errors['non_field_errors'] = ['Invalid data']
            return None

        for field_name, field in self.fields.items():
            print('a: ' + field_name)
            if(field_name == 'file'):
                field_name = 'dataUri'
                field = fields.CharField()
                try:
                    # restore using the built in mechanism
                    field.field_from_native(data, files, field_name, reverted_data)
                    # take the dataUri, save it to disk and return the Path
                    value = reverted_data[field_name]
                    path = self.saveImage(value)
                    # set the file <Path> property on the model, remove the old dataUri
                    reverted_data['file'] = path
                    del reverted_data[field_name]

                except ValidationError as err:
                    self._errors[field_name] = list(err.messages)
            else:
                field.initialize(parent=self, field_name=field_name)
                try:
                    field.field_from_native(data, files, field_name, reverted_data)
                except ValidationError as err:
                    self._errors[field_name] = list(err.messages)

        return reverted_data
Improve this question

3 Answers 3

Reset to default
4

If you are planning to continue using a viewsets.ModelViewSet then you can use any of the method overrides available to a GenericAPIView - mentioned briefly in this link and fully documented in the GenericAPIView Methods section here.

Most useful for you might be the pre_save and post_save hooks provided by the framework which you can override with your own methods, thereby adding your own custom code to the view. pre_save, as you might expect, is called just before the view saves the posted data. One of its parameters is the object that is about to be saved:

def pre_save(self, obj):

so you can perform data enrichment etc. at this point.

If this is not flexible enough for you it's pretty straightforward to build your own custom view which gives you complete control - have a look at chapter 3 of the tutorial for a better explanation than I can provide!

Update - to get around the validation problem mentioned in comments below

DRF performs validation before pre_save gets called so if your file field is missing from your post data your update will be rejected before your custom pre_save code has a chance to be executed. There are couple of ways around this:

  1. Add a validate_<field_name>(self, attrs, source) method to your serializer (validate_file() in your case). This will be called regardless of whether the field has been populated in your post data and you could do your processing in here and add file to attrs before you return it. Note that if file will be based on other fields in the model then implementing the model-level validator (validate(self, attrs)) might be more appropriate. See here for further information.

  2. Build a custom view as suggested above.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Cool-so I think this approach will work, but apparently something on the stack is validating this input prior to getting to pre_save. It is returning the result: {"file": ["This field is required."]} and it is true I am not passing the file variable in the post anymore (now it is fileURI) what I wanted to do is intercept this and create the file variable prior to validation (and potentially still fail the validation). Any thoughts?
Thank you. I tried that and the restore fields was not adding the file field to the dictionary because it was a zero length string. I needed to move further up the stack. Performing this at the restore fields stage, allows for the alternative logic of building the file field and still allowing the validation to occur (and not have to change the Model). Thank you!
2

In the case where the posted JSON/XML doesn't align with the model within django and you need to re-jig the serializer. I used the source and copied out the restore_fields method, and recoded it to deal with the extra code needed.

class ImageSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Image
        fields = ('file', 'caption','id')

    def saveImage(self, imgFileUri):
        #parse dataUri and save locally, return local path
        return 'somewhereOverTheBlah'

    def restore_fields(self, data, files):
        """
        Core of deserialization, together with `restore_object`.
        Converts a dictionary of data into a dictionary of deserialized fields.
        """
        reverted_data = {}

        if data is not None and not isinstance(data, dict):
            self._errors['non_field_errors'] = ['Invalid data']
            return None

        for field_name, field in self.fields.items():
            """
            So it  is iterating over the fields to serialize, when we find the file field
            do something different (in this case look for the fileUri field, handle it and replace
            it inside of the reverted_data dictionary with the intended file field
            """

            if(field_name == 'file'):
                field_name = 'dataUri'
                field = fields.CharField()
                try:
                    # restore using the built in mechanism
                    field.field_from_native(data, files, field_name, reverted_data)
                    # take the dataUri, save it to disk and return the Path
                    value = reverted_data[field_name]
                    path = self.saveImage(value)
                    # set the file <Path> property on the model, remove the old dataUri
                    reverted_data['file'] = path
                    del reverted_data[field_name]

                except ValidationError as err:
                    self._errors[field_name] = list(err.messages)
            else:
                field.initialize(parent=self, field_name=field_name)
                try:
                    field.field_from_native(data, files, field_name, reverted_data)
                except ValidationError as err:
                    self._errors[field_name] = list(err.messages)

        return reverted_data
Improve this answer

Comments

0

1) Where / how do I intercept the rest request to parse / handle the incoming REST post to be able to pull apart the Data URI and store the image on disk?

It's not clear to me how the REST framework fits into this, but form submitted data is in either [request.POST], or [request.FILES] (docs). These objects will be available to you in the Django view that your form posts to. Here's a simple example from the documentation to illustrate that:

from django.shortcuts import render
from django.http import HttpResponseRedirect

def contact(request):
    if request.method == 'POST': # If the form has been submitted...
        form = ContactForm(request.POST) # A form bound to the POST data
        if form.is_valid(): # All validation rules pass
            # Process the data in form.cleaned_data
            # ...
            return HttpResponseRedirect('/thanks/') # Redirect after POST
    else:
        form = ContactForm() # An unbound form

    return render(request, 'contact.html', {
        'form': form,
    })

2) I probably don't understand a bunch of this - so if there is something else I am missing, please let me know

One thing that might help is to take a deeper dive into "Bound and Unbound Forms". Oh, and I just realized you might not be using the Django forms library; if not, that would be a great place to start (including ModelForms). Also, there's a service that intelligently manages file uploads called Filepicker.io; there's a Django package that makes integration with that pretty seamless. If you end up using Filepicker with South for data and schema migrations, you should read this: http://pydanny.com/filepicker-and-south.html

Improve this answer

2 Comments

Thanks I had something similar using a traditional web POST implementation. Moving to the REST based approach - and sending the data across is proving tricky. In the case i dont need to process the data prior to persisting, it is working fine. But in this case I want to save the file to the FS (not the DB), and in this case I need to hook into the DJANGO REST FRAMEWORK in the right place...
Thanks for the form links as well. Will be sure to read them this afternoon.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.