I'm developing an application that requires users to upload a massive directory of multiple files/file types/subfolders. It will be handling 10's possibly 100s of GB per user, so having a progress bar displayed while uploading will be very helpful in informing the user the progress of the massive files.
My current setup is based on the following answer to another question: https://stackoverflow.com/a/52016594/15739035
Here is a simplified setup:
models.py:
class Feed(models.Model):
user=models.ForeignKey(User, on_delete=models.CASCADE)
text=models.TextField(blank=False, max_length=500)
class FeedFile(models.Model):
file = models.FileField(upload_to="files/%Y/%m/%d")
feed = models.ForeignKey(Feed, on_delete=models.CASCADE)
forms.py:
class FeedModelForm(forms.ModelForm):
class Meta:
model = Feed
fields = ['text']
class FileModelForm(forms.ModelForm):
class Meta:
model = FeedFile
fields = ['file']
widgets = {
'file': ClearableFileInput(attrs={'multiple': True}),
}
# widget is important to upload multiple files
views.py:
def upload_files_view(request):
user = request.user
if request.method == 'POST':
form = FeedModelForm(request.POST)
file_form = FileModelForm(request.POST, request.FILES)
files = request.FILES.getlist('file') # field name in model
if form.is_valid() and file_form.is_valid():
feed_instance = form.save(commit=False)
feed_instance.user = user
feed_instance.save()
total_files = len(files) # Get the number of files in 'files'
files_count = 0 # Use to show user the progress out of 'total_files'
for f in files:
file_instance = FeedFile(file=f, user=use, feed=feed_instance)
file_instance.save()
progress = f"{total_files}/{files_count}"
# render(request, 'some_folder/upload_progress.html', {'file_form': file_form, 'form': form, 'progress': progress}) # somehow refresh the page showing 'progress' in an html tag?
files_count += 1
return redirect('upload_success_page')
else:
form = FeedModelForm()
file_form = FileModelForm()
return render(request, 'some_folder/file_upload.html', {'file_form': file_form, 'form': form})
My end goal is to get the total file count (like the above views.py file shows), detect what file is currently being uploaded, and return that value to a template for the user to monitor somehow. (You can see what I've attempted above in the views.py file, however this method doesn't work for a number of reasons.)
My question: How do I get this information while the files are being uploaded, and send it to the template/page the user is viewing?
Here is an example of the Google Drive folder upload progress bar, a folder of 1185 files is being uploaded and the current progress is 11:
In terms of research I've done, I've found many similar questions about using Ajax. All of the other StackExchagne questions are either really old or don't have an answer and weren't much help. This article seemed promising, however it appears that the code is unfinished, and I couldn't get it to work: https://anshu-dev.medium.com/file-upload-progress-bar-using-django-and-ajax-ba4eb7482d9c
In my opinion the ideal method would be entirely using Django views.py, however I'm not entirely sure if or how this would be possible.
I really appreciate any help I can get, thank you for your time!