SHARE
TWEET

Untitled

a guest Jul 16th, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- /views/upload.html -->
  2. <html>
  3.  
  4. <head>
  5.     <title>DropzoneJS Uploader</title>
  6.     <link href="/static/dropzone.css" type="text/css" rel="stylesheet" />
  7.     <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  8.     <script src="/static/dropzone.js"></script>
  9.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  10.     <script src="//kit.fontawesome.com/6026eddbe0.js"></script>
  11.     <style>
  12.     .container {
  13.         border: 1px solid red;
  14.         position: absolute;
  15.         top: 50%;
  16.         left: 50%;
  17.         width: 600px;
  18.         height: 480px;
  19.         transform: translateY(-50%) translateX(-50%);
  20.     }
  21.     </style>
  22. </head>
  23.  
  24. <body>
  25.    
  26.     <div class="container" id="container">
  27.         <div id="actions" class="row">
  28.             <div class="col-lg-7">
  29.                 <span class="btn btn-success fileinput-button">
  30.                     <i class="fas fa-plus"></i>
  31.                     <span>Browse</span>
  32.                 </span>
  33.                 or drag images here.
  34.                 <button type="submit" class="btn btn-primary start">
  35.                     <i class="fas fa-arrow-up"></i>
  36.                     <span>Start upload</span>
  37.                 </button>
  38.             </div>
  39.  
  40. <!--
  41.             <div class="col-lg-5">
  42.                 <span class="fileupload-process">
  43.                     <div id="total-progress" class="progress progress-striped active" role="progressbar"
  44.                         aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
  45.                         <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
  46.                     </div>
  47.                 </span>
  48.             </div>
  49. -->
  50.         </div>
  51.  
  52.         <div class="table table-striped" class="files" id="previews">
  53.  
  54.             <div id="template" class="file-row">
  55.                 <div>
  56.                     <span class="preview"><img data-dz-thumbnail /></span>
  57.                 </div>
  58.                 <div>
  59.                     <p class="name" data-dz-name></p>
  60.                     <strong class="error text-danger" data-dz-errormessage></strong>
  61.                 </div>
  62.                 <div>
  63.                     <p class="size" data-dz-size></p>
  64.                     <div class="progress progress-striped active" role="progressbar" aria-valuemin="0"
  65.                         aria-valuemax="100" aria-valuenow="0">
  66.                         <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
  67.                     </div>
  68.                 </div>
  69.                 <div>
  70.                     <button class="btn btn-primary start">
  71.                         <i class="glyphicon glyphicon-upload"></i>
  72.                         <span>Start</span>
  73.                     </button>
  74.                     <button data-dz-remove class="btn btn-warning cancel">
  75.                         <i class="glyphicon glyphicon-ban-circle"></i>
  76.                         <span>Cancel</span>
  77.                     </button>
  78.                     <button data-dz-remove class="btn btn-danger delete">
  79.                         <i class="glyphicon glyphicon-trash"></i>
  80.                         <span>Delete</span>
  81.                     </button>
  82.                 </div>
  83.             </div>
  84.         </div>
  85.     </div>
  86.  
  87.     <script>
  88.         var previewNode = document.querySelector("#template");
  89.         previewNode.id = "";
  90.         var previewTemplate = previewNode.parentNode.innerHTML;
  91.         previewNode.parentNode.removeChild(previewNode);
  92.  
  93.         var myDropzone = new Dropzone("body", {
  94.             url: "/upload",
  95.             thumbnailWidth: 80,
  96.             thumbnailHeight: 80,
  97.             parallelUploads: 20,
  98.             previewTemplate: previewTemplate,
  99.             autoQueue: false,
  100.             previewsContainer: "#previews",
  101.             clickable: ".fileinput-button",
  102.             headers: { "My-Awesome-Header": "header value" }
  103.         });
  104.  
  105.         myDropzone.on("addedfile", function (file) {
  106.             file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); };
  107.         });
  108.  
  109.         myDropzone.on("totaluploadprogress", function (progress) {
  110.             document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
  111.         });
  112.  
  113.         myDropzone.on("sending", function (file) {
  114.             document.querySelector("#total-progress").style.opacity = "1";
  115.             file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
  116.         });
  117.  
  118.         myDropzone.on("queuecomplete", function (progress) {
  119.             document.querySelector("#total-progress").style.opacity = "0";
  120.         });
  121.  
  122.         document.querySelector("#actions .start").onclick = function () {
  123.             myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
  124.         };
  125.        
  126.         document.querySelector("#actions .cancel").onclick = function () {
  127.             myDropzone.removeAllFiles(true);
  128.         };
  129.     </script>
  130.  
  131. </body>
  132.  
  133. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top