2

so, after my ajax post request my Django view return a zip file as a response. I want to download that zip file as soon as the response came. But I don't know what to do. I go through many answers but not worked for me. Right now zip file downloading but when I open it's corrupted. My Django response zip file type is <class '_io.BufferedReader'>.

Ajax Code of Post request

function upload(url) {
    let pdf_file = $('#file_input').get(0).files[0];
    let form_data = new FormData();
    form_data.append("file", pdf_file);
    jQuery.ajax({
        url: url,
        type: "POST",
        data: form_data,
        enctype: 'multipart/form-data',
        contentType: false,
        processData: false,
        success: function (response) {
            var binaryData = [];
            binaryData.push(response);
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))
            link.download = 'sample.zip';
            document.body.appendChild(link);
            link.click();
            
        },
        error: function (response) {
            loading_btn.classList.add("d-none");
            upload_btn.classList.remove("d-none");
        }
    });
}

ajax Response

enter image description here

Django View

@csrf_exempt
def upload_file(request):
    if request.is_ajax() and request.method == 'POST':
        zip_file = open('/home/deftbox/PycharmProjects/pdf_data_Extractor/test.zip', 'rb')
        return FileResponse(zip_file)

After zipping download when I open my zip file it comes with an error **An error occurred while loading the archive. *

error while opening zip file enter image description here

Mad's Man
  • 113
  • 1
  • 9
  • https://stackoverflow.com/questions/4545311/download-a-file-by-jquery-ajax – Alex Paramonov Jul 26 '21 at 13:17
  • @AlexParamonov thanks for recommendation, but i update my question can you check it again . – Mad's Man Jul 26 '21 at 13:27
  • Take your original /home/deftbox/PycharmProjects/pdf_data_Extractor/test.zip file and the one that you get after downloading it and compare it in a binary diff tool for example. They should be the same. If now - see maybe there is some trash or text added to the beginning or at the end of your zipfile. Opening the original file also makes sense, maybe the original is also broken :) Just to make sure. – Alex Paramonov Jul 26 '21 at 13:58

1 Answers1

0

If you want to download a (binary) file with jQuery.ajax you have to use the xhrFields to set a binary responseType

function upload(url) {
    let pdf_file = $('#file_input').get(0).files[0];
    let form_data = new FormData();
    form_data.append("file", pdf_file);
    jQuery.ajax({
        url: url,
        type: "POST",
        data: form_data,
        contentType: false,
        processData: false,
        xhrFields:{
            responseType: 'blob'
        },
        success: function (response) {
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(response)
            link.download = 'sample.zip';
            document.body.appendChild(link);
            link.click();
            
        },
        error: function (response) {
            loading_btn.classList.add("d-none");
            upload_btn.classList.remove("d-none");
        }
    });
}
Musa
  • 96,336
  • 17
  • 118
  • 137