保存画布图像时Django request.FILES为空

Question

I am creating a webapp where the an image is shown to the user and the user can draw on the image (basically the image is in a canvas).

Now once the user is done drawing, the user will press the save button and the image needs to be saved in static folder (not locally). Since I am using Django to accomplish this; my request.FILES is always empty whenever I call the route.

My question is how can I save the canvas on which the user drew to a folder in the project and not locally.

index.html

<div id="uploaderForm">
        <form enctype="multipart/form-data" action="{% url 'addImg' %}" method="post">
            <input type="hidden" for="image_data" id="image_data" name="image_data" />
        </form>

         <div class="uploaderItem" id="uploaderSubmit">
            <a href="#" onclick="addImage();">Add to the gallery</a>
         </div>
</div>

script.js

function addImage()
{   
    console.log("In add image");
    var image_data = canvas.toDataURL();
    console.log("Image data:", image_data);
    $('#image_data').val(image_data);
    $('#uploaderForm > form').submit()

}

views.py

def add(request):
    print request.FILES
    #print request.POST['image_data']
    return HttpResponse("You're looking at question")

Answer 1

the FILES array is reserved for files uploaded in file input fields through a multipart form. What you're doing is passing a base-64 encoded string representing your image, to a hidden text field that is then sent to your server. By your code, the image should be found here:

image_data = request.POST.get('image_data')

It will be a base-64 string, so you'll need to decode it, the example below can be applied to almost any data URL, but the format will depend on your browser, so it's kinda tricky:

import re
pattern = r'^data:(?P<mime_type>[^;]+);base64,(?P<image>.+)$'
result = re.match(pattern, image_data)
if result:
  mime_type = result.group('mime_type')
  image = result.group('image').decode('base64')

Be careful: by not using a file as transport, you are basically dumping the whole image in the server's memory, and that's expensive if you're planning to serve a lot of clients, and it's also time consuming, so your request could timeout before you are done with the image.

To fix this, you should consider uploading the image through AJAX, which is a supported way to treat Blobs in javascript, that way you could use Django's file upload facilities more efficiently