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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related