How to bind base64 data in a django form ImageField
<p>I'm implementing an ajax form submission that resizes images before submitting them. The javascript basically reads the file as an <code>Image</code>, resizes and draws to <code>canvas</code>, and then appends the data to a <code>FormData</code> object:</p>

<pre><code>var fd = new FormData();
fd.append("image0", canvas.toDataURL("image/png"));
</code></pre>

<p>I then do an ajax submission to my django view, verifying with a <code>ModelForm</code>:</p>

<h3>forms.py</h3>

<pre><code>class InsertProduct(forms.ModelForm):
    image0 = forms.ImageField(
        required=True, 
        max_length=64, 
        widget=forms.FileInput( attrs={"id": "image0",} )
    )
</code></pre>

<h3>views.py</h3>

<pre><code>def ajax_upload(request):
    if request.method == 'POST':
        form = InsertProduct(request.POST, request.FILES)
        print(request.POST.urlencode())
        print(form.errors)
</code></pre>

<p>The <code>urlencode()</code> tells me that I'm receiving the data:</p>

<pre><code>image0=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABE...
</code></pre>

<p>But the form errors tells me that I'm not binding it properly:</p>

<pre><code>&lt;ul class="errorlist"&gt;
    &lt;li&gt;image0&lt;ul class="errorlist"&gt;&lt;li&gt;This field is required.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Maybe the ImageField is looking for the data in request.FILES instead of request.POST? How do I get this working?</p>