Upload Progress Bars & More: Using pecl/uploadprogress (ZendCon 2007)

Part of good user experience design means providing good feedback to the user as they navigate through and interact with an application. Providing progress bars to give users a sense of status as they upload files is one such feedback mechanism, and a popular one at that.

There are many different ways to implement upload progress bars. Some fake the progress bar with a simple animated image. Others use Java or Flash to handle both the upload and the status indication. However, through the use of Ajax, it is possible for PHP to asynchronously return the progress of the uploaded file.

This talk will examine two ways to implement Ajax-driven progress bars with PHP's APC extension and pecl/uploadprogress. The talk will explore the benefits and drawbacks to each approach, as well as some of the more advanced functionality provided by pecl/uploadprogress.

Transcript

1. Upload Progress Bars & More Using pecl/uploadprogress Ben Ramsey
 benramsey.com
2. 10-Oct-07 UPLOAD PROGRESS BARS & MORE 2
3. 10-Oct-07 UPLOAD PROGRESS BARS & MORE 3
4. 10-Oct-07 UPLOAD PROGRESS BARS & MORE • Traditional approach is to use APC • Create a form field named APC_UPLOAD_PROGRESS at the top of your form • Use XHR to send the value of that field to a script that returns the progress of the upload • Stored in APC: § total, current, rate, filename, name, temp_filename, cancel_upload, done 4 Progress Bar With APC
5. 10-Oct-07 UPLOAD PROGRESS BARS & MORE Progress Bar With APC 5
6. 10-Oct-07 UPLOAD PROGRESS BARS & MORE Progress Bar With APC 6
7. 10-Oct-07 UPLOAD PROGRESS BARS & MORE Problems With APC Approach • File upload takes place on one machine • Data in APC is local to a particular machine • Other machines can’t access the data stored in APC on the machine handling the upload • Requests for progress may not “hit” the same machine as the uploading file • Use “sticky” sessions on your load balancer • Or... use pecl/uploadprogress 7
8. 10-Oct-07 UPLOAD PROGRESS BARS & MORE Progress Bar With pecl/uploadprogress • INI directive to choose where to store data: § uploadprogress.file.filename_template § Stores to /tmp/upt_%s.txt by default • Set this to central storage mount • Create a form field named UPLOAD_IDENTIFIER at the top of your form • Use XHR to send the value of that field to a script that returns the progress of the upload • Stored: § time_start, time_last, speed_average, speed_last, bytes_uploaded, bytes_total, files_uploaded, est_sec 8
9. 10-Oct-07 UPLOAD PROGRESS BARS & MORE Progress Bar With pecl/uploadprogress 9
10. 10-Oct-07 UPLOAD PROGRESS BARS & MORE Progress Bar With pecl/uploadprogress 10
11. 10-Oct-07 UPLOAD PROGRESS BARS & MORE Problems With pecl/uploadprogress • Writing to disk rather than memory • If not using central storage, still restricted to one machine (use sticky sessions) 11
12. 10-Oct-07 UPLOAD PROGRESS BARS & MORE 12
13. 10-Oct-07 UPLOAD PROGRESS BARS & MORE 13 Reading File During Upload
14. 10-Oct-07 UPLOAD PROGRESS BARS & MORE Problems With Approach • Not yet part of pecl/uploadprogress • Writes file to temporary location in central storage as it’s uploaded • Reading from disk rather than memory 14
15. 10-Oct-07 UPLOAD PROGRESS BARS & MORE For More Information... • pecl/uploadprogress: § http://pecl.php.net/package/uploadprogress • My uploadprogress_get_contents() patch: § http://benramsey.com/code/uploadprogress.diff.patch • My blog: § http://benramsey.com/ 15