From 2dcd37585086e1330474b434837747422c200ffb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 19 Nov 2015 10:43:40 +0100 Subject: [PATCH] Add functionality for displaying file name upon uploading single file --- .../file_drag_and_drop_preview.js | 124 ++++++++++++------ .../file_drag_and_drop_preview_image.js | 15 ++- .../file_drag_and_drop_preview_iterator.js | 3 +- .../file_drag_and_drop_preview_other.js | 15 ++- js/utils/file_utils.js | 12 ++ sass/ascribe_uploader.scss | 4 + 6 files changed, 119 insertions(+), 54 deletions(-) diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js index 86d4135e..9dcaf7f3 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js @@ -5,22 +5,31 @@ import React from 'react'; import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image'; import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other'; - import { getLangText } from '../../../utils/lang_utils'; +import { truncateTextAtCharIndex } from '../../../utils/general_utils'; +import { extractFileExtensionFromString } from '../../../utils/file_utils'; -let FileDragAndDropPreview = React.createClass({ +const { shape, string, number, func, bool } = React.PropTypes; + +const FileDragAndDropPreview = React.createClass({ propTypes: { - file: React.PropTypes.shape({ - url: React.PropTypes.string, - type: React.PropTypes.string + file: shape({ + url: string, + type: string, + progress: number, + id: number, + status: string, + s3Url: string, + s3UrlSafe: string }).isRequired, - handleDeleteFile: React.PropTypes.func, - handleCancelFile: React.PropTypes.func, - handlePauseFile: React.PropTypes.func, - handleResumeFile: React.PropTypes.func, - areAssetsDownloadable: React.PropTypes.bool, - areAssetsEditable: React.PropTypes.bool + handleDeleteFile: func, + handleCancelFile: func, + handlePauseFile: func, + handleResumeFile: func, + areAssetsDownloadable: bool, + areAssetsEditable: bool, + numberOfDisplayedFiles: number }, toggleUploadProcess() { @@ -50,44 +59,77 @@ let FileDragAndDropPreview = React.createClass({ } }, + getFileName() { + const { numberOfDisplayedFiles, file } = this.props; + + if(numberOfDisplayedFiles === 1) { + return ( + + {truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))} + + ); + } else { + return null; + } + }, + + getRemoveButton() { + if(this.props.areAssetsEditable) { + return ( +
+
+ ); + } else { + return null; + } + }, + render() { + const { file, + areAssetsDownloadable, + numberOfDisplayedFiles } = this.props; + const innerStyle = numberOfDisplayedFiles === 1 ? { verticalAlign: 'middle' } : null; + const outerStyle = numberOfDisplayedFiles !== 1 ? { display: 'inline-block' } : null; + let previewElement; - let removeBtn; // Decide whether an image or a placeholder picture should be displayed - if(this.props.file.type.split('/')[0] === 'image') { - previewElement = (); + if(file.type.split('/')[0] === 'image') { + previewElement = ( + + ); } else { - previewElement = (); - } - - if(this.props.areAssetsEditable) { - removeBtn = (
-
); + previewElement = ( + + ); } return ( -
- {removeBtn} - {previewElement} +
+
+ {this.getRemoveButton()} + {previewElement} +
+ {this.getFileName()}
); } diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js index c21c91f9..502b11c1 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js @@ -6,13 +6,16 @@ import ProgressBar from 'react-bootstrap/lib/ProgressBar'; import AscribeSpinner from '../../ascribe_spinner'; import { getLangText } from '../../../utils/lang_utils'; -let FileDragAndDropPreviewImage = React.createClass({ + +const { number, string, func, bool } = React.PropTypes; + +const FileDragAndDropPreviewImage = React.createClass({ propTypes: { - progress: React.PropTypes.number, - url: React.PropTypes.string, - toggleUploadProcess: React.PropTypes.func, - downloadUrl: React.PropTypes.string, - areAssetsDownloadable: React.PropTypes.bool + progress: number, + url: string, + toggleUploadProcess: func, + downloadUrl: string, + areAssetsDownloadable: bool }, getInitialState() { diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_iterator.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_iterator.js index 2352407a..fd677a63 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_iterator.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_iterator.js @@ -46,7 +46,8 @@ let FileDragAndDropPreviewIterator = React.createClass({ handlePauseFile={handlePauseFile} handleResumeFile={handleResumeFile} areAssetsDownloadable={areAssetsDownloadable} - areAssetsEditable={areAssetsEditable}/> + areAssetsEditable={areAssetsEditable} + numberOfDisplayedFiles={files.length}/> ); })}
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js index 12e52b0a..5613dafb 100644 --- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js +++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js @@ -6,13 +6,16 @@ import ProgressBar from 'react-bootstrap/lib/ProgressBar'; import AscribeSpinner from '../../ascribe_spinner'; import { getLangText } from '../../../utils/lang_utils'; -let FileDragAndDropPreviewOther = React.createClass({ + +const { string, number, bool, func } = React.PropTypes; + +const FileDragAndDropPreviewOther = React.createClass({ propTypes: { - type: React.PropTypes.string, - progress: React.PropTypes.number, - areAssetsDownloadable: React.PropTypes.bool, - toggleUploadProcess: React.PropTypes.func, - downloadUrl: React.PropTypes.string + type: string, + progress: number, + areAssetsDownloadable: bool, + toggleUploadProcess: func, + downloadUrl: string }, getInitialState() { diff --git a/js/utils/file_utils.js b/js/utils/file_utils.js index 3454404a..f5d6ba99 100644 --- a/js/utils/file_utils.js +++ b/js/utils/file_utils.js @@ -84,4 +84,16 @@ export function computeHashOfFile(file) { loadNext(); }); +} + +/** + * Extracts a file extension from a string, by splitting by dot and taking + * the last substring + * @param {string} s file's name + extension + * @return {string} file extension + * + * Via: http://stackoverflow.com/a/190878/1263876 + */ +export function extractFileExtensionFromString(s) { + return s.split('.').pop(); } \ No newline at end of file diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss index 49bc70e9..28de02f7 100644 --- a/sass/ascribe_uploader.scss +++ b/sass/ascribe_uploader.scss @@ -45,6 +45,10 @@ .file-drag-and-drop-preview-iterator-spacing { margin-bottom: 1em; + + .file-name { + font-size: 1.1em; + } } .file-drag-and-drop-dialog {