How do I send zip file(s) via $.ajax() POST without using html form?

Question

I have created a zip file for 2 xml files this way using JSZIP library files namely,

jszip.js

jszip-load.js

jszip-inflate.js

jszip-deflate.js

var zip = new JSZip();
zip.file("hi.xml", "<?xml version="1.0"?><root/></root></xml>");
zip.file("hello.xml", "<?xml version="1.0"?><pest/></pest></xml>");
//var content = zip.generate({ compression: "DEFLATE" });
var content=zip.generate({base64: true, binary: true, compression: "DEFLATE" });

This zipping part is successful, as i am able to get downloads.zip with 2 above files hi.xml & hello.xml in my downloads folder, if I add this code,

location.href="data:application/zip;base64,"+content;

But i am having difficulties when uploading this zip file via ajax without using html form, to the server. This is what I am doing in code,

var oBlob = new (window.BlobBuilder || window.WebKitBlobBuilder ||
                 window.MozBlobBuilder || window.MSBlobBuilder)();

        var raw = atob(content);    //decode the base64 string
        var rawLength = raw.length;
        var uInt8Array = new Uint8Array(rawLength);
        for (var i = 0; i < rawLength; ++i) { //convert to uInt8Array
            uInt8Array[i] = raw.charCodeAt(i);
        }

        oBlob.append(uInt8Array.buffer); //append it to blobbuilder
        oMyForm.append(content, oBlob.getBlob("application/zip")); //because you create a zip file, so get the zip type

        //send it
        $.ajax({
        type: 'POST',
        url: 'requestURL',//java spring servlet URL
        async: false,
        data: { 
            name:'user',
        files:oMyForm
        },
        success: function(msg){
        },
        error : function(jqXHR, textStatus, errorThrown) {
            if(typeof jqXHR == 'object'){
                if(typeof jqXHR.responseText != 'undefined'){
                    if(jqXHR.responseText == 'success'){                        

                    }
                }
            }
        }

    });

Can some one help me in this issue?

I have also done this way,

var oBlob = new (window.BlobBuilder || window.WebKitBlobBuilder ||
                 window.MozBlobBuilder || window.MSBlobBuilder)();

    var raw = atob(content);    //decode the base64 string
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; ++i) { //convert to uInt8Array
        uInt8Array[i] = raw.charCodeAt(i);
    }

    oBlob.append(uInt8Array.buffer); //append it to blobbuilder
    oMyForm.append(content, oBlob.getBlob("application/zip")); //because you create a zip file, so get the zip type

    //send it
    var oReq = new XMLHttpRequest();
    oReq.open("POST", 'requestURL');
    oReq.send(oMyForm);

What is that I am missing here? Why zip files are not being posted to server?

Can some one help me?

score 1 · Accepted Answer · edited May 23 '17 at 12:22

Before anything else, be sure to use the latest JSZip version (jszip-inflate.js no longer exists for example).

Inspired by How can javascript upload a blob? :

var zip = new JSZip();
zip.file("hello.xml", "...");
var content = zip.generate({
    type: "blob",
    compression: "DEFLATE"
});

var fd = new FormData();
fd.append('name', 'user');
fd.append('zip', content);

$.ajax({
    type: 'POST',
    url: 'requestURL',
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
    console.log(data);
});

How do I send zip file(s) via $.ajax() POST without using html form?

1 Answers1