<!DOCTYPE html>
<html>

<head>
    <title>File Uploader</title>
    <link href="https://file.myfontastic.com/SLzQsLcd7FmmzjBYTcyVW3/icons.css" rel="stylesheet">
    <link rel="stylesheet" href="fileuploader.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
   <label class="uploader" ondragover="return false">
            <i class="icon-upload icon"></i>
            <img src="" class="">
            <input type="file" accept="image/*" name="file">
        </label>

    <script src="FileUploader.js"></script>
    <script type="text/javascript">
        new FileUploader('.uploader');
    </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; 
}
* Input files completely customized with **CSS**
* Live preview of the image selected
* Drag and drop support
(function() {
  
    function FileUploader(selector) {
      if (undefined !== selector) {
        this.init(selector);
      }
    }
    
    FileUploader.prototype.init = function(selector) {
      if (undefined !== this.$el) {
        this.unsuscribe();
      }
      
      this.$el = document.querySelector(selector);
      this.$fileInput = this.$el.querySelector('input');
      this.$img = this.$el.querySelector('img');
      
      this.suscribe();
    }

    FileUploader.prototype.suscribe = function() {
      this.$fileInput.addEventListener('change', _handleInputChange.bind(this));
      this.$img.addEventListener('load', _handleImageLoaded.bind(this));
      this.$el.addEventListener('dragenter', _handleDragEnter.bind(this));
      this.$el.addEventListener('dragleave', _handleDragLeave.bind(this));
      this.$el.addEventListener('drop', _handleDrop.bind(this));
    }
    
    FileUploader.prototype.unsuscribe = function() {
      this.$fileInput.removeEventListener('change', _handleInputChange.bind(this));
      this.$img.removeEventListener('load', _handleImageLoaded.bind(this));
      this.$el.removeEventListener('dragenter', _handleDragEnter.bind(this));
      this.$el.removeEventListener('dragleave', _handleDragLeave.bind(this));
      this.$el.removeEventListener('drop', _handleDrop.bind(this));
    }

    function _handleDragEnter(e){
      e.preventDefault();

      if (!this.$el.classList.contains('dragging')) {
          this.$el.classList.add('dragging');
      }
    }

    function _handleDragLeave(e) {
      e.preventDefault();

      if (this.$el.classList.contains('dragging')) {
          this.$el.classList.remove('dragging');
      }
    }

    function _handleDrop(e) {
      e.preventDefault();
      this.$el.classList.remove('dragging');

      this.$img.files = e.dataTransfer.files;
      _handleInputChange.call(this);
    }

    function _handleImageLoaded() {
      if (!this.$img.classList.contains('loaded')) {
          this.$img.classList.add('loaded');
      }
    }

    function _handleInputChange(e) {
      var file = (undefined !== e)
          ? e.target.files[0]
          : this.$img.files[0];

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

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

      if (this.$el.classList.contains('loaded')) {
          this.$el.classList.remove('loaded');
      }

      reader.onload = _handleReaderLoaded.bind(this);
      reader.readAsDataURL(file);
    }

    function _handleReaderLoaded(e) {
      var reader = e.target;
      this.$img.src = reader.result;
      this.$el.classList.add('loaded');
    }
    
    window.FileUploader = FileUploader;
    
} ());
/* 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.dragging {
  outline-color: orangered;
}

.uploader.dragging .icon {
  color: orangered;
}

.uploader.loaded .icon {
  color: #fff;
  color: rgba(255, 255, 255, 0.5);
}

.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;
}