I have a forms.ImageField
in my model called Post
. When I create an instance of it, I do it via Ajax, while posting serialized data with data=$(this).serialize()
to my PostCreateAPIView
, which is a generic API CreateView of Django REST Framework, but this method serializes data only and ignores my image.
Here's my code:
My CreateAPIView:
class PostCreateAPIView(generics.CreateAPIView):
serializer_class = PostModelCreateSerializer
permission_classes = [permissions.IsAuthenticated]
def perform_create(self, serializer):
print(self)
serializer.save(user = self.request.user)
My Form:
class PostModelCreateForm(forms.ModelForm):
content = forms.CharField(
label="",
help_text="",#text to help
widget=forms.Textarea( attrs={
'cols' : "50", #size
'rows' : "6", #size
'placeholder' : 'Votre publication',
'style' : 'resize : none'
}))
group = forms.ChoiceField(choices=USER_GROUPS, label='')
class Meta:
model = Post #we define the model
fields = [
"content",
"group",
"photo"
]
$(document.body).on("submit", ".post_form_class",function(event){ event.preventDefault(); this_ = $(this); var formData = this_.serialize(); $.ajax({ method : "POST", url : createPostUrl, data : formData, success : function(data){ }, error : function(data){ } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id = 'post-form' class="post_form_class" method="POST" action="" enctype="multipart/form-data"> <input type='hidden' name='csrfmiddlewaretoken' value='6bgEU7jPVxXskBGJzP7KzSj9mz75k2dpSqG9Fn1kfghUeWQPTKCbm8JJc5za0ecl' /> <p></p> <div id="div_id_content" class="form-group"> <div class="controls "> <textarea name="content" cols="50" rows="6" placeholder="Votre publication" style="resize : none" class="textarea form-control" required id="id_content"> </textarea> </div> </div> <div id="div_id_group" class="form-group"> <label for="id_group" class="control-label requiredField"> Group<span class="asteriskField">*</span> </label> <div class="controls "> <select name="group" class="select form-control" id="id_group"> <option value="1" selected>Département juridique</option> <option value="2">Département ingénieurs</option> <option value="3">Département Commerce</option> <option value="4">Nouveau</option> </select> </div> </div> <div id="div_id_photo" class="form-group"> <label for="id_photo" class="control-label "> Photo </label> <div class="controls "> <input type="file" name="photo" class="clearablefileinput" id="id_photo" /> </div> </div> <div class="row"> <div class='col-sm-2 '> <input class="btn btn-primary submit_form" id="submit_form" type="submit" value="Publier"/> </div> <div class='col-sm-1 col-sm-offset-8 '> <span class='post-chars-left' > </span> </div> </div> </form>
NB: I've tried formData = new FormData(this_);
but I get this error:
TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement
Thanks to Luca, here is the answer:
$(document.body).on("submit", ".post_form_class",function(event){
event.preventDefault();
var formData = new FormData(this);
$.ajax({
method : "POST",
url : createPostUrl,
data : formData,
processData:false,
contentType:false,
success : function(data){
location.reload(true);
},
error : function(data){
console.log("ERROR:CH0x2 while fetching after creation form submit");
console.log("data :",data.status, data.statusText);
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.