Substitute upload button for placeholder text in print

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js

@@ -26,7 +26,7 @@ let FileDragAndDropDialog = React.createClass({
     getDragDialog(fileClass) {
         if (dragAndDropAvailable) {
             return [
-                <p>{getLangText('Drag %s here', fileClass)}</p>,
+                <p className="file-drag-and-drop-dialog-title">{getLangText('Drag %s here', fileClass)}</p>,
                 <p>{getLangText('or')}</p>
             ];
         } else {
@@ -46,6 +46,8 @@ let FileDragAndDropDialog = React.createClass({
         if (hasFiles) {
             return null;
         } else {
+            let dialogElement;
+
             if (enableLocalHashing && !uploadMethod) {
                 const currentQueryParams = getCurrentQueryParams();
 
@@ -55,9 +57,9 @@ let FileDragAndDropDialog = React.createClass({
                 const queryParamsUpload = Object.assign({}, currentQueryParams);
                 queryParamsUpload.method = 'upload';
 
-                return (
+                dialogElement = (
-                    <div className="file-drag-and-drop-dialog present-options">
+                    <div className="present-options">
-                        <p>{getLangText('Would you rather')}</p>
+                        <p className="file-drag-and-drop-dialog-title">{getLangText('Would you rather')}</p>
                         {/*
                             The frontend in live is hosted under /app,
                             Since `Link` is appending that base url, if its defined
@@ -85,34 +87,42 @@ let FileDragAndDropDialog = React.createClass({
                 );
             } else {
                 if (multipleFiles) {
-                    return (
+                    dialogElement = [
-                        <span className="file-drag-and-drop-dialog">
+                        this.getDragDialog(fileClassToUpload.plural),
-                            {this.getDragDialog(fileClassToUpload.plural)}
                         <span
                             className="btn btn-default"
                             onClick={onClick}>
                                 {getLangText('choose %s to upload', fileClassToUpload.plural)}
                         </span>
-                        </span>
+                    ];
-                    );
                 } else {
                     const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
                                                            : getLangText('choose a %s to upload', fileClassToUpload.singular);
 
-                    return (
+                    dialogElement = [
-                        <span className="file-drag-and-drop-dialog">
+                        this.getDragDialog(fileClassToUpload.singular),
-                            {this.getDragDialog(fileClassToUpload.singular)}
                         <span
                             className="btn btn-default"
                             onClick={onClick}>
                                 {dialog}
                         </span>
-                        </span>
+                    ];
+                }
+            }
+
+            return (
+                <div className="file-drag-and-drop-dialog">
+                    <div className="hidden-print">
+                        {dialogElement}
+                    </div>
+                    {/* Hide the uploader and just show that there's been on files uploaded yet when printing */}
+                    <p className="text-align-center visible-print">
+                        {getLangText('No files uploaded')}
+                    </p>
+                </div>
             );
         }
     }
-        }
-    }
 });
 
 export default FileDragAndDropDialog;

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js

@@ -68,7 +68,7 @@ const FileDragAndDropPreviewImage = React.createClass({
 
         return (
             <div
-                className="file-drag-and-drop-preview-image"
+                className="file-drag-and-drop-preview-image hidden-print"
                 style={imageStyle}>
                     <AclProxy
                         show={showProgress}>

sass/ascribe_print.scss

@@ -25,6 +25,17 @@
         float: right !important;
     }
 
+    // Restyle file uploader dialogs
+    .file-drag-and-drop {
+        padding-top: 0;
+        outline-width: 0;
+        text-align: left;
+    }
+
+    .file-drag-and-drop-position {
+        margin: 0;
+    }
+
     // Restyle COA
     .ascribe-coa-print-placeholder {
         padding: 0 1.5em 1em 1.5em;