POST data using AJAX POST

Question

Is it possible to post image file using the jQuery's ajax post method. Would it work if I just put the file data in the POST request's 'data' parameter?

I am using django framework. This is my first attempt:

$('#edit_user_image').change(function(){ var client = new XMLHttpRequest(); var file = document.getElementById("edit_user_image"); var csrftoken = document.getElementsByName('csrfmiddlewaretoken')[0].value /* Create a FormData instance */ var formData = new FormData(); formData.append("upload", file.files[0]); client.open("post", "/upload-image/", true); client.setRequestHeader("X-CSRFToken", csrftoken); client.setRequestHeader("Content-Type", "multipart/form-data; charset=UTF-8; boundary=frontier"); client.send(formData); /* Send to server */ });

The problem with this is that I don't get the'request.FILES' object on the serer side in my 'views.py'.

I also tried doing it with ajax post but it doesn't work either.

$('#edit_user_image').change(function(){ var data = {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value, content:document.getElementById("edit_user_image").files[0],} $.post("/upload-image/", data, function(){ }); });

Edit from one of the answers:

$('#edit_user_image').change(function(){ var formData = new FormData($("#edit_user_image")[0]); $.ajax({ type: "POST", url: "/upload-image/", xhr: function() { // custom xhr // If you want to handling upload progress, modify below codes. myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // check if upload property exists myXhr.upload.addEventListener('progress', yourProgressHandlingFunction, false); // for handling the progress of the upload } return myXhr; }, data: formData, // Options to tell JQuery not to process data or worry about content-type cache: false, contentType: false, processData: false, beforeSend: function(xhr) { // If you want to make it possible cancel upload, register cancel button handler. $("#yourCancelButton").click(xhr.abort); }, success: function( data ) { // Something to do after upload success. alert('File has been successfully uploaded.'); location.reload(); }, error : function(xhr, textStatus) { // Something to do after upload failed. alert('Failed to upload files. Please contact your system administrator. - ' + xhr.responseText); } }); });

You really need to provide some more information. What are you trying to accomplish? Posting an image file is possible if you have it base64 encoded but you'll need to server to be expecting base64. Just fill in some blanks and we'll help you out. — crempp
– crempp, Commented Dec 21, 2013 at 5:08

toothie · Accepted Answer · 2013-12-21 09:39:53Z

This is my final working solution:

$('#edit_user_image').change(function(){ var csrftoken = document.getElementsByName('csrfmiddlewaretoken')[0].value var formData = new FormData($("#edit_user_image")[0]); var formData = new FormData(); formData.append("file", $('#edit_user_image')[0].files[0]); formData.append("csrfmiddlewaretoken", csrftoken); $.ajax({ type: "POST", url: "/upload-image/", data: formData, contentType: false, processData: false, }); });

It works! I spent almost 2 days for googling and experiments! Thank you.

Victor Castillo Torres · Accepted Answer · 2013-12-29 07:13:30Z

You can if you use FormData, otherwise you have to use Flash or iframes or Plugins (these ones use flash or iframes), FormData comes with HTML5 so it won't work in IE <= 9, a great guy created a replica of FormData for old browsers, to use it you only have to put formdata.js in the head tag. So in my opinion you have to use FormData.

We say you have a form like this:

<form method="POST" name="form" id="form" enctype="multipart/form-data"> <input type="file" id="img"/> <input type="submit"/> </form>

you have to get the img chosen by the user so your javascript have to look like this:

$(document).ready(function(){ $('form').on('submit', function(e){ e.preventDefault(); var data = new FormData($('form').get(0)); $.ajax({ url: :"/URL", method: "POST", data: data, success: function(data){}, error: function(data){}, processData: false, contentType: false, }); }); });

and now you are going to be able to retrieve the img chosen by the user in django with:

request.FILES

This seems similar to the other answer. I have tried its code but i get 'Failed to upload files. Please contact your system administrator'
This is the only way, where do you get that error? in django?
No, did u read the snippet from the other answer. This error is caused if the ajax fails.
Yeah, but that's because something is broken in django etc., you can inspect the response with the google chrome's dev tools or firebug in Firefox.
If thats the case, I wonder what could be possibly wrong with this simple 'view': def upload_image(request): if request.method=="POST": if request.FILES: return HttpResponse( "AJAX" ) else: return HttpResponse("bad")

Hosang Jeon · Accepted Answer · 2013-12-21 05:09:14Z

Yes. You can post your image file using jQuery's ajax.

Try below code snippet.

// Your image file input should be in "yourFormID" form. var formData = new FormData($("#yourFormID")[0]); $.ajax({ type: "POST", url: "your_form_request_url", xhr: function() { // custom xhr // If you want to handling upload progress, modify below codes. myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // check if upload property exists myXhr.upload.addEventListener('progress', yourProgressHandlingFunction, false); // for handling the progress of the upload } return myXhr; }, data: formData, // Options to tell JQuery not to process data or worry about content-type cache: false, contentType: false, processData: false, beforeSend: function(xhr) { // If you want to make it possible cancel upload, register cancel button handler. $("#yourCancelButton").click(xhr.abort); }, success: function( data ) { // Something to do after upload success. alert('File has been successfully uploaded.'); location.reload(); }, error : function(xhr, textStatus) { // Something to do after upload failed. alert('Failed to upload files. Please contact your system administrator. - ' + xhr.responseText); } });

I got this using above code: 'Failed to upload files. Please contact your system administrato'

Angry Cat · Accepted Answer · 2013-12-22 09:01:14Z

0

My suggestion is add "return false after the ajax block.

answered Dec 22, 2013 at 9:01

Angry Cat

2511 silver badge6 bronze badges

Collectives™ on Stack Overflow

POST data using AJAX POST

4 Answers 4

1 Comment

9 Comments

2 Comments

Comments

Linked

Hot Network Questions