diff --git a/app/soapbox/actions/__tests__/compose.test.js b/app/soapbox/actions/__tests__/compose.test.js index ec20acf0f..73b64f801 100644 --- a/app/soapbox/actions/__tests__/compose.test.js +++ b/app/soapbox/actions/__tests__/compose.test.js @@ -34,6 +34,10 @@ describe('uploadCompose()', () => { }); it('creates an alert if exceeds max size', async() => { + const mockIntl = { + formatMessage: jest.fn().mockReturnValue('Image exceeds the current file size limit (10 Bytes)'), + }; + const expectedActions = [ { type: 'COMPOSE_UPLOAD_REQUEST', skipLoading: true }, { @@ -46,7 +50,7 @@ describe('uploadCompose()', () => { { type: 'COMPOSE_UPLOAD_FAIL', error: true, skipLoading: true }, ]; - await store.dispatch(uploadCompose(files)); + await store.dispatch(uploadCompose(files, mockIntl)); const actions = store.getActions(); expect(actions).toEqual(expectedActions); @@ -82,6 +86,10 @@ describe('uploadCompose()', () => { }); it('creates an alert if exceeds max size', async() => { + const mockIntl = { + formatMessage: jest.fn().mockReturnValue('Video exceeds the current file size limit (10 Bytes)'), + }; + const expectedActions = [ { type: 'COMPOSE_UPLOAD_REQUEST', skipLoading: true }, { @@ -94,7 +102,7 @@ describe('uploadCompose()', () => { { type: 'COMPOSE_UPLOAD_FAIL', error: true, skipLoading: true }, ]; - await store.dispatch(uploadCompose(files)); + await store.dispatch(uploadCompose(files, mockIntl)); const actions = store.getActions(); expect(actions).toEqual(expectedActions); diff --git a/app/soapbox/actions/compose.js b/app/soapbox/actions/compose.js index 3cebf8459..9f1555ae9 100644 --- a/app/soapbox/actions/compose.js +++ b/app/soapbox/actions/compose.js @@ -79,10 +79,12 @@ export const COMPOSE_ADD_TO_MENTIONS = 'COMPOSE_ADD_TO_MENTIONS'; export const COMPOSE_REMOVE_FROM_MENTIONS = 'COMPOSE_REMOVE_FROM_MENTIONS'; const messages = defineMessages({ - uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' }, - uploadErrorPoll: { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' }, + exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' }, + exceededVideoSizeLimit: { id: 'upload_error.video_size_limit', defaultMessage: 'Video exceeds the current file size limit ({limit})' }, scheduleError: { id: 'compose.invalid_schedule', defaultMessage: 'You must schedule a post at least 5 minutes out.' }, success: { id: 'compose.submit_success', defaultMessage: 'Your post was sent' }, + uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' }, + uploadErrorPoll: { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' }, view: { id: 'snackbar.view', defaultMessage: 'View' }, }); @@ -296,7 +298,7 @@ export function submitComposeFail(error) { }; } -export function uploadCompose(files) { +export function uploadCompose(files, intl) { return function(dispatch, getState) { if (!isLoggedIn(getState)) return; const attachmentLimit = getState().getIn(['instance', 'configuration', 'statuses', 'max_media_attachments']); @@ -320,12 +322,14 @@ export function uploadCompose(files) { const isImage = f.type.match(/image.*/); const isVideo = f.type.match(/video.*/); if (isImage && maxImageSize && (f.size > maxImageSize)) { - const message = `Image exceeds the current file size limit (${formatBytes(maxImageSize)})`; + const limit = formatBytes(maxImageSize); + const message = intl.formatMessage(messages.exceededImageSizeLimit, { limit }); dispatch(snackbar.error(message)); dispatch(uploadComposeFail(true)); return; } else if (isVideo && maxVideoSize && (f.size > maxVideoSize)) { - const message = `Video exceeds the current file size limit (${formatBytes(maxVideoSize)})`; + const limit = formatBytes(maxVideoSize); + const message = intl.formatMessage(messages.exceededVideoSizeLimit, { limit }); dispatch(snackbar.error(message)); dispatch(uploadComposeFail(true)); return; diff --git a/app/soapbox/features/compose/containers/compose_form_container.js b/app/soapbox/features/compose/containers/compose_form_container.js index 4a048482d..c17143007 100644 --- a/app/soapbox/features/compose/containers/compose_form_container.js +++ b/app/soapbox/features/compose/containers/compose_form_container.js @@ -39,7 +39,7 @@ const mapStateToProps = state => { }; }; -const mapDispatchToProps = (dispatch) => ({ +const mapDispatchToProps = (dispatch, { intl }) => ({ onChange(text) { dispatch(changeCompose(text)); @@ -66,7 +66,7 @@ const mapDispatchToProps = (dispatch) => ({ }, onPaste(files) { - dispatch(uploadCompose(files)); + dispatch(uploadCompose(files, intl)); }, onPickEmoji(position, data, needsSpace) { diff --git a/app/soapbox/features/compose/containers/upload_button_container.js b/app/soapbox/features/compose/containers/upload_button_container.js index 160cedf54..2f6542942 100644 --- a/app/soapbox/features/compose/containers/upload_button_container.js +++ b/app/soapbox/features/compose/containers/upload_button_container.js @@ -1,3 +1,4 @@ +import { injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import { uploadCompose } from '../../../actions/compose'; @@ -8,12 +9,12 @@ const mapStateToProps = state => ({ resetFileKey: state.getIn(['compose', 'resetFileKey']), }); -const mapDispatchToProps = dispatch => ({ +const mapDispatchToProps = (dispatch, { intl }) => ({ onSelectFile(files) { - dispatch(uploadCompose(files)); + dispatch(uploadCompose(files, intl)); }, }); -export default connect(mapStateToProps, mapDispatchToProps)(UploadButton); +export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(UploadButton)); diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 598a9fe04..8f3caa2f5 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -426,7 +426,7 @@ class UI extends React.PureComponent { this.dragTargets = []; if (e.dataTransfer && e.dataTransfer.files.length >= 1) { - this.props.dispatch(uploadCompose(e.dataTransfer.files)); + this.props.dispatch(uploadCompose(e.dataTransfer.files, this.props.intl)); } }