Extract extension using file name rather that mime type for uploader preview

Also adds ellipsis overflow to the extension name to prevent long
extensions from resizing the preview element and removes redundant
`.file-drag-and-drop-preview-table-wrapper` class

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js

@@ -23,6 +23,7 @@ const FileDragAndDropPreview = React.createClass({
             s3Url: string,
             s3UrlSafe: string
         }).isRequired,
+
         handleDeleteFile: func,
         handleCancelFile: func,
         handlePauseFile: func,
@@ -33,9 +34,9 @@ const FileDragAndDropPreview = React.createClass({
     },
 
     toggleUploadProcess() {
-        if(this.props.file.status === 'uploading') {
+        if (this.props.file.status === 'uploading') {
             this.props.handlePauseFile(this.props.file.id);
-        } else if(this.props.file.status === 'paused') {
+        } else if (this.props.file.status === 'paused') {
             this.props.handleResumeFile(this.props.file.id);
         }
     },
@@ -54,13 +55,13 @@ const FileDragAndDropPreview = React.createClass({
             (file.status === 'upload successful' || file.status === 'online') &&
             file.s3UrlSafe) {
             handleDeleteFile(file.id);
-        } else if(handleCancelFile) {
+        } else if (handleCancelFile) {
             handleCancelFile(file.id);
         }
     },
 
     handleDownloadFile() {
-        if(this.props.file.s3Url) {
+        if (this.props.file.s3Url) {
             // This simply opens a new browser tab with the url provided
             open(this.props.file.s3Url);
         }
@@ -69,7 +70,7 @@ const FileDragAndDropPreview = React.createClass({
     getFileName() {
         const { numberOfDisplayedFiles, file } = this.props;
 
-        if(numberOfDisplayedFiles === 1) {
+        if (numberOfDisplayedFiles === 1) {
             return (
                 <span className="file-name">
                     {truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))}
@@ -81,7 +82,7 @@ const FileDragAndDropPreview = React.createClass({
     },
 
     getRemoveButton() {
-        if(this.props.areAssetsEditable) {
+        if (this.props.areAssetsEditable) {
             return (
                 <div className="delete-file">
                     <span
@@ -107,7 +108,7 @@ const FileDragAndDropPreview = React.createClass({
 
         // Decide whether an image or a placeholder picture should be displayed
         // If a file has its `thumbnailUrl` defined, then we display it also as an image
-        if(file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
+        if (file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
             previewElement = (
                 <FileDragAndDropPreviewImage
                     onClick={this.handleDeleteFile}
@@ -123,7 +124,7 @@ const FileDragAndDropPreview = React.createClass({
                 <FileDragAndDropPreviewOther
                     onClick={this.handleDeleteFile}
                     progress={file.progress}
-                    type={file.type.split('/')[1]}
+                    type={extractFileExtensionFromString(file.name)}
                     toggleUploadProcess={this.toggleUploadProcess}
                     areAssetsDownloadable={areAssetsDownloadable}
                     downloadUrl={file.s3UrlSafe}

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js

@@ -56,9 +56,9 @@ const FileDragAndDropPreviewOther = React.createClass({
                     target="_blank"
                     className="glyphicon glyphicon-download action-file"
                     aria-hidden="true"
-                    title={getLangText('Download file')}/>
+                    title={getLangText('Download file')} />
             );
-        } else if(progress >= 0 && progress < 100) {
+        } else if (progress >= 0 && progress < 100) {
             actionSymbol = (
                 <div className="spinner-file">
                     <AscribeSpinner color='dark-blue' size='md' />
@@ -66,22 +66,19 @@ const FileDragAndDropPreviewOther = React.createClass({
             );
         } else {
             actionSymbol = (
-                <span className='ascribe-icon icon-ascribe-ok action-file'/>
+                <span className='ascribe-icon icon-ascribe-ok action-file' />
             );
         }
 
         return (
-            <div
-                className="file-drag-and-drop-preview">
+            <div className="file-drag-and-drop-preview">
                 <ProgressBar
                     now={Math.ceil(progress)}
                     style={style}
-                    className="ascribe-progress-bar ascribe-progress-bar-xs"/>
-                <div className="file-drag-and-drop-preview-table-wrapper">
+                    className="ascribe-progress-bar ascribe-progress-bar-xs" />
                 <div className="file-drag-and-drop-preview-other">
                     {actionSymbol}
-                        <p style={style}>{'.' + type}</p>
-                    </div>
+                    <p style={style}>{'.' + (type ? type : 'file')}</p>
                 </div>
             </div>
         );

sass/ascribe_uploader.scss

@@ -78,12 +78,6 @@
     }
 }
 
-.file-drag-and-drop-preview-table-wrapper {
-    display: table;
-    height: 94px;
-    width: 104px;
-}
-
 .file-drag-and-drop-preview {
     background-color: #eeeeee;
     border: 1px solid #616161;
@@ -131,7 +125,7 @@
     width: 104px;
 
     // REFACTOR TO USE TABLE CELL
-    .action-file, .spinner-file, .icon-ascribe-ok {
+    .action-file, .spinner-file {
         margin-top: 1em;
         line-height: 1.3;
     }
@@ -142,23 +136,21 @@
 }
 
 .file-drag-and-drop-preview-other {
-    display: table-cell;
+    height: 94px;
     text-align: center;
-    vertical-align: middle;
+    width: 104px;
 
     p {
         margin-top: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .action-file:not(.icon-ascribe-ok), .spinner-file {
         margin-top: 0;
         position: relative;
-        top: .3em;
-
-        span:not(:first-child) {
-            display: block;
-            margin-top: .5em;
-        }
+        top: 0.8em;
     }
 }