title: Django ajax upload image
body: <p>I try to upload image, using Ajax without django forms.</p>
  
  <p>It not return errors.
  Everything it's ok, it save in database "name" and "description" but not save "image" :(</p>
  
  <p>My code: </p>
  
  <p>views.py</p>
  
  <pre><code>def add(request):
  articles = Article.objects.all()
  if request.method == 'POST':
       if request.is_ajax():
          name = request.POST.get('name')
          description = request.POST.get('description')
          icon = request.FILES.get('icon')
          article_new = Article(
              name=name,
              description=description,
              icon=icon
          )
          article_new.save()
  
  return render_to_response('home.html', {'articles':articles}, context_instance=RequestContext(request))
  </code></pre>
  
  <p>models.py</p>
  
  <pre><code> class Article(models.Model):
      name = models.CharField(max_length=100, null=True, blank=True)
      description = models.TextField()
      icon = ThumbnailerImageField(upload_to='uploads')
  </code></pre>
  
  <p>html </p>
  
  <pre><code> &lt;form  method="POST"  enctype="multipart/form-data"&gt;
    {% csrf_token %}
        &lt;input type="text" id="inputName"&gt;
        &lt;input type="text" id="inputDescription"&gt;
        &lt;input type="file" id="inputFile"&gt;
        &lt;button id="submit"  type="submit"&gt;Add&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code> //For doing AJAX post
   $("#submit").click(function(e) {
      e.preventDefault();
      var name = $('#inputName').val();  
      var description = $('#inputDescription').val();
      var icon = $('#inputFile').val();
  
  
  //This is the Ajax post.Observe carefully. It is nothing but details of where_to_post,what_to_post
  $.ajax({
      url : "/add", // the endpoint,commonly same url
      type : "POST", // http method
      data : { csrfmiddlewaretoken : csrftoken,
      name : name,
      description : description,
      icon: icon
      }, // data sent with the post request
          // handle a successful response
          success : function(json) {
          console.log(json); // another sanity check
          },
          // handle a non-successful response
          error : function(xhr,errmsg,err) {
          console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
          }
      });
  });
  </code></pre>