Dragdrop uses templates, minor tweaks for Core & Translator, styles

src/core/Core.js

@@ -1,7 +1,5 @@
 import Utils from '../core/Utils'
-import fs from 'fs'
 import Translator from '../core/Translator'
-import ejs from 'ejs'
 
 /**
  * Main Uppy core
@@ -28,7 +26,8 @@ export default class Core {
     this.plugins = {}
 
     this.translator = new Translator({locale: this.opts.locale})
-    console.log(this.translator.t('filesChosen', {smart_count: 3}))
+    this.i18n = this.translator.translate.bind(this.translator)
+    console.log(this.i18n('filesChosen', {smart_count: 3}))
   }
 
 /**
@@ -63,8 +62,8 @@ export default class Core {
 /**
  * Runs all plugins of the same type in parallel
  *
- * @param {string} type that wants to set progress
- * @param {array} files
+ * @param {String} type that wants to set progress
+ * @param {Array} files
  * @return {Promise} of all methods
  */
   runType (type, files) {
@@ -73,12 +72,9 @@ export default class Core {
     )
 
     return Promise.all(methods)
+      .catch((error) => console.error(error))
   }
 
-  compileTemplate (templatePath, options) {
-    const template = fs.readFileSync('../templates/' + templatePath, 'utf-8')
-    return ejs.render(template, options)
-  }
 
 /**
  * Runs a waterfall of runType plugin packs, like so:

src/core/Translator.js

@@ -58,9 +58,10 @@ export default class Translator {
  * @param {object} options with values that will be used later to replace placeholders in string
  * @return {string} translated (and interpolated)
  */
-  t (key, options) {
+  translate (key, options) {
     if (options && options.smart_count) {
       var plural = this.opts.locale.pluralize(options.smart_count)
+      console.log(this)
       return this.interpolate(this.opts.locale.strings[key][plural], options)
     }
 

src/locale/en_US.js

@@ -7,7 +7,8 @@ en_US.strings = {
   filesChosen: {
     0: '%{smart_count} file selected',
     1: '%{smart_count} files selected'
-  }
+  },
+  upload: 'Upload'
 }
 
 en_US.pluralize = function (n) {

src/plugins/DragDrop.js

@@ -1,6 +1,6 @@
 import Utils from '../core/Utils'
 import Plugin from './Plugin'
-import templateDragDrop from '../templates/dragdrop.hbs'
+import templateDragDrop from '../templates/dragdrop.ejs'
 
 /**
  * Drag & Drop plugin
@@ -13,33 +13,38 @@ export default class DragDrop extends Plugin {
 
     // set default options
     const defaultOptions = {
-      bla: 'blabla',
-      autoSubmit: true,
-      modal: true
+      autoSubmit: true
     }
 
     // merge default options with the ones set by user
-    this.opts = defaultOptions
-    Object.assign(this.opts, opts)
-
-    // get the element where the Drag & Drop event will occur
-    this.dropzone = document.querySelectorAll(this.opts.selector)[0]
-    this.dropzoneInput = document.querySelectorAll('.UppyDragDrop-input')[0]
-
-    this.status = document.querySelectorAll('.UppyDragDrop-status')[0]
+    this.opts = Object.assign({}, defaultOptions, opts)
 
     this.isDragDropSupported = this.checkDragDropSupport()
+    this.initHtml()
 
     // crazy stuff so that ‘this’ will behave in class
     this.listenForEvents = this.listenForEvents.bind(this)
     this.handleDrop = this.handleDrop.bind(this)
     this.checkDragDropSupport = this.checkDragDropSupport.bind(this)
     this.handleInputChange = this.handleInputChange.bind(this)
+  }
+
+  initHtml () {
+    this.dragDropContainer = document.querySelectorAll('.UppyDragDrop')[0]
 
-    console.log(templateDragDrop({
-      chooseFile: 'smth',
-      orDragDrop: 'going on here'
-    }))
+    this.dragDropContainer.innerHTML = templateDragDrop({
+      endpoint: this.opts.endpoint,
+      chooseFile: this.core.i18n('chooseFile'),
+      orDragDrop: this.core.i18n('orDragDrop'),
+      showUploadBtn: this.opts.autoSubmit,
+      upload: this.core.i18n('upload')
+    })
+
+    // get the element where the Drag & Drop event will occur
+    this.dropzone = document.querySelectorAll(this.opts.target)[0]
+    this.dropzoneInput = document.querySelectorAll('.UppyDragDrop-input')[0]
+
+    this.status = document.querySelectorAll('.UppyDragDrop-status')[0]
   }
 
 /**
@@ -65,7 +70,7 @@ export default class DragDrop extends Plugin {
   }
 
   listenForEvents () {
-    console.log(`waiting for some files to be dropped on ${this.opts.selector}`)
+    console.log(`waiting for some files to be dropped on ${this.opts.target}`)
 
     if (this.isDragDropSupported) {
       Utils.addClass(this.dropzone, 'is-dragdrop-supported')

src/scss/dragdrop.scss → src/scss/_dragdrop.scss

@@ -1,12 +1,17 @@
 /**
 * Drag & Drop CSS to style the plugin
 */
-.UppyDragDrop {
+.UppyDragDrop-form {
   width: 300px;
   text-align: center;
   padding: 100px 10px;
 }
 
+.UppyDragDrop-form.is-dragdrop-supported {
+  border: 2px dashed;
+  border-color: #ccc;
+}
+
 /* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
 .UppyDragDrop-input {
   width: 0.1px;
@@ -17,11 +22,6 @@
 	z-index: -1;
 }
 
-.UppyDragDrop.is-dragdrop-supported {
-  border: 2px dashed;
-  border-color: #ccc;
-}
-
 .UppyDragDrop-label {
   cursor: pointer;
 }
@@ -34,7 +34,21 @@
   display: inline;
 }
 
-.UppyDragDrop.is-dragover {
+.UppyDragDrop-form.is-dragover {
   border-color: #d2ecea;
   background-color: #dbf5f3;
 }
+
+.UppyDragDrop-uploadBtn {
+  display: block;
+  margin: auto;
+  margin-top: 20px;
+  border: 0;
+  border: 1px solid #ccc;
+  background: none;
+  cursor: pointer;
+
+  &:hover {
+    background: #ccc;
+  }
+}

src/scss/_variables.scss

@@ -0,0 +1 @@
+$color-gray: #ccc;

src/scss/uppy.scss

@@ -1,8 +1,9 @@
 /**
-* Uppy CSS and all of its out-of-the-box plugins:
+* Uppy CSS and all of its out-of-the-box plugins
 */
 
-@import 'dragdrop.scss';
+@import '_variables.scss';
+@import '_dragdrop.scss';
 
 .uppy {
   font-family: "Comic Sans MS";

src/templates/dragdrop.ejs

@@ -1,6 +1,6 @@
 <form class="UppyDragDrop-form"
       method="post"
-      action="/"
+      action="<%= endpoint %>"
       enctype="multipart/form-data">
     <img class="UppyDragDrop-puppy" src="/images/uppy.svg" />
     <input class="UppyDragDrop-input"
@@ -12,6 +12,9 @@
       <strong><%= chooseFile %></strong>
       <span class="UppyDragDrop-dragText"><%= orDragDrop %></span>.
     </label>
-    <button class="UppyDragDrop-btn" type="submit">Upload</button>
+
+    <% if (!showUploadBtn) { %>
+      <button class="UppyDragDrop-uploadBtn" type="submit"><%= upload %></button>
+    <% } %>
   <div class="UppyDragDrop-status"></div>
 </form>