<!DOCTYPE html>
<html>

  <head>
    <title>jQuery Custom Input File</title>
    <link href="https://file.myfontastic.com/SLzQsLcd7FmmzjBYTcyVW3/icons.css" rel="stylesheet">
    <link rel="stylesheet" href="file-uploader.css">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <input type="file" accept="image/*" id="uploader">
    
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="file-uploader.js"></script>
    <script type="text/javascript">
        $('#uploader').fileUploader({activeColor: 'green', baseColor: '#ccc'});
    </script>
  </body>

</html>
/*Demo Styles  */

html, body {
  height: 100%;
  margin: 0;
  padding: 0; 
}

body {
  -webkit-align-items: center;
  align-items: center;
  background-color: #eee;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center; 
}
(function ($) {
    'use strict';
    
    $.fn.fileUploader = function (options) {
        
        var settings = $.extend({
            activeColor: 'orangered',
            baseColor: '#ccc',
            overlayColor: 'rgba(255,255,255,0.7)'
        }, options);
        
        var $el = $(this),
          $label, $fileInput, $img, $icon;
        
        setup();
        suscribe();
        
        function setup() {
          $label = $('<label></label>')
            .addClass('uploader')
            .attr('ondragover', 'return false')
            .insertAfter($el);
            
          $fileInput = $el.clone()
            .appendTo($label);
          
          $img = $('<img />')
            .appendTo($label);
            
          $icon = $('<i></i>')
            .addClass('icon icon-upload')
            .appendTo($label);
              
          $el.remove();
              
            _setInactive();
        }
        
        function suscribe() {
            $fileInput.on('change', _handleInputChange);
            $img.on('load', _handleImageLoaded);
            $label.on('dragenter', _handleDragEnter);
            $label.on('dragleave', _handleDragLeave);
            $label.on('drop', _handleDrop);
        }
        
        function _handleDragEnter(e){
            e.preventDefault();
            _setActive();
        }
        
        function _handleDragLeave(e) {
            e.preventDefault();
            _setInactive();
        }
        
        function _handleDrop(e) {
            e.preventDefault();
            _setInactive();
            $fileInput[0].files = e.originalEvent.dataTransfer.files;
            _handleInputChange();
        }
        
        function _handleImageLoaded() {
            if (!$img.hasClass('loaded')) {
                $img.addClass('loaded');
            }
            
            _setInactive();
        }
        
        function _handleInputChange(e) {
            var file = (undefined !== e)
              ? e.target.files[0]
              : $fileInput[0].files[0];

            var pattern = /image-*/;
            var reader = new FileReader();

            if (!file.type.match(pattern)) {
                alert('invalid format');
                return;
            }

            if ($label.hasClass('loaded')) {
                $label.removeClass('loaded');
            }

            reader.onload = _handleReaderLoaded;
            reader.readAsDataURL(file);
        }
        
        function _handleReaderLoaded(e) {
            var reader = e.target;
            $img[0].src = reader.result;
            $label.addClass('loaded');
        }
        
        function _setActive() {
          $label.css('outline-color', settings.activeColor);
          $icon.css('color', settings.activeColor);
        }
        
        function _setInactive() {
          $label.css('outline-color', settings.baseColor);
          $icon.css('color', ($img.hasClass('loaded') ? settings.overlayColor : settings.baseColor));
        }
        
        return this;
    }
    
} (jQuery));
/* File Uploader Styles  */

.uploader input {
  display: none;
}

.uploader {
  -webkit-align-items: center;
  align-items: center;
  background-color: #efefef;
  background-color: rgba(0, 0, 0, 0.02);
  cursor: pointer;
  display: -webkit-flex;
  display: flex;
  height: 300px;
  -webkit-justify-content: center;
  justify-content: center;
  outline: 3px dashed #ccc;
  outline-offset: 5px;
  position: relative;
  width: 300px;
}

.uploader img,
.uploader .icon {
  pointer-events: none;
}

.uploader,
.uploader .icon {
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  -ms-transition: all 100ms ease-in;
  -o-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}

.uploader .icon {
  color: #eee;
  color: rgba(0, 0, 0, 0.2);
  font-size: 5em;
}

.uploader img {
  left: 50%;
  opacity: 0;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transition: all 300ms ease-in;
  -moz-transition: all 300ms ease-in;
  -ms-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.uploader img.loaded {
  opacity: 1;
}