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
   

   View Slide

2. 10-Oct-07 UPLOAD PROGRESS BARS & MORE 2
   

   View Slide

3. 10-Oct-07 UPLOAD PROGRESS BARS & MORE 3
   

   View Slide

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
   

   View Slide

5. 10-Oct-07 UPLOAD PROGRESS BARS & MORE
   Progress Bar With APC
   5
   

   View Slide

6. 10-Oct-07 UPLOAD PROGRESS BARS & MORE
   Progress Bar With APC
   6
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. 10-Oct-07 UPLOAD PROGRESS BARS & MORE
   Progress Bar With pecl/uploadprogress
   9
   

   View Slide

10. 10-Oct-07 UPLOAD PROGRESS BARS & MORE
    Progress Bar With pecl/uploadprogress
    10
    

    View Slide

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
    

    View Slide

12. 10-Oct-07 UPLOAD PROGRESS BARS & MORE 12
    

    View Slide

13. 10-Oct-07 UPLOAD PROGRESS BARS & MORE 13
    Reading File During Upload
    

    View Slide

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
    

    View Slide

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
    

    View Slide