"animation file atachenment"
Bootstrap 3.0.0 Snippet by KrishnaPraveenVemuri

<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>

Related: See More


Questions / Comments: