Почетна Преглед Помоћ
Пријавите се
biheng
/
uppy
1
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

Actual puppy in playground (important), status support (draft), styles for playground and uppy separated

Artur Paikin пре 9 година
родитељ
408ad53688
комит
9d611e2104
4 измењених фајлова са 76 додато и 43 уклоњено
Један поглед Покажи статистику Diff
  1. 8 3
      examples/playground/index.html
  2. 2 38
      examples/playground/static/css/style.css
  3. 42 1
      examples/playground/static/css/uppy.css
  4. 24 1
      src/plugins/DragDrop.js

+ 8 - 3
examples/playground/index.html
Прегледај датотеку 

@@ -26,8 +26,11 @@
 
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
   <link rel="icon" type="image/png" href="static/images/favicon.png">
 
   <link rel="icon" type="image/png" href="static/images/favicon.png">
 
 
 
+  <!-- Playground styles -->
 
+  <link rel="stylesheet" href="static/css/style.css">
 
 
 
-  <link rel="stylesheet" href="static/css/style.css" type="text/css" />
 
+  <!-- Basic Uppy styles -->
 
+  <link rel="stylesheet" href="static/css/uppy.css">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 
 
@@ -47,14 +50,16 @@
 
         </p>
 
         </p>
 
 
 
         <form id="upload-target" class="UppyDragDrop" method="post" action="/" enctype="multipart/form-data">
 
         <form id="upload-target" class="UppyDragDrop" method="post" action="/" enctype="multipart/form-data">
 
-          <div>
 
+            <svg class="UppyDragDrop-puppy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125" enable-background="new 0 0 100 100"><path d="M16.582 21.3L-.085 62.713l32.94 13.295zM99.915 62.714L66.975 76.01 83.25 21.3zM50.917 68.117L62.443 56.59H37.386l11.527 11.526v5.905l-3.063 3.32 1.474 1.36 2.59-2.807 2.59 2.807 1.475-1.358-3.063-3.32zM66.976 41.415c-3.972 0-7.193-3.22-7.193-7.193 0-3.973 3.222-7.193 7.193-7.193 3.974 0 7.193 3.22 7.193 7.192 0 3.973-3.22 7.193-7.194 7.193m2.506-11.732c-.738 0-1.337.6-1.337 1.337s.6 1.336 1.337 1.336 1.337-.598 1.337-1.336-.6-1.337-1.338-1.337zM32.854 41.415c-3.973 0-7.193-3.22-7.193-7.193 0-3.973 3.22-7.193 7.194-7.193 3.973 0 7.192 3.22 7.192 7.192 0 3.973-3.22 7.193-7.192 7.193m2.506-11.732c-.738 0-1.337.6-1.337 1.337s.6 1.336 1.337 1.336 1.337-.598 1.337-1.336-.598-1.337-1.337-1.337z"/></svg>          <div>
 
             <input id="UppyDragDrop-input" class="UppyDragDrop-input" type="file" name="files[]" data-multiple-caption="{count} files selected" multiple />
 
             <input id="UppyDragDrop-input" class="UppyDragDrop-input" type="file" name="files[]" data-multiple-caption="{count} files selected" multiple />
 
             <label class="UppyDragDrop-label" for="UppyDragDrop-input"><strong>Choose a file</strong><span class="UppyDragDrop-dragText"> or drag it here</span>.</label>
 
             <label class="UppyDragDrop-label" for="UppyDragDrop-input"><strong>Choose a file</strong><span class="UppyDragDrop-dragText"> or drag it here</span>.</label>
 
             <!-- <button class="UppyDragDrop-btn" type="submit">Upload</button> -->
 
             <!-- <button class="UppyDragDrop-btn" type="submit">Upload</button> -->
 
           </div>
 
           </div>
 
-          <div class="UppyDragDrop-status">Uploading&hellip;</div>
 
+          <div class="UppyDragDrop-status"></div>
 
         </form>
 
         </form>
 
 
 
+        <small>Puppy icon by Jorge Fernandez del Castillo Gomez <br>from the Noun Project</small>
 
+
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>

+ 2 - 38
examples/playground/static/css/style.css
Прегледај датотеку 

@@ -1,39 +1,3 @@
 
-.UppyDragDrop {
 
-  width: 300px;
 
-  /*height: 200px;*/
 
-  text-align: center;
 
-  /*background-color: #f6fbfb;*/
 
-  padding: 100px 10px;
 
-}
 
-
 
