<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/seyedi/pen/KvObJq" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">/*
Author: Mojtaba Seyedi
Author URI: http://mojtabaseyedi.com
*/
html {
box-sizing: border-box;
}
html *,
html *::before,
html *::after {
box-sizing: inherit;
}
body {
background-color: #eee;
font: 100%/1.6 Helvetica;
color: #fff;
margin: 0;
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.uploader {
display: block;
margin: 0 auto;
width: 24em;
height: 20em;
max-width: 90vw;
max-height: 90vh;
}
.uploader__input {
display: none;
}
.uploader__label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
padding: 2em 1.5em;
text-align: center;
background: #fff;
border-radius: 7px;
border: 3px solid #eee;
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
}
.uploader__label:hover {
border-color: #454cad;
}
.uploader__label.hover {
border: 3px solid #454cad;
box-shadow: inset 0 0 0 6px #eee;
background-color: #616161;
background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
}
.uploader__label.hover .uploader__clipalt {
stroke: #fff;
}
.uploader__wrapper {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.uploader__file {
position: absolute;
left: 0.5em;
top: 0em;
display: block;
width: 3em;
height: 3em;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-transform: translate3d(0, -1em, 0) scale(0);
transform: translate3d(0, -1em, 0) scale(0);
-webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.uploader__file.show {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
.uploader__clipalt {
fill: none;
stroke: #ccc;
stroke-width: 5px;
stroke-miterlimit: 10;
}
.uploader__clip {
stroke-dasharray: 391.592px;
stroke-dashoffset: -391.592px;
fill: none;
stroke: #333;
stroke-width: 5px;
stroke-miterlimit: 10;
}
.uploading .uploader__clip {
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
.text {
color: #333;
margin: 1em 0 0;
}
</style></head><body>
<form class="uploader">
<input class="uploader__input" id="file-upload" type="file" name="fileUpload" accept="image/*" />
<label class="uploader__label" for="file-upload">
<div class="uploader__wrapper">
<img class="uploader__file hidden" src="#" alt="">
<svg class="uploader__svg" xmlns="http://www.w3.org/2000/svg" width="98px" height="90px" viewBox="0 0 98 90">
<path class="uploader__clipalt" d="M47.559,12.453L9.966,50.05 c0,0-16.188,15.611-0.892,30.908c15.297,15.301,30.995-0.804,30.995-0.804l50.666-50.669c0,0,10.814-10.891-0.268-21.981 c-11.087-11.088-21.97-0.288-21.97-0.288L24.221,51.486c0,0-10.736,8.541-2.432,16.921c8.307,8.384,16.832-2.521,16.832-2.521 l32.535-32.531"/>
<path class="uploader__clip" d="M47.559,12.453L9.966,50.05 c0,0-16.188,15.611-0.892,30.908c15.297,15.301,30.995-0.804,30.995-0.804l50.666-50.669c0,0,10.814-10.891-0.268-21.981 c-11.087-11.088-21.97-0.288-21.97-0.288L24.221,51.486c0,0-10.736,8.541-2.432,16.921c8.307,8.384,16.832-2.521,16.832-2.521 l32.535-32.531"/>
</svg>
</div>
</label>
</form>
<p class="text">Drag and Drop your file</p>
<a class="text" href="https://codepen.io/seyedi/details/QqwWaB/">See the Second version here</a>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >function upload() {
var percentage = null,
clippaper = document.querySelector('.uploader__clip'),
clippaperLength = clippaper.getTotalLength();
clippaper.style.strokeDasharray = clippaperLength;
clippaper.style.strokeDashoffset = -clippaperLength;
function Init() {
var fileSelect = document.querySelector('.uploader__input'),
fileDrag = document.querySelector('.uploader__label'),
fileSize = null;
fileSelect.addEventListener('change', fileSelectHandler, false);
// Is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// File Drop
fileDrag.addEventListener('dragover', fileDragHover, false);
fileDrag.addEventListener('dragleave', fileDragHover, false);
fileDrag.addEventListener('drop', fileSelectHandler, false);
}
}
function fileDragHover(e) {
var fileDrag = document.querySelector('.uploader__label');
e.stopPropagation();
e.preventDefault();
fileDrag.className = (e.type === 'dragover' ? 'uploader__label hover' : 'uploader__label');
}
function fileSelectHandler(e) {
document.querySelector('.uploader').classList.add('uploading');
// Fetch FileList object
var files = e.target.files || e.dataTransfer.files;
// Cancel event and hover styling
fileDragHover(e);
// Process all File objects
for (var i = 0, f; f = files[i]; i++) {if (window.CP.shouldStopExecution(1)){break;}
parseFile(f);
uploadFile(f);
}
window.CP.exitedLoop(1);
}
function parseFile(file) {
// console.log(file.name);
var imageName = file.name;
var isGood = (/\.(?=gif|jpg|png|jpeg)/gi).test(imageName);
if (isGood) {
// Thumbnail Preview
document.querySelector('.uploader__file').src = URL.createObjectURL(file);
}
else {
document.querySelector('.uploader').reset();
}
}
function updateFileProgress(e) {
if (e.lengthComputable) {
percentage = (e.loaded / fileSize) * 100;
clippaper.style.strokeDashoffset = (-clippaperLength + (percentage * clippaperLength) / 100);
if (e.loaded === fileSize) {
document.querySelector('.uploader__file').classList.add("show");
}
}
}
function uploadFile(file) {
fileSize = file.size;
var xhr = new XMLHttpRequest(),
fileSizeLimit = 1024; // In MB
if (xhr.upload) {
// Check if file is less than x MB
if (file.size <= fileSizeLimit * 1024 * 1024) {
// Progress bar
xhr.upload.addEventListener('progress', updateFileProgress, false);
// File received / failed
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
// Everything is good!
// progress.className = (xhr.status == 200 ? "success" : "failure");
// document.location.reload(true);
}
};
// Start upload
xhr.open('POST', document.querySelector('.uploader').action, true);
xhr.setRequestHeader('X-File-Name', file.name);
xhr.setRequestHeader('X-File-Size', file.size);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(file);
} else {
console.log('Please upload a smaller file (< ' + fileSizeLimit + ' MB).');
}
}
}
// Check for the various File API support.
if (window.File && window.FileList && window.FileReader) {
Init();
} else {
document.querySelector('.uploader__labele').style.display = 'none';
}
}
upload();
//# sourceURL=pen.js
</script>
</body></html>
