Streamed File Zipping and Downloading in PHP

Weebly Engineering
Feb 2, 2017 · 4 min read
Image for post
Image for post

Originally published on

Did you notice that on, you can select a folder and start downloading it while it’s being zipped? This on-the-fly zipping feature comes handy for both the user and the server — as a user you don’t have to wait until the files are zipped on the back end before the downloading starts, and it saves the server from creating a temporary zip file and deleting it afterwards.

In this case the browser has no idea when the streamed zip file ends or how big the whole zip file will be, so what the user will see is something like:

Image for post
Image for post

In the Network tab, this is what such a request looks like:

Request Headers (excerpt):
accept:text/plain, */*; q=0.01
accept-encoding:gzip, deflate
content-type:application/x-www-form-urlencoded; charset=UTF-8

Response Headers (excerpt):
content-disposition:attachment; filename=””
date:Fri, 16 Dec 2016 20:01:47 GMT

Note that the content-disposition option is set to attachment. This indicates that the browser should interpret the response as a file download, rather than attempting to display the response as a web page. For details on how this option works, please refer to .

To implement this feature with PHP, we handle the zipping and streaming work on the back end using . Assuming your files are on the server and can be loaded with given a path:

​Under the hood, when you call $zip->finish(), ZipStream takes care of setting the response headers (content-disposition, content-type, etc.) and makes sure that the browser treats this response as a file download. Finally it calls fwrite to send the data stream.

If your files are hosted on cloud services such as AWS/S3, you’ll need to use the appropriate method to load the file’s content, and call ZipStream’s lower-level method $zip->addFile($file_name, $file_content). See the following example with AWS/S3:

$file_name = ‘my_awesome_picture.jpg’;
$file = $client->getObject([
‘Bucket’: ‘my_pictures_bucket’,
‘Key’: $file_name
$file_content = (string) $file[‘Body’];
// similar to above, except the second parameter being file content
$zip->addFile($file_name, $file_content);

On the front end, all we need to do is to send a request with a payload of identifiers of the user-selected files and/or folders. This depends on your app. It’s also worth mentioning that this request cannot be made via Ajax — in this case all Ajax could do is acquiring the zipped file in the form of a binary string, but cannot initiate file downloading. We have to resort to lower-level HTML <form>. Insert the following auxiliary <form> anywhere in your DOM:

​Note that although this request involves fetching a zipped file from the backend, we use a POST method here simply because the request payload can get pretty long if the user selected a load of files/folders. In that case, a GET method may end up with an .

The next thing is to load data into this form (by inserting <input>s) and submit it via Javascript:

var $form = $(‘#downloader-form’);
// Append CSRF token for POST method
name: ‘_token’,
value: ‘<your_CSRF_token>’
// User-selected files, assuming files are identified by UUIDs
name: ‘file_ids’,
value: [‘df491ae4–9d00–4674-b565-e4e5943f55b4’, …]

A couple follow-up issues that worth mentioning:

(1) As the form submission completes, the browser interprets the response of your form as a document, but one of the response’s headers, content-type, indicates that the MIME type is application/x-zip instead of a valid document MIME type such as text/html. So you’ll probably see this log in your console:

Resource interpreted as Document but transferred with MIME type application/zip: “".

This misinterpretation seems pretty reasonable, but there doesn’t seem to be a workaround for this. <form> was intended in the first place to submit a form and refresh the page to display the server response as a document.

(2) You may be tempted to listen on the complete event of the form submission, so that you can re-enable your Download button, for instance. However, this cannot be achieved. As a summary of discussions on this issue , when you post a form, the form inputs are sent to the server and your page is supposed to be refreshed.

Image for post
Image for post
Ye Tian

Ye Tian

Full Stack Software Engineer at Weebly

Weebly Engineering Blog

Check out

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store