-/* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
 
-.UppyDragDrop-input {
 
-  width: 0.1px;
 
-	height: 0.1px;
 
-	opacity: 0;
 
-	overflow: hidden;
 
-	position: absolute;
 
-	z-index: -1;
 
-}
 
-
 
-.UppyDragDrop.is-dragdrop-supported {
 
-  border: 2px dashed;
 
-  border-color: #ccc;
 
-}
 
-
 
-.UppyDragDrop-label {
 
-  cursor: pointer;
 
-}
 
-
 
-.UppyDragDrop-dragText {
 
-  display: none;
 
-}
 
-
 
-.is-dragdrop-supported .UppyDragDrop-dragText {
 
-  display: inline;
 
-}
 
-
 
-.UppyDragDrop.is-dragover {
 
-  border-color: #d2ecea;
 
-  background-color: #dbf5f3;
 
+.UppyDragDrop-puppy {
 
+  max-width: 80px;
 
 }
 
 }

+ 42 - 1
examples/playground/static/css/uppy.css
Прегледај датотеку 

@@ -2,6 +2,47 @@
 
   font-family: "Comic Sans MS";
 
   font-family: "Comic Sans MS";
 
   color: purple;
 
   color: purple;
 
   border: 1px dashed pink;
 
   border: 1px dashed pink;
 
-  font-size: 32px; 
+  font-size: 32px;
 
 }
 
 }
 
 
 
+/**
 
+* Drag & Drop
 
+*/
 
+
 
+.UppyDragDrop {
 
+  width: 300px;
 
+  text-align: center;
 
+  padding: 100px 10px;
 
+}
 
+
 
+/* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
 
+.UppyDragDrop-input {
 
+  width: 0.1px;
 
+	height: 0.1px;
 
+	opacity: 0;
 
+	overflow: hidden;
 
+	position: absolute;
 
+	z-index: -1;
 
+}
 
+
 
+.UppyDragDrop.is-dragdrop-supported {
 
+  border: 2px dashed;
 
+  border-color: #ccc;
 
+}
 
+
 
+.UppyDragDrop-label {
 
+  cursor: pointer;
 
+}
 
+
 
+.UppyDragDrop-dragText {
 
+  display: none;
 
+}
 
+
 
+.is-dragdrop-supported .UppyDragDrop-dragText {
 
+  display: inline;
 
+}
 
+
 
+.UppyDragDrop.is-dragover {
 
+  border-color: #d2ecea;
 
+  background-color: #dbf5f3;
 
+}

+ 24 - 1
src/plugins/DragDrop.js
Прегледај датотеку 

@@ -1,5 +1,6 @@
 
 import { toggleClass, addClass, removeClass, addListenerMulti } from '../core/Utils';
 
 import { toggleClass, addClass, removeClass, addListenerMulti } from '../core/Utils';
 
 import TransloaditPlugin from './TransloaditPlugin';
 
 import TransloaditPlugin from './TransloaditPlugin';
 
+// import Tus from 'tus-js-client';
 
 
 
 export default class DragDrop extends TransloaditPlugin {
 
 export default class DragDrop extends TransloaditPlugin {
 
   constructor(core, opts) {
 
   constructor(core, opts) {
 
@@ -10,6 +11,7 @@ export default class DragDrop extends TransloaditPlugin {
 
 
 
     // get the element where Drag & Drop event will occur
 
     // get the element where Drag & Drop event will occur
 
     this.dropzone = document.querySelectorAll(this.opts.selector)[0];
 
     this.dropzone = document.querySelectorAll(this.opts.selector)[0];
 
+    this.status = document.querySelectorAll('.UppyDragDrop-status')[0];
 
 
 
     // crazy stuff so that ‘this’ will behave in class
 
     // crazy stuff so that ‘this’ will behave in class
 
     this.listenForEvents = this.listenForEvents.bind(this);
 
     this.listenForEvents = this.listenForEvents.bind(this);
 
@@ -59,15 +61,36 @@ export default class DragDrop extends TransloaditPlugin {
 
   //   toggleClass(this.dropzone, 'is-dragover');
 
   //   toggleClass(this.dropzone, 'is-dragover');
 
   // }
 
   // }
 
 
 
+  displayStatus(status) {
 
+    this.status.innerHTML = status;
 
+  }
 
+
 
   handleDrop(e) {
 
   handleDrop(e) {
 
     console.log('all right, someone dropped something here...');
 
     console.log('all right, someone dropped something here...');
 
+    this.displayStatus('Uploading...');
 
     const files = e.dataTransfer.files;
 
     const files = e.dataTransfer.files;
 
     console.log(files);
 
     console.log(files);
 
     // this.handleFiles(files);
 
     // this.handleFiles(files);
 
   }
 
   }
 
 
 
   handleFiles(files) {
 
   handleFiles(files) {
 
-    return files;
 
+    // Create a new tus upload
 
+    // const upload = new Tus.Upload(files, {
 
+    //   endpoint: 'http://master.tus.io:8080',
 
+    //   onError: function(error) {
 
+    //     console.log('Failed because: ' + error);
 
+    //   },
 
+    //   onProgress: function(bytesUploaded, bytesTotal) {
 
+    //     var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
 
+    //     console.log(bytesUploaded, bytesTotal, percentage + '%');
 
+    //   },
 
+    //   onSuccess: function() {
 
+    //     console.log('Download %s from %s', upload.file.name, upload.url);
 
+    //   }
 
+    // });
 
+
 
+    // Start the upload
 
+    // upload.start();
 
   }
 
   }
 
 
 
   run(files, done) {
 
   run(files, done) {