Browse Source

add drag-drop support

Artur Paikin 6 years ago
parent
commit
da35ab4820

+ 12 - 6
website/src/examples/markdown-snippets/app.css

@@ -26,6 +26,7 @@
   padding: 6px;
   border-radius: 5px;
   border: 1px solid #b7b7b4;
+  border-bottom: 1px dashed #b7b7b4;
   min-height: 160px;
   width: 100%;
   resize: vertical;
@@ -35,12 +36,17 @@
   border-bottom-right-radius: 0;
 }
 
-.form-textarea:focus,
-.form-snippetTitle-input:focus {
-  border-color: #7db9e5;
-  outline: none;
-  box-shadow: 0 0 1px 1px #7db9e5;
-}
+  .form-textarea:focus,
+  .form-snippetTitle-input:focus {
+    border-color: #7db9e5;
+    outline: none;
+    box-shadow: 0 0 1px 1px #7db9e5;
+  }
+
+  .form-textarea.drag {
+    background-color: #dee1e3;
+    border: 3px dashed #7f8a93;
+  }
 
 .form-createSnippet {
   -webkit-appearance: none;

+ 3 - 3
website/src/examples/markdown-snippets/app.es6

@@ -26,7 +26,7 @@ class MarkdownTextarea {
     this.uploadLine.classList.add('form-upload')
 
     this.uploadLine.appendChild(
-      document.createTextNode('Tap to upload an attachment'))
+      document.createTextNode('Tap here or drop files to upload an attachment'))
   }
 
   install () {
@@ -39,6 +39,7 @@ class MarkdownTextarea {
     wrapper.appendChild(this.uploadLine)
 
     this.setupUploadLine()
+    this.setupTextareaDrop()
   }
 
   setupTextareaDrop () {
@@ -48,7 +49,6 @@ class MarkdownTextarea {
   }
 
   setupUploadLine () {
-    console.log(this.uploadLine)
     this.uploadLine.addEventListener('click', () => {
       this.pickFiles()
     })
@@ -103,7 +103,7 @@ class MarkdownTextarea {
   }
 
   uploadFiles (files) {
-    robodog.upload({
+    robodog.upload(files, {
       waitForEncoding: true,
       params: {
         auth: { key: TRANSLOADIT_EXAMPLE_KEY },