9 Custom Open Source File Upload Field Snippets
You can find amazing tools for improving web forms, ranging from UI kits to advanced jQuery plugins.
But one of the toughest input fields to edit is the upload field. This is a default HTML input element and it lets users upload files from their computer. Restyling the upload field is a massive challenge compared to other form elements.
If you’re hoping to customize your upload inputs, this gallery will help. I’ve collected 9 handmade upload fields from CodePen that prove you can restyle the field to look however you want.
1. Flat File Upload
See the Pen Custom FIle Upload by Wallace Erick (@wallaceerick) on CodePen.
Developer Wallace Erick created this flat upload field with just a bit of CSS and JavaScript. It borrows on the trend of flat design, which avoids gradients by focusing on single colors – often with a monochromatic color scheme.
You can add this file upload design onto any page and get it looking great. All you’ll have to do is change up the color scheme and position it properly within your form.
It works just as you’d expect and it runs on the standard HTML input element. So this is also usable with older browsers and should work on mobile, too.
2. Custom File Upload
See the Pen File upload input by Aaron Vanston (@aaronvanston) on CodePen.
Here’s a design that gets a little more abstract with the upload field. Developer Aaron Vanston created this file upload as a replica of the ones we see on larger websites.
Think about big tech sites like Dropbox, Google+ and Facebook. They often have a drag and drop area with a big “click here” space to launch the upload window. That’s exactly what Aaron did with this snippet.
It does rely on jQuery and a good amount of JS/CSS to work. And while it does use the standard HTML input field, it also handles the uploading process with custom JS functions.
If you know your way around JavaScript, this can work as a handy template for building your own file upload UI.
3. Responsive Animated Uploader
See the Pen Responsive Animated File Uploader by burnaDLX (@burnaDLX) on CodePen.
If you do any sort of modern web design, then you know you have to go responsive. Mobile users may upload files to the web through these same forms, so utilizing a responsive input field is a great idea.
Take a look at this design for an example of a quality mobile-friendly upload field. It’s very basic, with just a small square upload space with drag & drop support.
Just note this does not use the input element – so there’s no way to click for uploading. I think that’s a usability nightmare, but this is also just a sample snippet used for testing – so it’s not geared towards perfect usability.
If you do bring this snippet into your site, it’s recommended that you add a typical upload field alongside the drag & drop area.
4. Custom Uploader
See the Pen File Upload – Day 031 by Drew Vosburg (@drewvosburg) on CodePen.
Daily dev projects are a great way to sharpen your skills. Drew Vosburg followed this approach to build a sweet upload form hosted freely on CodePen.
It’s heavily customized with JavaScript functions handling the drag and drop effect. But this input field is actually built to support both touch and click, along with drag and drop.
The clickable area is an HTML label styled with CSS. That label element is attached to the input field, which is hidden off the page. It works just like a clickable field. Definitely a smart idea and it’s fully semantic to boot.
5. Stock Photo Upload Interface
See the Pen Stock photo by sarayut lawilai (@gapgag55) on CodePen.
Here’s one of the most complex, yet impressive snippets I’ve seen on CodePen. It lets you upload photos into a gallery right from your computer. With each photo you upload, it’ll show you a preview right on the page.
It works by pulling images through JavaScript, then converting them into base64 to embed into CSS.
Whenever you upload images to a server, they’ll generate a temporary file. On your own server, you can use this temporary file to display the picture. But now that CSS supports base64, this is another alternative.
The interface is super-clean and the upload feature blends right in.
6. Simple Blue Upload UI
See the Pen File Upload Button by Stephen Baker (@stebaker) on CodePen.
If you’re looking for a JS-free upload field then have a look at this example, created by Stephen Baker.
It uses pure CSS3 to change the input style into one large button. It works with the Font Awesome upload icon and simply wraps a whole circular area around the upload field.
You can change the style, color, icon or anything else to get this matching your site. It’s basically a super-clean alternative to the default input style and it runs on pure CSS3.
7. jQuery Custom File Upload Input
See the Pen jQuery Custom File Upload Input (Enhancements) by Terry Young (@terryyounghk) on CodePen.
Developer Terry Young took a bit of jQuery and used it to enhance some existing upload fields. This is the result (and it’s one heck of a result, if I can say so).
Through these styles you can change the upload field text, size, button color or remove the text field to just use a single button.
Note that this does require a good amount of jQuery because most of these features cannot be altered with CSS. If you don’t mind working with jQuery, these options are phenomenal.
8. Flat UI Input File
See the Pen Custom styles for Input file by Geoffrey Crofte (@CreativeJuiz) on CodePen.
Here’s a slightly different flat upload field created by Geoffrey Crofte. This one also relies on some JavaScript, but styles the entire input with CSS3 properties.
Since this is a sample snippet, you can’t actually upload files anywhere. But, that’s easy enough to change if you move this into your own site. The core design and setup is really what gives this snippet some life.
The return function runs in JavaScript, so that’s where you’d handle the file uploads, on-screen changes or anything else.
Best of all, these codes work in browsers dating back to IE 8! So it’s a pretty solid option if you’re concerned about accessibility.
9. Multi-Upload Fields
See the Pen Upload file name display by shubham chaudhari (@shubhamc_007) on CodePen.
Here’s one final custom field with a twist: it looks pretty simple aesthetically – but the real prize is in the functionality.
This upload field was designed to support multiple files all at once. You don’t typically see this with input fields – or at least not by default. Users have to select multiple files in the same window and the backend needs to support that.
With this snippet, you can list all the filenames in one upload field. You could even use JavaScript to append those filenames elsewhere on the page in plain view.
And while these are some of my favorite snippets, they certainly aren’t the only ones out there. Take a look at CodePen to see what else you can find.
The post 9 Custom Open Source File Upload Field Snippets appeared first on Speckyboy Web Design Magazine.