How to Build a Custom S3 Uploader: New Premium Tutorial
plusvideos

How to Build a Custom S3 Uploader: New Premium Tutorial

on Feb 20th 2011 with 23 comments
Tutorial Details
  • Languages Used: PHP and JavaScript
  • Difficulty: Intermediate
  • Format: Written or Screencast
  • Availability: Premium Exclusive

Final Product What You'll Be Creating

Ever wondered how to create a form that can upload multiple files directly to your desired S3 bucket with PHP? While tools like S3Fox and Transmit certainly get the job done quite well, sometimes we need a simpler, one-click interface for our clients. We’ll build one today!

Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

A Quick Visual Overview

Premium Members: Download this Video ( Must be logged in)

You’ll Learn About:

  • Separating your code from your markup as much as possible
  • Creating a form that allows for uploading multiple files at once
  • How to work with Amazon S3 and PHP
  • Using the excellent Uploadify plugin
  • And plenty more. Plus, you have your choice of learning: written tutorial or screencast!

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://viruta.com.ve Argenis Ferrer

    Hi Jeff!, very good tutorial, but how about making the script upload directly to S3, without having to be stored first in the application server?

    This is mainly because of size restrictions, in your example, you did set a max file size of 20 MB, but in the case of shared hosting accounts, most of them are restricted to about 12MB, which you can’t some time change through php.ini or the PHP script itself, so it would be very interesting to see the process of just uploading directly to S3 and bypassing this issue!

  • http://theaggressive.com Shawn

    Thank you jeffery! Always enjoy and learn from your articles and screencasts.

  • http://www.antsmagazine.com Nahid

    Hi Jeffery!

    Good tutorial, It would be good if you show us how to use upload image in wordpress theme admin… Should be something like this one Classica Theme Screenshot

  • Abdlquadri

    Hi J,

    Pls cud u do a post on html tags that shud not be used by authors anymore.

    Thanks

    • KP

      He should do a post on basic grammar and spelling first — that seems to be of more immediate concern.

  • http://maxdegterev.name/ Max

    Lolz “Jeffery”.

    Mister Jeffrey, sir! When the premium program would work like it should? It’s really annoying login every hour or so and go to premium area instead of just clicking a link “Hey premium fellas! Grab video here!”.

  • http://ronnieaarebrot.com Roaa

    Just wondering, do you learn how to send form inputs along with the images? looks like a lot of people can’t get this to work, included my self. Anyone know how i can do this? so i can crop the images, copy em to the right folder etc with PHP.

  • http://maxdegterev.name/ Max

    Also is it secure to set where to upload files in your javascript?

    • Chris Jones

      You dont have to use the folder specified in your Uploadify class. The upload itself is processed by a file called ‘uploadify.php’ and you can change the path it saves files ‘securely’ within there. The example Jeffrey shows here is the default setup that works out of the box.

      On sites I’ve used Uploadify, I’ve customised the uploadify.php script to do all sorts of checks before saving the file and I upload the files to a folder specified in the site wide configuration file.

      The cool thing about Uploadify is its front end – and how easy it is to get up and running. The back end – processing of the images – is bog standard PHP nothing to do with Uploadify.

  • Eddie

    Jeffery,

    Sounds like you need to replace the battery in your smoke detector. (Talking about the chirps I hear throughout the S3 Uploader Promo)

    Cheers!

  • http://www.isimpledesign.co.uk sam

    Hi all

    I managed to get a direct upload to Amazon S3 with progress bar working ive got a working demo here.

    If anyone is interested it will support buckets and folders within bucket working on producing a wordpress plugin for this.

    http://www.isimpledesign.co.uk/blog/amazon-s3-direct-multiple-file-upload-progress-bar

    • Brian

      I’d love to see how it is possible to directly upload straight to the server without the use of of temporary server… Where can I see some good source code? ..?

  • Kyle

    Hey,

    What would be the best way to go about adding a drop-down menu or something similar for selecting the bucket you would like the files to go to?

    • Kyle

      Also, would it be possible to set the destination to a folder within a bucket?

  • Chris Jones

    Very good tutorial demonstrating how easy it is to use S3 in your web site application!

    I use similar code to what you’ve written but I do my checks of file type etc. on upload rather than on the S3 processing bit. One thing I will change on my Uploadify function though is when I resize images. Having seen this video I’m going to change my function to resize the uploaded image on the bit just before you upload to S3, not while uploading files. This should speed up the upload process as Uploadify sort of ‘hangs’ on 100% while it resizes my image to 4 different sizes.

    One thing I didnt understand was the ‘onOpen’ function in Uploadify. You said something about hiding an overlay and you’d come back to it. You didn’t. Can you explain briefly here? :-).

  • http://goztansiyon.blogspot.com göz tansiyonu

    thats very impressive

  • Abhi

    Hey Jeff,

    Thank you for this tutorial. It’s really helpful , same like other tutorials.

    I am trying to implement something like this :

    Allow user to upload file of any size and that will go directly to S3 , using codeigniter and S3 library for CI. I successfully got that working, but now I want some progress meter.

    Well I didi lots of research on this and if I upload via web-server it is easy to get it done , but I dont want file to first upload on web server .

    This is also can be achievable using YUI, but its just showing a ,gif image but not actual upload progress.

    Is there any way , we can do this , I mean upload with progress meter (any kind) and store directly to S3.

    I also read tutorial about HTTP , is it possible to use that , because in Goole Chrome they shoe upload percentage at bottom . So I am pretty sure there must be soem way out.

    Please help
    -Thanks

  • Jason

    I just went through this tutorial and uploaded to my server. The file copies to the uploads/ directory but never makes it over to S3. I have triple-checked my code and it is working…also the example from the S3 class script works….just not working using this script. Also when the script forwards to index.php?uploads=complete it’s a blank page. Am I missing a step?

  • http://www.amazon.com/Kindle-Wireless-Reading-Display-Globally/dp/B003FSUDM4/ref=amb_link_353259562_2?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-10&pf_rd_r=11EYKTN682A79T370AM3&pf_rd_t=201&p samvel

    Goode veri good

  • http://rawcreativestudios.com Tim

    Great script, but how do you deal with the possibility that more than one user could be uploading files simultaneously? For instance, I’m debating using this on a form on a clients site where the user can upload images to their account, the image paths and names are then stored into a session variable and subsequently put into a database.. If two users were uploading images at the same time, theres no way to track who’s file is who’s and all could be stored for both users.. any easy way to avoid this??

  • http://gozrengi.com göz rengi

    its very great content thanks for the tutorial…

  • http://breakingbadtr.com breaking bad

    thanks for great tutorial its awesome