Pretty HTML5 multiple file upload with Bootstrap, jQuery, Twig and Silex

There are a number of ways to achieve multiple file upload functionality, but I like HTML5 way of doing it, and it will be supported across all major browsers when IE10 ships. Also, Twitters’ Bootstrap helped me achieve the look without problems. I used a bit of jQuery for help with events. Alongside vanilla html, I will put Twig form syntax to achieve this, together with Symfony2 Form component, for server side.

Demo: Pretty File Boilerplate

HTML

[prism key=”code-html” language=”markup”]

You can add required or accept attributes as needed.

CSS

[prism key=”code-css” language=”css”]

Twig

[prism key=”code-twig” language=”markup”]

Javascript

[prism key=”code-javascript” language=”javascript”]

PHP

[prism key=”code-php” language=”php”]

I have used Silex /  Symfony here, but anything will do.

Todo

  • HTML5 XHR drag and drop upload
  • cross-browser testing
  • vanilla javascript implementation

9 Replies to “Pretty HTML5 multiple file upload with Bootstrap, jQuery, Twig and Silex”

  1. Hi, i’ve tried your code with my symfony 2.1 install but i got an error on the line where it binds the form:
    “Expected argument of type “array”, “Symfony\Component\HttpFoundation\Request” given

    any idea ?

  2. Hi, I’m using Symfony2 and I would like to integrate this uploader in my project. How should I proceed ?
    I tried by creating the uploadAction() in my controller and a template “upload.html.twig”, but it doesn’t work.
    What should I do ?

  3. As of Symfony 2.5 (that’s what I used) the form widget gets appending the `[]` to the name right if you add the `multiple` option (not the attribute, but that’s included as well).

Leave a Reply

Your email address will not be published. Required fields are marked *