Upload file with plain AJAX/JS and Django

Question

this is my popup form

<div class="popup media-upload-form">
   <div class="border cf">
     <div class="close">X</div>
   </div>
  <form class="cf" action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}

    <!-- {{ form.as_p }} this is what i use, just putting plain html to show you all inputs -->
    <p>
      <label for="id_audio">Audio:</label>
      <input type="file" name="audio" required id="id_audio" />
    </p>
    <input class="button" type="submit" value="Upload" />
  </form>
</div>

this how i used to do it without ajax

def upload_media(request):
    if request.method == 'POST':
        form = forms.MediaForm(request.POST, request.FILES)
        if form.is_valid():
            media_file = form.cleaned_data['audio']
            media = models.PlayerMedia()
            media.user = request.user
            media.title = str(media_file)
            media.description = 'good song'
            media.media = media_file
            media.save()

        return HttpResponse('done')

file is coming from requets.FILES['filename'] and that's the problem, i don't know how to send file from js to django view. JQuery has some plugins but i want to do it without any libraries.

this is what i have so far

var uploadForm = document.querySelector('.media-upload-form form');
var fileInput = document.querySelector('.media-upload-form form #id_audio');

uploadForm.onsubmit = function(e) {
    e.preventDefault();

    var fileToSend = fileInput.value; // this is not it
}

so how do i get reference to selected file and send it with ajax to Django for processing?

void · Accepted Answer · 2017-06-15 21:47:38Z

3

I got it!

Turns out, i needed a FormData object to send files, so i get file out of input with files property, and just created FormField put in file with append function and send as regular data, here's what it looks like

var mediaFile = fileInput.files[0];
var formData = new FormData();
formData.append('media', mediaFile);

request.send(formData); // done

and then receive it from Django view with request.FILES

def upload_media(request):
    if request.method == 'POST':
        media_file = request.FILES['media']

answered Jun 15, 2017 at 21:47

void

933 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Upload file with plain AJAX/JS and Django

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related