Folder / Directory with large files upload in Django - django-views

Question

I am trying to upload a folder with multiple files that will be zipped before storing it into the database. I am following ajax file upload technique and Django/python to accomplish it. The following code is working fine when the file size is small. When file size is larger, it created multiple small files of that single file. I think it's because before uploading the whole file, my program is starting to write the already received chunk of that file.
I believe the problem is in view.py where I am writing the uploaded files. Can anyone please help me with some advice so I can solve this problem?
I have posted an image of my directory before and after uploading it.
enter image description here
View.py:
def handle_uploaded_file(upload_file,file_path,zipfile):
full_path = "%s/%s" % (file_path, upload_file.name)
for chunk in upload_file.chunks():
zipfile.writestr(full_path,chunk)
def fileUploadView(request):
file_obj = file_store()
if request.method == "POST":
filename = request.session.get('file_name')
directory_name = request.POST.get('directories')
#write zip file with uploaded folder
zipfile = ZipFile(filename,'a',ZIP_DEFLATED)
json_to_dictionar = json.loads(directory_name)
for upload_file in request.FILES.getlist('file'):
file_path = os.path.dirname(json_to_dictionar[upload_file.name])
if os.path.exists(file_path):
handle_uploaded_file(upload_file,file_path,zipfile)
else:
os.makedirs(file_path)
handle_uploaded_file(upload_file,file_path,zipfile)
zipfile.close()
file_obj.file = File(open(zipfile.filename,'rb'))
file_obj.fileName = os.path.basename(zipfile.filename)
file_obj.save()
data = {'name':file_obj.fileName, 'url':file_obj.fileName}
return render(request, 'fileupload_app/transfer_list/index.html',data)
else:
return render(request,'fileupload_app/basic_upload/test.html',{})
HTML Template:
<form id="my-form" method="POST" action="{% url 'fileupload_app:basic_upload' %}" enctype="multipart/form-data">
{% csrf_token %}
<div id="file-wrap">
<p>Drag and drop file here</p>
<input id="my-file" type="file" name="file" multiple webkitdirectory directory draggable="true">
<input type="text" id="directories" name="directories" hidden />
</div>
<br>
<input type="submit" value="upload">
</form>
Ajax Function:
$( function() {
$("#my-file").on('change', function (e) { // if file input value
$("#file-wrap p").html('Now click on Upload button'); // change wrap message
});
$("#my-form").on('submit', function (e) {
files = document.querySelector("#my-file").files;
var directories = {}
for (var file of files) {
file.webkitRelativePath
directories[file.name] = file.webkitRelativePath
}
directories = JSON.stringify(directories);
document.querySelector("#directories").value = directories
var eventType = $(this).attr("method");
var eventLink = $(this).attr("action");
$.ajax({
type: eventType,
url: eventLink,
data: new FormData( this ),
cache: false,
contentType: false,
processData: false,
success: function(getResult) {
$('#my-form')[0].reset();
$("#result").html(getResult);
$("#file-wrap p").html('Drag and drop file here');
}
});
e.preventDefault();
});
});