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