Custom file upload UI

From my experience there is a lack of custom File upload UI out there for grabs. During one of my projects I required one, without finding much I created my own.

17e577cb36d88c6920905f8f6a74978e

The UI I created focuses heavily on the ability to drag and drop (most users don’t actually know you can drag and drop on the default native file upload).

In addition I have….

  • Styled the file upload button
  • Added an image preview once an image is selected
  • Added a remove image button to clear an selected images

The code is available to download and share on CodePen: http://codepen.io/aaronvanston/pen/yNYOXR

d977c815a5002cc1330a43eff9b54a59