Merge pull request #6411 from zhu/fix-file-uploader-2

Fix file uploader mobile

bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/component.jsx

@@ -6,6 +6,7 @@ import update from 'immutability-helper';
 import cx from 'classnames';
 import _ from 'lodash';
 import logger from '/imports/startup/client/logger';
+import browser from 'browser-detect';
 
 import { notify } from '/imports/ui/services/notification';
 import ModalFullscreen from '/imports/ui/components/modal/fullscreen/component';
@@ -66,10 +67,18 @@ const intlMessages = defineMessages({
     id: 'app.presentationUploder.dropzoneLabel',
     description: 'message warning where drop files for upload',
   },
+  dropzoneImagesLabel: {
+    id: 'app.presentationUploder.dropzoneImagesLabel',
+    description: 'message warning where drop images for upload',
+  },
   browseFilesLabel: {
     id: 'app.presentationUploder.browseFilesLabel',
     description: 'message use on the file browser',
   },
+  browseImagesLabel: {
+    id: 'app.presentationUploder.browseImagesLabel',
+    description: 'message use on the image browser',
+  },
   fileToUpload: {
     id: 'app.presentationUploder.fileToUpload',
     description: 'message used in the file selected for upload',
@@ -78,6 +87,10 @@ const intlMessages = defineMessages({
     id: 'app.presentationUploder.genericError',
     description: 'generic error while uploading/converting',
   },
+  rejectedError: {
+    id: 'app.presentationUploder.rejectedError',
+    description: 'some files rejected, please check the file mime types',
+  },
   uploadProcess: {
     id: 'app.presentationUploder.upload.progress',
     description: 'message that indicates the percentage of the upload',
@@ -115,6 +128,12 @@ const intlMessages = defineMessages({
   },
 });
 
+const BROWSER_RESULTS = browser();
+const isMobileBrowser = (BROWSER_RESULTS ? BROWSER_RESULTS.mobile : false) ||
+  (BROWSER_RESULTS && BROWSER_RESULTS.os ?
+    BROWSER_RESULTS.os.includes('Android') : // mobile flag doesn't always work
+    false);
+
 class PresentationUploader extends Component {
   constructor(props) {
     super(props);
@@ -227,8 +246,10 @@ class PresentationUploader extends Component {
     });
   }
 
-  handleFiledrop(files) {
-    const presentationsToUpload = files.map((file) => {
+  handleFiledrop(files, files2) {
+    const [ accepted, rejected ] = _.partition(files.concat(files2), (f) => this.props.fileValidMimeTypes.includes(f.type));
+
+    const presentationsToUpload = accepted.map((file) => {
       const id = _.uniqueId(file.name);
 
       return {
@@ -274,6 +295,11 @@ class PresentationUploader extends Component {
         this.handleCurrentChange(presentationsToUpload[0].id);
       }
     });
+
+
+    if (rejected.length > 0) {
+        notify(this.props.intl.formatMessage(intlMessages.rejectedError), 'error');
+    }
   }
 
   handleCurrentChange(id) {
@@ -458,6 +484,41 @@ class PresentationUploader extends Component {
     );
   }
 
+  renderPicDropzone() {
+    const {
+      intl,
+      fileSizeMin,
+      fileSizeMax,
+      fileValidMimeTypes,
+    } = this.props;
+
+    const { disableActions } = this.state;
+
+    if (disableActions) return null;
+
+    return (
+      <Dropzone
+        multiple
+        className={styles.dropzone}
+        activeClassName={styles.dropzoneActive}
+        rejectClassName={styles.dropzoneReject}
+        accept="image/*"
+        minSize={fileSizeMin}
+        maxSize={fileSizeMax}
+        disablePreview
+        onDrop={this.handleFiledrop}
+      >
+        <Icon className={styles.dropzoneIcon} iconName="upload" />
+        <p className={styles.dropzoneMessage}>
+          {intl.formatMessage(intlMessages.dropzoneImagesLabel)}&nbsp;
+          <span className={styles.dropzoneLink}>
+            {intl.formatMessage(intlMessages.browseImagesLabel)}
+          </span>
+        </p>
+      </Dropzone>
+    );
+  }
+
   renderDropzone() {
     const {
       intl,
@@ -476,7 +537,7 @@ class PresentationUploader extends Component {
         className={styles.dropzone}
         activeClassName={styles.dropzoneActive}
         rejectClassName={styles.dropzoneReject}
-        accept={fileValidMimeTypes.join()}
+        accept={isMobileBrowser ? '' : fileValidMimeTypes.join()}
         minSize={fileSizeMin}
         maxSize={fileSizeMax}
         disablepreview="true"
@@ -517,7 +578,10 @@ class PresentationUploader extends Component {
       >
         <p>{intl.formatMessage(intlMessages.message)}</p>
         {this.renderPresentationList()}
-        {this.renderDropzone()}
+        <div className={styles.dropzoneWrapper}>
+          {isMobileBrowser ? this.renderPicDropzone() : null}
+          {this.renderDropzone()}
+        </div>
       </ModalFullscreen>
     );
   }

bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss

@@ -149,13 +149,17 @@
   }
 }
 
-.dropzone {
+.dropzoneWrapper {
   width: 100%;
-  display: block;
+  display: flex;
+  margin-top: calc(var(--lg-padding-y) * 5);
+}
+
+.dropzone {
+  flex: auto;
   border: 2px dashed;
   border-radius: var(--border-radius);
-  padding: calc(var(--lg-padding-y) * 2.5) calc(var(--lg-padding-x) * 2.5);
-  margin-top: calc(var(--lg-padding-y) * 5);
+  padding: calc(var(--lg-padding-y) * 2.5) var(--lg-padding-x);
   text-align: center;
   font-size: var(--font-size-large);
   cursor: pointer;

bigbluebutton-html5/private/locales/en.json

@@ -82,10 +82,13 @@
     "app.presentationUploder.dismissLabel": "Cancel",
     "app.presentationUploder.dismissDesc": "Close the modal window and discard your changes",
     "app.presentationUploder.dropzoneLabel": "Drag files here to upload",
+    "app.presentationUploder.dropzoneImagesLabel": "Drag images here to upload",
     "app.presentationUploder.browseFilesLabel": "or browse for files",
+    "app.presentationUploder.browseImagesLabel": "or browse/capture for images",
     "app.presentationUploder.fileToUpload": "To be uploaded...",
     "app.presentationUploder.currentBadge": "Current",
     "app.presentationUploder.genericError": "Ops, something went wrong",
+    "app.presentationUploder.rejectedError": "Some of the selected files are rejected. Please check the file mime types.",
     "app.presentationUploder.upload.progress": "Uploading ({0}%)",
     "app.presentationUploder.upload.413": "File is too large",
     "app.presentationUploder.conversion.conversionProcessingSlides": "Processing page {0} of {1}",