Django (2)

Upload files to Django Rest Framework using AngularJS

Encoding the image to “base64”, send it to our DRF endpoint and on our DRF serializers change the ImageField to Base64ImageField was the implementation I used:

On the client side, on my angular app:

angular.controller('ImageUploadFormCtrl', function($scope, Photo){
  $scope.submitForm = function(isValid){
      f = new FileReader(); // or $window.FileReader()
      f.onload = function () {
        $scope.formData.image = f.result; // This is a base64 string{}, $scope.formData).$promise.then(function(data){
          // 200 Response
          alert('Client image successfully updated.');
        }, function(error){
          // 400 Response
          console.log('Error', error);
          alert('An error has ocurred.');
      // Read the file selected on the field with ID "image-field"

On the server side on my Django app, specifically on the file:

import base64, uuid
from django.core.files.base import ContentFile

class Base64ImageField(serializers.ImageField):
  def to_internal_value(self, data):
    if isinstance(data, basestring) and data.startswith('data:'): # You can change "data:" to "data/image:"
      format, imgstr = data.split(';base64,')
      ext  = format.split('/')[-1]
      id   = uuid.uuid4()
      data = ContentFile(base64.b64decode(imgstr), name=id.urn[9:])

    return super(Base64ImageField, self).to_internal_value(data)

class PhotoSerializer(serializers.ModelSerializer):
  image = Base64ImageField(allow_empty_file=False)
  class Meta:
    fields           = ('id', 'image')
    model            = Photo
    read_only_fields = ('id', )

I found out that this is the cleaner way to do this. If you have another alternative, please share it.

Scaling Django Properly

I’m in love with Django and as a love we should be able to know how to scale Django properly that’s why I’m sharing this video with you. So you can make your Django deployment “greater again” (no pun intended).