diff --git a/src/plugins/Url/UrlUI.js b/src/plugins/Url/UrlUI.js
new file mode 100644
index 000000000..bfbc85822
--- /dev/null
+++ b/src/plugins/Url/UrlUI.js
@@ -0,0 +1,36 @@
+const { h, Component } = require('preact')
+
+class UrlUI extends Component {
+ constructor (props) {
+ super(props)
+ this.handleClick = this.handleClick.bind(this)
+ }
+
+ componentDidMount () {
+ this.input.focus()
+ }
+
+ handleClick () {
+ this.props.addFile(this.input.value)
+ }
+
+ render () {
+ return
+ { this.input = input }}
+ value="" />
+
+
+ }
+}
+
+module.exports = UrlUI
diff --git a/src/plugins/Url/index.js b/src/plugins/Url/index.js
index a3fa056fa..4aeeb7fc2 100644
--- a/src/plugins/Url/index.js
+++ b/src/plugins/Url/index.js
@@ -1,6 +1,8 @@
const Plugin = require('../../core/Plugin')
+const Translator = require('../../core/Translator')
const { h } = require('preact')
const Provider = require('../Provider')
+const UrlUI = require('./UrlUI.js')
// const Utils = require('../../core/Utils')
require('whatwg-fetch')
@@ -22,17 +24,32 @@ module.exports = class Link extends Plugin {
- // set default options
- const defaultOptions = {}
+ // Set default options and locale
+ const defaultLocale = {
+ strings: {
+ addUrl: 'Add url',
+ import: 'Import',
+ enterUrlToImport: 'Enter file url to import'
+ }
+ }
+
+ const defaultOptions = {
+ locale: defaultLocale
+ }
this.opts = Object.assign({}, defaultOptions, opts)
+ this.locale = Object.assign({}, defaultLocale, this.opts.locale)
+ this.locale.strings = Object.assign({}, defaultLocale.strings, this.opts.locale.strings)
+
+ this.translator = new Translator({locale: this.locale})
+ this.i18n = this.translator.translate.bind(this.translator)
+
this.hostname = this.opts.host
// Bind all event handlers for referencability
- ;['getMeta', 'handleClick'].forEach(method => {
- this[method] = this[method].bind(this)
- })
+ this.getMeta = this.getMeta.bind(this)
+ this.addFile = this.addFile.bind(this)
this[this.id] = new Provider(uppy, {
host: this.opts.host,
@@ -93,31 +110,10 @@ module.exports = class Link extends Plugin {
})
}
- handleClick () {
- this.addFile(this.input.value)
- }
-
render (state) {
- return
-
{ this.input = input }}
- value="" />
-
-
+ return
}
install () {
diff --git a/src/scss/_url.scss b/src/scss/_url.scss
index b06367f8f..37179f054 100644
--- a/src/scss/_url.scss
+++ b/src/scss/_url.scss
@@ -17,14 +17,15 @@
.uppy-Url-importButton {
@include reset-button();
- width: 50px;
+ width: 100px;
height: 50px;
+ color: $color-white;
background-color: $color-cornflower-blue;
cursor: pointer;
padding: 12px;
}
-.uppy-Url-importButton-icon {
- width: 100%;
- height: 100%;
-}
+// .uppy-Url-importButton-icon {
+// width: 100%;
+// height: 100%;
+// }