$.ajax({
url: 'url/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 depression. Any ideas?
$.ajax({
url: 'url./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 depression. Any ideas?
Share Improve this question edited Oct 5, 2017 at 9:00 Liam 29.8k28 gold badges138 silver badges202 bronze badges asked Oct 5, 2017 at 8:52 candy_mancandy_man 6197 silver badges11 bronze badges 5- 7 why not just do the "get" of the zip on backend, from the given url? Would make it way easier – Hugo REGIBO Commented Oct 5, 2017 at 8:53
- 1 why do you want to do this wonderful idea?you like to have high traffics to your site? – madalinivascu Commented Oct 5, 2017 at 9:10
- @HugoRegibo I have client side that needs this then send it to the backend server. The 'get' works but the data I get is in binary and does not seem to be recognized as zip anymore. – candy_man Commented Oct 5, 2017 at 9:16
- @madalinivascu Do you have an idea of how I can make it happen for me? :-) – candy_man Commented Oct 5, 2017 at 9:17
- where is the handleUpload function? – madalinivascu Commented Oct 5, 2017 at 9:22
2 Answers
Reset to default 6You can get the data in binary format like this.
xhr.open('GET', 'url./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();
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" );
} );
} );