How to Use HTML5 Input Type ‘file’ – With Examples

If you’re developing a nice website like Facebook or Youtube where subscribers share images and videos, or you’re selling premium content like e-books online, you have to provide a way for users to upload content. In this tutorial, I will show you how to add file uploading capability to your web page like a pro.

The W3C HTML Standard defines several <input > types each designed to handle a specific type of data. For file uploading purposes, the HTML input element, aptly a tag named <input type=”file”>, has been provided. How does it work? Let’s dive straight into the tutorial to find out.

The HTML5 File Input Element

The file element is created using the input type=file as shown below. The first example creates a single file upload box whereas the second example creates a multi-file upload field.

Creating a working file upload form involves more than just adding the input element. Read the details below

The Client Side Code

Fire up your favorite text editing program, in my case I will use notepad. Add this code:

The line containing <!–Content will go inside here.–> is a comment to make our code easier to read and will not be displayed to the user.

Next, add a form element between the <body></body> tags.

The action attribute specifies the script on the server that handles the form submission.

Note:

  • For a form that has file uploads, you have to have the ‘enctype’ attribute of the form set to “multipart/form-data”.
  • Similarly, the ‘method’ attribute of the form should be “post” if the form has file uploads.
  • Add the input element of type ‘file’.

    The <input type=”file”> element must have a ‘name’ attribute.

    There are a few noteworthy properties of the <input type=”file”> element.

    By default, the <input type=”file”> element allows only 1 file to be uploaded. If you want to enable the user to upload more than one file, you need to do 2 things:

    • Add a ‘multiple’ attribute to the <input type=”file”> element.
    • Add the opening and closing square brackets [ ] on the ‘name’ attribute.

    Example:

    However, for this tutorial, we shall proceed to upload a single file.
    Save the file with an appropriate name like uploadfiles.php on your web server and keep it open. The file should look like this so far:

    This web page completes our work on the client side. Let’s now develop the server-side code.

    Handling File Uploads On The Server Side

    When the user clicks the “Upload Now” button, the browser will post the form data along with the file contents to the script mentioned in the action attribute (uploadfiles.php) The script then collects the file and saves on the server.

    • Create a folder named “uploads” on your web server at the same path level as the uploadfiles.php file. This is where we will save the uploaded files.
    • Now we have to add the following PHP code to handle the upload.
      First, we check if the form is posted and then check if the file is uploaded successfully.
    • Now move the uploaded file to the uploads sub-folder using move_uploaded_file() function.

    The complete PHP script so far (uploadfiles.php)

    If you upload this php script to your website, you will be able to upload files through the form.

    Notes on setting up the web server for successful file uploads

    There are several configuration parameters that can affect the file upload. These configuration parameters have to be setup right for the file uploads to work fine.

  1. The folder in which the files are saved should be writable by the script.
  2. This is obvious but might be overlooked. The folder must be writable by the script means the web server user (usually www-data ) should have write access to the folder. So setup the folder permissions right. If you have shell access, the folder permissions can be updated using the ‘chmod’ command easily. If you don’t have shell access, or if you have a shared hosting account, updating the folder permissions can be a little tricky.
    See if your hosting control panel has this feature.

  3. The websever configuration
  4. The web server would have a configuration setting that (1) allows/disallows file uploads (2) sets a limit on the size of the file upload.
    Here are the typical settings you have to check (for PHP)

  • memory_limit
  • upload_max_filesize
  • post_max_size

See Also:

Comments on this entry are closed.