/examples/xhrupload - more obvious UI, added a list of uploaded files (#1768)

* /examples/xhrupload - created a list of uploaded files, made progress bar more obvious

* Tiny style nit: spaces before the bracket

website/src/examples/xhrupload/app.css

@@ -1,9 +0,0 @@
-#myform1, #myform2 {
-  float  : left;
-  width  : 200px;
-  margin : 20px;
-}
-
-.clearfix {
-  clear: both;
-}

website/src/examples/xhrupload/app.es6

@@ -6,16 +6,25 @@ const XHRUpload = require('@uppy/xhr-upload')
 const ProgressBar = require('@uppy/progress-bar')
 
 const uppy = new Uppy({ debug: true, autoProceed: true })
-uppy.use(FileInput, { target: '.UppyForm', replaceTargetContent: true })
+uppy.use(FileInput, {
+  target: '.UppyForm',
+  replaceTargetContent: true
+})
+uppy.use(ProgressBar, {
+  target: '.UppyProgressBar',
+  hideAfterFinish: false
+})
 uppy.use(XHRUpload, {
   endpoint: '//api2.transloadit.com',
   formData: true,
   fieldName: 'files[]'
 })
-uppy.use(ProgressBar, {
-  target: 'body',
-  fixed: true,
-  hideAfterFinish: false
-})
 
-console.log('Uppy with Formtag and XHRUpload is loaded')
+// And display uploaded files
+uppy.on('upload-success', (file, response) => {
+  const url = response.uploadURL
+  const fileName = file.name
+
+  document.querySelector('.uploaded-files ol').innerHTML +=
+    `<li><a href="${url}" target="_blank">${fileName}</a></li>`
+})

website/src/examples/xhrupload/app.html

@@ -8,3 +8,11 @@
     <button type="submit">Fallback Form Upload</button>
   </form>
 </div>
+
+<div class="UppyProgressBar"></div>
+
+<!-- Uploaded files list -->
+<div class="uploaded-files">
+  <h5>Uploaded files:</h5>
+  <ol></ol>
+</div>

website/src/examples/xhrupload/app.scss

@@ -0,0 +1,40 @@
+.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);
+        }
+      }
+    }
+  }
+}
+
+// Prettier progress bar
+.uppy-ProgressBar-inner {
+  box-shadow: none !important;
+}
+
+// Prettier focus for the 'Choose files' button
+.uppy-FileInput-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(34, 117, 215, 0.5);
+}