Folder / Directory with large files upload in Django

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(); 
    }); 
});