0

I'm going to edit an ImageField using jquery ajax,so I've used jquery form plugin,this is the code:

<form id='form_upload' action="." method="POST" enctype="multipart/form-data">
    <input type='file' id='id_HeadImage' name='id_HeadImage' />
</form>
<script typr="text/javascript">    
var options = {
      dataType: 'xml',
      url: '{% url DrHub.views.editNews param1,param2 %}',
    }
    $('#form_upload').ajaxSubmit(options);
</script>

in <head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script>

and in server side :

if ('id_HeadImage' in request.FILES) and (request.FILES['id_HeadImage']):
    gForm=GalleryForm(request.POST,request.FILES,instance=newsInstance.gallery_ptr)
    if gForm.is_valid():
       gForm.save()

as U can see I'm going to edit ImageField of a model named Gallery. How can I do this?

this is Gallery Model:

class Gallery(models.Model):
   HeadImage = models.ImageField(upload_to="gallery",blank=True,null=True)

While gForm.is_valid() returns True,but It won't be saved and Image of HeadImage Field won't be changed.

Note : I've checked this in firebug and I'm sure that data is sent and request.FILES has value.

what's wrong here?

EDIT : I've worked based on this article: http://www.laurentluce.com/posts/upload-to-django-with-progress-bar-using-ajax-and-jquery/

Asma Gheisari
  • 5,794
  • 9
  • 30
  • 51
  • 2
    why down vote?I think my question is clear!I'm just learning :| – Asma Gheisari Mar 26 '12 at 13:05
  • Normally files cannot be uploaded via ajax. Checkout http://www.webdeveloperjuice.com/2010/02/13/7-trusted-ajax-file-upload-plugins-using-jquery/ – mtnpaul Mar 26 '12 at 13:18
  • But the data of file is sent,I think ModelFOrm should handle it,right? – Asma Gheisari Mar 26 '12 at 14:25
  • @mtnpaul please check carefully. OP uses jquery.form.js, which is listed in the blog you gave, to handle uploading. – okm Mar 26 '12 at 14:45
  • @asma ModelForm is not the issue. I don't think you want to use an ajaxSubmit here (it will just send the filename). ajaxForm may work. See http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery . Please read the second answer. HTML5 may not have this restriction. – mtnpaul Mar 26 '12 at 17:36
  • @okm. I believe the problem is not with using jquery.form.js, but if one uses ajaxSubmit . See the second answer here http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery . – mtnpaul Mar 26 '12 at 17:39
  • As I said it sends data of file besides it's name,U mean that isn't enough?Is there other thing that I should handle?what's in these ready made plugins that make It hard to deal with by your own code? – Asma Gheisari Mar 26 '12 at 19:08
  • Did you try ajaxForm in place of ajaxSubmit? As I recall ajaxForm, checks to see if it is a multipart form and then handles it appropriately. – mtnpaul Mar 29 '12 at 05:41

1 Answers1

1

Try ajaxForm in place of ajaxSubmit:

`

<form id='form_upload' action="." method="POST" enctype="multipart/form-data">
    <input type='file' id='id_HeadImage' name='id_HeadImage' />
</form>
<div id="empty">
</div>

<script type="text/javascript">
 function handleResult(responseText, statusText, xhr, $form) {
              //do stuff here
 };

 jQuery(document).ready(function() {   
      var options = {
          target: '#empty',
          // Not sure if you should use xml here, I would suggest json . , 
          dataType: 'xml',
          url: '{% url DrHub.views.editNews param1,param2 %}',
          success: handleResult,
          }
      $('#form_upload').ajaxForm(options);
 });

</script>`
mtnpaul
  • 686
  • 4
  • 13