Improve file uploading

packages/xpub-ui/src/molecules/Files.js

@@ -36,9 +36,13 @@ class Files extends React.Component {
       url
     })
 
-    this.setState({ values })
+    const uploads = this.state.uploads.filter(item => {
+      return item.file.name !== file.name
+    })
+
+    this.setState({ values, uploads })
 
-    this.props.handleChange(values)
+    this.props.onChange(values)
   }
 
   render () {

packages/xpub-ui/src/molecules/Upload.js

@@ -16,8 +16,10 @@ class Upload extends React.Component {
     request.addEventListener('progress', this.handleProgress)
     request.addEventListener('load', this.handleLoad)
     request.addEventListener('error', this.handleError)
+    request.addEventListener('abort', this.handleAbort)
   }
 
+  // TODO: 'progress' event not being fired often enough?
   handleProgress = event => {
     if (!event.lengthComputable) return
 
@@ -43,12 +45,18 @@ class Upload extends React.Component {
     }
   }
 
-  handlError = event => {
+  handleError = event => {
     this.setState({
       error: 'There was an error'
     })
   }
 
+  handleAbort = event => {
+    this.setState({
+      error: 'The upload was cancelled'
+    })
+  }
+
   render () {
     const { file } = this.props
     const { progress, error } = this.state