Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ainsley_clark's avatar

Download ZIP File via Axios Post

Hi,

Im coming into some trouble trying to work out how to download a zip file via an axios post request.

Currently the post request sends an object to a controller which creates a directory, files and a zip file. I have learnt that in order to download a file via axios you need to do something like below.

axios.post('/builder/ajax/render', {
    _token: token, 
    scss
})
.then(function (response) {
    const url = new Blob([response.data],{type:'application/zip'});
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.zip');
    document.body.appendChild(link);
    link.click();
})
.catch(function (error) {
    console.log(error);
});

However when doing so, the zip fails, and no files reside within the zip.

Ultimately I would like the use the response download method return response()->download($zip_file); as after the file has been downloaded, I need to empty the folder directory and delete the folder.

Is there an easy way to achieve this? I thought about returning the file path then making GET request to download the file, but thinking this is along way around for a simple problem. The zip file and folder lives inside /temp/unique-id/filename.zip

Controller below:

public function process(Request $request) {

    $scss_dir = '../../mesh-src/src';
    $build_array = $request->input('scss')['build'];

    foreach($build_array as $array_name => $array) {
        foreach($array as $component => $include) {
            if($include == true)  {
                //! NEED TO ADD NOT EQUAL TO HERE
                $this->scss_imports[$array_name] = [
                    $component => '@import \'' .$scss_dir . '/' . $array_name . '/' . $component . '\';'
                ];
            }
        }
    }

    $download_dir = $this->compileScss();
    $zip_file = $this->zipDownload($download_dir);

    // This returns the url to the zip file
    // return response($zip_file); 

    return response()->download($zip_file);
    
}

Many thanks for the help in advance.

0 likes
1 reply
fcoramos's avatar

Try this way:

Axios({
        method: 'post',
	url: '/builder/ajax/render',
	data: {
    		_token: token, 
    	 	scss
	},
	responseType: "arraybuffer"
})
.then(function (response) {
    const url = new Blob([response.data],{type:'application/zip'});
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.zip');
    document.body.appendChild(link);
    link.click();
})
.catch(function (error) {
    console.log(error);
});

Please or to participate in this conversation.