Just note this does not use the input element – so there’s no way to click for uploading. It’s very basic, with just a small square upload space with drag & drop support. Take a look at this design for an example of a quality mobile-friendly upload field. Mobile users may upload files to the web through these same forms, so utilizing a responsive input field is a great idea. If you do any sort of modern web design, then you know you have to go responsive. If you know your way around JavaScript, this can work as a handy template for building your own file upload UI. And while it does use the standard HTML input field, it also handles the uploading process with custom JS functions.

It does rely on jQuery and a good amount of JS/CSS to work. That’s exactly what Aaron did with this snippet. They often have a drag and drop area with a big “click here” space to launch the upload window. Think about big tech sites like Dropbox, Google+ and Facebook. Developer Aaron Vanston created this file upload as a replica of the ones we see on larger websites. Here’s a design that gets a little more abstract with the upload field. So this is also usable with older browsers and should work on mobile, too. It works just as you’d expect and it runs on the standard HTML input element. All you’ll have to do is change up the color scheme and position it properly within your form. You can add this file upload design onto any page and get it looking great. It borrows on the trend of flat design, which avoids gradients by focusing on single colors – often with a monochromatic color scheme. Flat File Uploadĭeveloper Wallace Erick created this flat upload field with just a bit of CSS and JavaScript.

File uploader for website