Add functionality for displaying file name upon uploading single file

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 (
+                <span className="file-name">
+                    {truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))}
+                </span>
+            );
+        } else {
+            return null;
+        }
+    },
+
+    getRemoveButton() {
+        if(this.props.areAssetsEditable) {
+            return (
+                <div className="delete-file">
+                    <span
+                        className="glyphicon glyphicon-remove text-center"
+                        aria-hidden="true"
+                        title={getLangText('Remove file')}
+                        onClick={this.handleDeleteFile}/>
+                </div>
+            );
+        } 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 = (<FileDragAndDropPreviewImage
-                                onClick={this.handleDeleteFile}
-                                progress={this.props.file.progress}
-                                url={this.props.file.url}
-                                toggleUploadProcess={this.toggleUploadProcess}
-                                areAssetsDownloadable={this.props.areAssetsDownloadable}
-                                downloadUrl={this.props.file.s3UrlSafe}/>);
+        if(file.type.split('/')[0] === 'image') {
+            previewElement = (
+                <FileDragAndDropPreviewImage
+                    onClick={this.handleDeleteFile}
+                    progress={file.progress}
+                    url={file.url}
+                    toggleUploadProcess={this.toggleUploadProcess}
+                    areAssetsDownloadable={areAssetsDownloadable}
+                    downloadUrl={file.s3UrlSafe}/>
+            );
         } else {
-            previewElement = (<FileDragAndDropPreviewOther
-                                onClick={this.handleDeleteFile}
-                                progress={this.props.file.progress}
-                                type={this.props.file.type.split('/')[1]}
-                                toggleUploadProcess={this.toggleUploadProcess}
-                                areAssetsDownloadable={this.props.areAssetsDownloadable}
-                                downloadUrl={this.props.file.s3UrlSafe}/>);
-        }
-
-        if(this.props.areAssetsEditable) {
-           removeBtn = (<div className="delete-file">
-                            <span
-                                className="glyphicon glyphicon-remove text-center"
-                                aria-hidden="true"
-                                title={getLangText('Remove file')}
-                                onClick={this.handleDeleteFile}/>
-                        </div>);
+            previewElement = (
+                <FileDragAndDropPreviewOther
+                    onClick={this.handleDeleteFile}
+                    progress={file.progress}
+                    type={file.type.split('/')[1]}
+                    toggleUploadProcess={this.toggleUploadProcess}
+                    areAssetsDownloadable={areAssetsDownloadable}
+                    downloadUrl={file.s3UrlSafe}/>
+                );
         }
 
         return (
-            <div
-                className="file-drag-and-drop-position">
-                {removeBtn}
-                {previewElement}
+            <div style={outerStyle}>
+                <div
+                    style={innerStyle}
+                    className="file-drag-and-drop-position">
+                    {this.getRemoveButton()}
+                    {previewElement}
+                </div>
+                {this.getFileName()}
             </div>
         );
     }

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() {

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}/>
                             );
                         })}
                     </div>

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() {

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();
 }

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 {