ActionBrowseTagline component

src/locales/en_US.js

@@ -30,7 +30,9 @@ en_US.strings = {
   copyLinkToClipboardFallback: 'Copy the URL below',
   done: 'Done',
   localDisk: 'Local Disk',
-  dropPasteImport: 'Drop files here, paste or import from one of the locations above',
+  dropPasteImport: 'Drop files here, paste, import from one of the locations above or',
+  dropPaste: 'Drop files here, paste or',
+  browse: 'browse',
   fileProgress: 'File progress: upload speed and ETA',
   numberOfSelectedFiles: 'Number of selected files',
   uploadAllNewFiles: 'Upload all new files'

src/plugins/Dashboard/ActionBrowseTagline.js

@@ -0,0 +1,20 @@
+import html from '../../core/html'
+
+export default (props) => {
+  return html`
+    <span>
+      ${props.acquirers.length === 0
+        ? props.i18n('dropPaste')
+        : props.i18n('dropPasteImport')
+      }
+      <button type="button"
+              class="UppyDashboard-browse"
+              onclick=${(ev) => {
+                const input = document.querySelector(`${props.container} .UppyDashboard-input`)
+                input.click()
+              }}>${props.i18n('browse')}</button>
+      <input class="UppyDashboard-input" type="file" name="files[]" multiple="true"
+             onchange=${props.handleInputChange} />
+    </span>
+  `
+}

src/plugins/Dashboard/FileList.js

@@ -1,5 +1,6 @@
 import html from '../../core/html'
 import FileItem from './FileItem'
+import ActionBrowseTagline from './ActionBrowseTagline'
 import { dashboardBgIcon } from './icons'
 
 export default (props) => {
@@ -8,18 +9,14 @@ export default (props) => {
       ${props.totalFileCount === 0
        ? html`<div class="UppyDashboard-bgIcon">
           ${dashboardBgIcon()}
-          <h4 class="UppyDashboard-dropFilesTitle">
-            ${props.i18n('dropPasteImport')}
-            ${props.acquirers.length === 0
-              ? html`<span>or <button type="button"
-                      class="UppyDashboard-browse"
-                      onclick=${(ev) => {
-                        const input = document.querySelector(`${props.container} .UppyDashboard-input`)
-                        input.click()
-                      }}>browse</button></span>`
-              : null
-            }
-          </h4>
+          <h3 class="UppyDashboard-dropFilesTitle">
+            ${ActionBrowseTagline({
+              acquirers: props.acquirers,
+              container: props.container,
+              handleInputChange: props.handleInputChange,
+              i18n: props.i18n
+            })}
+          </h3>
           <input class="UppyDashboard-input" type="file" name="files[]" multiple="true"
                  onchange=${props.handleInputChange} />
          </div>`

src/plugins/Dashboard/Tabs.js

@@ -1,4 +1,5 @@
 import html from '../../core/html'
+import ActionBrowseTagline from './ActionBrowseTagline'
 import { localIcon } from './icons'
 
 export default (props) => {
@@ -8,16 +9,13 @@ export default (props) => {
     return html`
       <div class="UppyDashboardTabs" aria-hidden="${isHidden}">
         <h3 class="UppyDashboardTabs-title">
-          Drop files here or
-          <button type="button"
-                  class="UppyDashboard-browse"
-                  onclick=${(ev) => {
-                    const input = document.querySelector(`${props.container} .UppyDashboard-input`)
-                    input.click()
-                  }}>browse</button>
+        ${ActionBrowseTagline({
+          acquirers: props.acquirers,
+          container: props.container,
+          handleInputChange: props.handleInputChange,
+          i18n: props.i18n
+        })}
         </h3>
-        <input class="UppyDashboard-input" type="file" name="files[]" multiple="true"
-               onchange=${props.handleInputChange} />
       </div>
     `
   }