django file upload progress bar with XMLHttpRequest

Question

i created a normal django model.ModelForm and it is worked perfectly until i tried to add Progress bar for files uploading, i have an issue. i recieve the form information(request.POST and request.FILES) twice! but it is save the data only once in database, so also it is work, but i know i have a mistake in my code and i want to understand my mistake.

this is my function for displaying the progress bar:

function UploadFilesWithProgress(form, url) {
    const progressbarWrap = document.querySelector('.progress-bar-wrap'),
         label = progressbarWrap.querySelector('h6'),
         percentage = progressbarWrap.querySelector('span'),
         progressbarFill = progressbarWrap.querySelector('.progress > .progress-bar')

    let xhr = new XMLHttpRequest()

    xhr.open('POST', url, true);
    xhr.upload.onloadstart = function (e) {
        progressbarWrap.classList.remove('d-none')
        percentage.textContent = '0%'
        label.textContent = 'uploading...'
    };

    xhr.upload.onprogress = function (e) {
        const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0;
        progressbarFill.style.width = percent.toFixed(2) + '%';
        progressbarFill.setAttribute('aria-valuenow', percent.toFixed(2))
        percentage.textContent = percent.toFixed(2) + '%';
    }

    xhr.upload.onloadend = function (e) {
        label.textContent = 'uplaod completed!'
        percentage.textContent = 'completed!'
    }
    xhr.send(new FormData(form));
}

Form = document.getElementById('add-course-form')
if (Form) {
    Form.onsubmit = function () {
    UploadFilesWithProgress(Form, Form.action); 
    }
}

and this is my view:

        # I use CBV, so i share just the post method to not get missy.

        def post(self, *args, **kwargs):
            form = OfflineTutorialForm(
            user=self.request.user.booth,
            data=self.request.POST,
            files=self.request.FILES
            )
            video_formset = AddOfflineVideoTutorialFormSet(
            data=self.request.POST,
            files=self.request.FILES
            )

           print(self.request.POST, self.request.FILES)
           if form.is_valid() and video_formset.is_valid():
               off_tutorial = form.save(commit=False)
               off_tutorial.booth = self.request.user.booth
               off_tutorial.save()
               form.save_m2m()
               video_off_tutorial = video_formset.save(commit=False)
               for video in video_off_tutorial:
                   video.tutorial = off_tutorial
                   video.save()
           return redirect('offline-tutorial')
       return redirect('/')

Musa · Accepted Answer · 2020-12-16 00:20:06Z

1

It looks like you are uploading the data via form submit and ajax, you can prevent the form from submitting normally with event.preventDefault()

Form.onsubmit = function (event) {
    event.preventDefault();
    UploadFilesWithProgress(Form, Form.action); 
}

answered Dec 16, 2020 at 0:20

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

2 Comments

SerioUs Over a year ago

thanks dude, actually it is work perfectly now, but i wonder how i can make a redirect after ajax call, i don't want left the user there, should i do another way for progress bar, or i have to make the redirect with javascript and ajax?

Musa Over a year ago

You can redirect via javascript, after your ajax request completes do location.href = '/';

Collectives™ on Stack Overflow

django file upload progress bar with XMLHttpRequest

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related