Django JQuery Ajax File Upload

Here is what I changed to get it working.

1. I used FormData to package up data from form

2. Notice the parameters of the form in the Django view. I was not specifying "files" before and that's what caused the " file field required" error.

Javascript:

function upload(event) {event.preventDefault();var data = new FormData($('form').get(0));$.ajax({    url: $(this).attr('action'),    type: $(this).attr('method'),    data: data,    cache: false,    processData: false,    contentType: false,    success: function(data) {        alert('success');    }});return false;}$(function() {    $('form').submit(upload);});

Django View:

def upload_view(request):    if request.method == 'POST':        form = FileUploadForm(data=request.POST, files=request.FILES)        if form.is_valid():            print 'valid form'        else:            print 'invalid form'            print form.errors    return HttpResponseRedirect('/ingest/')

Here's how we can send json data in addition to files using Ajax to Django.

Example:

JS using form-data

var formData = new FormData();formData.append('file1', myFile); const data_ = JSON.stringify(data)formData.append('data', data_);doPost(url, formData).then(result => { })

Django using request.FILES & request.POST

data = json.loads(request.POST.get('data')) files = request.FILES attached_file1 = files.get('file1', None) attr1 = data.get('attr1', None)

You can't use jQuery to upload files asynchronously. You options are:

1.Submit the form "the usual way". This, of course, will refresh the page.

2.Use XHR: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest but beware that it's not supported on IE 8/9 . On those browsers you would need to fall back to an iframe and a form that posts to it, to mimic an asynchronous upload.

3.Use https://github.com/blueimp/jQuery-File-Upload It does what I described in 2. but spares you all the configuring.