Merge pull request #420 from plotly/dropzone-improvements

UX improvements drop zone

Author: VeraZab

src/components/widgets/Dropzone.js

@@ -13,7 +13,9 @@ class Dropzone extends Component {
     };
 
     this.validFiletypes = {
-      image: _('jpeg/jpg, svg, png, gif, bmp, webp'),
+      image: _(
+        'image/jpeg, image/jpg, image/svg, image/png, image/gif, image/bmp, image/webp'
+      ),
     };
 
     this.onDrop = this.onDrop.bind(this);
@@ -40,7 +42,7 @@ class Dropzone extends Component {
   componentWillMount() {
     const _ = this.props.localize;
 
-    if (this.props.fileType && this.props.value && this.props.value !== '') {
+    if (this.props.value && this.props.value !== '') {
       this.setState({content: this.renderSuccess(this.props.value)});
       return;
     }
@@ -50,7 +52,7 @@ class Dropzone extends Component {
         <div className="dropzone-container__message">
           <p>
             {_('Drop the ') +
-              (this.props.fileType ? this.props.fileType : _('file')) +
+              this.props.fileType +
               _(
                 ' to upload here or click to choose a file from your computer.'
               )}
@@ -59,7 +61,9 @@ class Dropzone extends Component {
           {this.props.fileType === 'image' ? (
             <p>
               {_('Supported formats are: ') +
-                this.validFiletypes[this.props.fileType] +
+                this.validFiletypes[this.props.fileType]
+                  .split('image/')
+                  .join('') +
                 '.'}
             </p>
           ) : null}
@@ -70,15 +74,18 @@ class Dropzone extends Component {
 
   onLoad(e) {
     const _ = this.props.localize;
+    const supportedFileTypes =
+      this.props.fileType === 'image'
+        ? this.validFiletypes[this.props.fileType].split('image/').join('')
+        : this.validFiletypes[this.props.fileType];
+
     const parsingError = (
       <div className="dropzone-container__message">
         <p>{_('Yikes! An error occurred while parsing this file.')}</p>
         <p>
-          {this.props.fileType
-            ? _('Try again with a supported file format: ') +
-              this.validFiletypes[this.props.fileType] +
-              '.'
-            : _('Try again.')}
+          {_('Try again with a supported file format: ') +
+            supportedFileTypes +
+            '.'}
         </p>
       </div>
     );
@@ -98,69 +105,62 @@ class Dropzone extends Component {
     }
   }
 
-  onDrop(file) {
+  onDrop(accepted, rejected) {
     const _ = this.props.localize;
     const reader = new FileReader();
 
-    const invalidFileTypeMessage = this.props.fileType ? (
-      <div className="dropzone-container__message">
-        <p>
-          {_("Yikes! This doesn't look like a valid ") +
-            this.props.fileType +
-            _('to us. ')}
-        </p>
-        <p>
-          {_('Try again with a ') +
-            this.validFiletypes[this.props.fileType] +
-            '.'}
-        </p>
-      </div>
-    ) : (
-      _('Unsupported file format!')
-    );
+    if (accepted.length) {
+      if (accepted.length > 1) {
+        this.setState({
+          content: (
+            <div className="dropzone-container__message">
+              <p>{_('Yikes! You can only upload one file at a time.')}</p>
+              <p>
+                {_(
+                  'To upload multiple files, create multiple files and upload them individually.'
+                )}
+              </p>
+            </div>
+          ),
+        });
+        return;
+      }
+      this.setState({content: _('Loading...')});
+      reader.onload = e => this.onLoad(e);
+      if (this.props.fileType === 'image') {
+        reader.readAsDataURL(accepted[0]);
+      }
+    }
+
+    if (rejected.length) {
+      const supportedFileTypes =
+        this.props.fileType === 'image'
+          ? this.validFiletypes[this.props.fileType].split('image/').join('')
+          : this.validFiletypes[this.props.fileType];
 
-    if (file.length > 1) {
       this.setState({
         content: (
           <div className="dropzone-container__message">
-            <p>{_('Yikes! You can only upload one file at a time.')}</p>
             <p>
-              {_(
-                'To upload multiple files, create multiple files and upload them individually.'
-              )}
+              {_("Yikes! This doesn't look like a valid ") +
+                this.props.fileType +
+                _(' to us. ')}
             </p>
+            <p>{_('Try again with a ') + supportedFileTypes + ' file.'}</p>
           </div>
         ),
       });
-      return;
-    }
-
-    this.setState({content: _('Loading...')});
-
-    reader.onload = e => this.onLoad(e);
-
-    if (this.props.fileType === 'image') {
-      if (
-        ['.jpeg', '.jpg', '.svg', '.png', '.gif', '.bmp', '.webp'].some(ext =>
-          file[0].name.endsWith(ext)
-        )
-      ) {
-        reader.readAsDataURL(file[0]);
-      } else {
-        this.setState({
-          content: invalidFileTypeMessage,
-        });
-      }
     }
   }
 
   render() {
     return (
       <Drop
-        ref="dzone"
+        accept={this.validFiletypes[this.props.fileType]}
         onDrop={this.onDrop}
         className="dropzone-container"
         activeClassName="dropzone-container--active"
+        rejectClassName="dropzone-container--rejected"
       >
         <div className="dropzone-container__content">{this.state.content}</div>
       </Drop>
@@ -170,7 +170,7 @@ class Dropzone extends Component {
 
 Dropzone.propTypes = {
   localize: PropTypes.func,
-  fileType: PropTypes.string,
+  fileType: PropTypes.string.isRequired,
   onUpdate: PropTypes.func,
   value: PropTypes.any,
 };

src/styles/components/widgets/_dropzone.scss

@@ -27,12 +27,16 @@
   &__image {
     width: 100%;
     height: 100%;
-    background-size: cover;
+    background-size: contain;
     background-position: center;
     position: relative;
   }
 
   &--active {
     border-color: var(--color-dodger);
   }
+
+  &--rejected {
+    border-color: red;
+  }
 }