/examples/dragdrop - added more obvious 'file was uploaded' indicator (#1750)

website/src/examples/dragdrop/app.css

@@ -1,23 +0,0 @@
-/* Drag & Drop CSS to style the demo itself */
-
-.UppyDragDrop-One-Progress,
-.UppyDragDrop-Two-Progress {
-  position: relative;
-}
-
-.UppyDragDrop-Two-Upload {
-  display: block;
-  margin: auto;
-  padding: 5px 15px;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  border: 1px solid gray;
-  background: none;
-  cursor: pointer;
-  margin-top: 15px;
-}
-
-.UppyDragDrop-Two-Upload:hover {
-  background: gray;
-}

website/src/examples/dragdrop/app.es6

@@ -5,19 +5,31 @@ const DragDrop = require('@uppy/drag-drop')
 const ProgressBar = require('@uppy/progress-bar')
 const Tus = require('@uppy/tus')
 
-const uppyOne = new Uppy({debug: true, autoProceed: true})
+// Function for displaying uploaded files
+const onUploadSuccess = (elForUploadedFiles) =>
+  (file, response) => {
+    const url = response.uploadURL
+    const fileName = file.name
+
+    document.querySelector(elForUploadedFiles).innerHTML +=
+      `<li><a href="${url}" target="_blank">${fileName}</a></li>`
+  }
+
+const uppyOne = new Uppy({ debug: true, autoProceed: true })
 uppyOne
-  .use(DragDrop, {target: '.UppyDragDrop-One'})
-  .use(Tus, {endpoint: 'https://master.tus.io/files/'})
-  .use(ProgressBar, {target: '.UppyDragDrop-One-Progress', hideAfterFinish: false})
+  .use(DragDrop, { target: '.example-one .for-DragDrop' })
+  .use(Tus, { endpoint: 'https://master.tus.io/files/' })
+  .use(ProgressBar, { target: '.example-one .for-ProgressBar', hideAfterFinish: false })
+  .on('upload-success', onUploadSuccess('.example-one .uploaded-files ol'))
 
-const uppyTwo = new Uppy({debug: true, autoProceed: false})
+const uppyTwo = new Uppy({ debug: true, autoProceed: false })
 uppyTwo
-  .use(DragDrop, {target: '#UppyDragDrop-Two'})
-  .use(Tus, {endpoint: 'https://master.tus.io/files/'})
-  .use(ProgressBar, {target: '.UppyDragDrop-Two-Progress', hideAfterFinish: false})
+  .use(DragDrop, { target: '.example-two .for-DragDrop' })
+  .use(Tus, { endpoint: 'https://master.tus.io/files/' })
+  .use(ProgressBar, { target: '.example-two .for-ProgressBar', hideAfterFinish: false })
+  .on('upload-success', onUploadSuccess('.example-two .uploaded-files ol'))
 
-var uploadBtn = document.querySelector('.UppyDragDrop-Two-Upload')
+const uploadBtn = document.querySelector('.example-two button.upload-button')
 uploadBtn.addEventListener('click', function () {
   uppyTwo.upload()
 })

website/src/examples/dragdrop/app.html

@@ -1,26 +1,36 @@
 <!-- Basic Uppy styles -->
 <link rel="stylesheet" href="/uppy/uppy.min.css">
 
-<div>
-  <div>
-    <h5>autoProceed is on</h5>
+<section class="example-one">
+  <h5>autoProceed is on</h5>
 
-    <!-- Target DOM node #1 -->
-    <div class="UppyDragDrop-One"></div>
+  <!-- Target DOM node #1 -->
+  <div class="for-DragDrop"></div>
 
-    <!-- Progress bar #1 -->
-    <div class="UppyDragDrop-One-Progress"></div>
+  <!-- Progress bar #1 -->
+  <div class="for-ProgressBar"></div>
+
+  <!-- Uploaded files list #1 -->
+  <div class="uploaded-files">
+    <h5>Uploaded files:</h5>
+    <ol></ol>
   </div>
+</div>
+
+<section class="example-two">
+  <h5>autoProceed is off</h5>
 
-  <div>
-    <h5>autoProceed is off</h5>
+  <!-- Target DOM node #2 -->
+  <div class="for-DragDrop"></div>
 
-    <!-- Target DOM node #2 -->
-    <div id="UppyDragDrop-Two"></div>
+  <!-- Progress bar #2 -->
+  <div class="for-ProgressBar"></div>
 
-    <!-- Progress bar #2 -->
-    <div class="UppyDragDrop-Two-Progress"></div>
+  <button class="upload-button">Upload</button>
 
-    <button class="UppyDragDrop-Two-Upload">Upload</button>
+  <!-- Uploaded files list #2 -->
+  <div class="uploaded-files">
+    <h5>Uploaded files:</h5>
+    <ol></ol>
   </div>
 </div>

website/src/examples/dragdrop/app.scss

@@ -0,0 +1,55 @@
+/* Drag & Drop CSS to style the demo itself */
+
+.for-ProgressBar {
+  position: relative;
+}
+
+.uploaded-files{
+  background: rgba(240, 238, 238, 0.35);
+  padding: 10px;
+  margin-top: 10px;
+  border-radius: 5px;
+  h5 {
+    margin: 0;
+    font-size: 15px;
+    color: rgb(114, 114, 114);
+    font-weight: 500;
+  }
+  ol {
+    color: rgb(55, 55, 55);
+    margin: 0;
+    padding-left: 18px;
+    li {
+      font-size: 15px;
+      padding-top: 10px;
+      word-break: break-all;
+      a {
+        color: rgb(34, 117, 215);
+        &:hover {
+          color: rgb(34, 117, 215);
+          border-bottom: 1px solid rgb(34, 117, 215);
+        }
+      }
+    }
+  }
+}
+
+section.example-two {
+  margin-top: 55px;
+}
+
+section.example-two button.upload-button {
+  display: block;
+  margin: auto;
+  padding: 5px 15px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border: 1px solid gray;
+  background: none;
+  cursor: pointer;
+  margin-top: 15px;
+  &:hover{
+    background: gray;
+  }
+}