Merge pull request #141 from ascribe/AG-139-specific-file-formats-leads-to-wrong-preview-sizing

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

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,
@@ -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

@@ -71,17 +71,14 @@ const FileDragAndDropPreviewOther = React.createClass({
         }
 
         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">
                 <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

@@ -9,6 +9,12 @@
     text-align: center;
     vertical-align: middle;
     padding-top: 1.5em;
+
+    @media screen and (max-width: 625px) {
+        .file-name {
+            display: block;
+        }
+    }
 }
 
 .inactive-dropzone {
@@ -78,12 +84,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 +131,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 +142,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;
     }
 }