diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index bac996e65c..ae72908b82 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -16,6 +16,7 @@ limitations under the License. */ import React from 'react'; import PropTypes from 'prop-types'; +import filesize from "filesize"; import { _t } from '../../../languageHandler'; import CallHandler from '../../../CallHandler'; import MatrixClientPeg from '../../../MatrixClientPeg'; @@ -97,18 +98,40 @@ export default class MessageComposer extends React.Component { } onUploadFileSelected(files) { - this.uploadFiles(files.target.files); + const tfiles = files.target.files; + MatrixClientPeg.get().getMediaLimits().then((limits) => { + this.uploadFiles(tfiles, limits); + }); } - uploadFiles(files) { + isFileUploadAllowed(file, limits) { + const sizeLimit = limits.size || -1; + if (sizeLimit !== -1 && file.size > sizeLimit) { + return _t("File is too big. Maximum file size is %(fileSize)s", {fileSize: filesize(sizeLimit)}); + } + return true; + } + + uploadFiles(files, limits) { const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); const TintableSvg = sdk.getComponent("elements.TintableSvg"); const fileList = []; + const acceptedFiles = []; + const failedFiles = []; + for (let i=0; i - { files[i].name || _t('Attachment') } - ); + const fileAcceptedOrError = this.isFileUploadAllowed(files[i], limits); + if (fileAcceptedOrError === true) { + acceptedFiles.push(
  • + { files[i].name || _t('Attachment') } +
  • ); + fileList.push(files[i]); + } else { + failedFiles.push(
  • + { files[i].name || _t('Attachment') } { _t('Reason') + ": " + fileAcceptedOrError} +
  • ); + } } const isQuoting = Boolean(RoomViewStore.getQuotingEvent()); @@ -119,23 +142,39 @@ export default class MessageComposer extends React.Component { }

    ; } + const acceptedFilesPart = acceptedFiles.length === 0 ? null : ( +
    +

    { _t('Are you sure you want to upload the following files?') }

    +
      + { acceptedFiles } +
    +
    + ); + + const failedFilesPart = failedFiles.length === 0 ? null : ( +
    +

    { _t('The following files cannot be uploaded:') }

    +
      + { failedFiles } +
    +
    + ); + Modal.createTrackedDialog('Upload Files confirmation', '', QuestionDialog, { title: _t('Upload Files'), description: (
    -

    { _t('Are you sure you want to upload the following files?') }

    -
      - { fileList } -
    + { acceptedFilesPart } + { failedFilesPart } { replyToWarning }
    ), onFinished: (shouldUpload) => { if (shouldUpload) { // MessageComposer shouldn't have to rely on its parent passing in a callback to upload a file - if (files) { - for (let i=0; i