How to download and upload zip file without saving to disk

Question

 $.ajax({
      url: 'url.com/myfile.zip',
    })
      .then((data) => {
        const blob = new Blob([parsed_data], {type: 'application/octet-stream'});
        const file = new File([blob], filename, {type: 'application/zip'});
        this.handleUpload(file); // Sends POST request with received file
      });   

I am trying to download and immediately upload a zip file. The upload endpoint does not however recognize the received file as zip though it is downloaded as zip but seen as type string. I need a way to handle the file as is in my promise without decompression. Any ideas?

Answer 1

You can get the data in binary format like this.

xhr.open('GET', 'url.com/myfile.zip', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var data = this.response;
    const blob = new Blob(data, {type: 'application/octet-stream'});
    const file = new File(blob, filename, {type: 'application/zip'});
    this.handleUpload(file); // Sends POST request with received file
  }
};

xhr.send();

Answer 2

You can use the response as a blob, as described in MDN.

/**
 * Downloading the file
 *
 * @param {string} file - The url of the target file
 * @param callback      - Callback for when we are ready
 */
function download( file, callback ) {

    const request = new XMLHttpRequest();

    request.open( "GET", file, true );
    request.responseType = "arraybuffer";

    request.onreadystatechange = () => {

        /** Do nothing if we are not ready yet */
        if ( request.readyState !== XMLHttpRequest.DONE ) { return; }

        if ( request.status === 200 ) {
            callback( new Blob( [request.response], { type : "application/zip" } ) );
        } else {
            console.error( request.status );
            callback( false );
        }

    };

    request.send();

}

Then for uploading ( usually ) you use FormData.

/**
 * Uploading the file
 * @param {Blob}   blob.    - A blob of file
 * @param {string} filename - The file name
 * @param {string} url.     - The upload rest point
 * @param callback          - Callback for when we are ready
 */
function upload( blob, filename, url, callback ) {

    const formData = new FormData(),
          request  = new XMLHttpRequest();

    /** Configure the request */
    request.open( "POST", url, true );

    formData.append( "file", blob, filename );

    /** Sets the callback */
    request.onreadystatechange = () => {

        /** Do nothing if we are not ready yet */
        if ( request.readyState !== XMLHttpRequest.DONE ) { return; }

        /** Sends back the response */
        if ( request.status === 200 ) {
            callback( true );
        } else {
            console.error( request.status );
            callback( false );
        }

    };

    /** Send the request */
    request.send( formData );

}

Putting it all together :

download( "/uploads/file.zip", function( blob ) {        
    upload( blob, "file.zip", "/api/upload", function( success ) {
        console.log( success ? "File was uploaded" : "Error occurred" );
    } );
} );