Generalize UploadButton styling

js/components/ascribe_forms/form_register_piece.js

@@ -145,7 +145,7 @@ let RegisterPieceForm = React.createClass({
                 <Property
                     name="thumbnail_file">
                     <InputFineUploader
-                            fileInputElement={UploadButton}
+                            fileInputElement={UploadButton({ className: 'btn btn-secondary btn-sm' })}
                             createBlobRoutine={{
                                 url: ApiUrls.blob_thumbnails
                             }}

js/components/ascribe_settings/contract_settings_update_button.js

@@ -55,7 +55,7 @@ let ContractSettingsUpdateButton = React.createClass({
     render() {
         return (
            <ReactS3FineUploader
-                fileInputElement={UploadButton}
+                fileInputElement={UploadButton()}
                 keyRoutine={{
                     url: AppConstants.serverUrl + 's3/key/',
                     fileClass: 'contract'

js/components/ascribe_uploader/ascribe_upload_button/upload_button.js

@@ -10,130 +10,133 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils';
 
 const { func, array, bool, shape, string } = React.PropTypes;
 
-let UploadButton = React.createClass({
-    propTypes: {
-        onDrop: func.isRequired,
-        filesToUpload: array,
-        multiple: bool,
 
-        // For simplification purposes we're just going to use this prop as a
+export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) {
-        // label for the upload button
+    return React.createClass({
-        fileClassToUpload: shape({
+        displayName: 'UploadButton',
-            singular: string,
-            plural: string
-        }),
 
-        allowedExtensions: string,
+        propTypes: {
+            onDrop: func.isRequired,
+            filesToUpload: array,
+            multiple: bool,
 
-        handleCancelFile: func // provided by ReactS3FineUploader
+            // For simplification purposes we're just going to use this prop as a
-    },
+            // label for the upload button
+            fileClassToUpload: shape({
+                singular: string,
+                plural: string
+            }),
 
-    handleDrop(event) {
+            allowedExtensions: string,
-        event.preventDefault();
-        event.stopPropagation();
-        let files = event.target.files;
 
-        if(typeof this.props.onDrop === 'function' && files) {
+            handleCancelFile: func // provided by ReactS3FineUploader
-          this.props.onDrop(files);
+        },
-        }
 
-    },
+        handleDrop(event) {
+            event.preventDefault();
+            event.stopPropagation();
+            let files = event.target.files;
 
-    getUploadingFiles() {
+            if(typeof this.props.onDrop === 'function' && files) {
-        return this.props.filesToUpload.filter((file) => file.status === 'uploading');
+              this.props.onDrop(files);
-    },
+            }
 
-    getUploadedFile() {
+        },
-        return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
-    },
 
-    handleOnClick() {
+        getUploadingFiles() {
-        const uploadingFiles = this.getUploadingFiles();
+            return this.props.filesToUpload.filter((file) => file.status === 'uploading');
-        const uploadedFile = this.getUploadedFile();
+        },
 
-        if(uploadedFile) {
+        getUploadedFile() {
-            this.props.handleCancelFile(uploadedFile.id);
+            return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
-        }
+        },
-        if(uploadingFiles.length === 0) {
-            // We only want the button to be clickable if there are no files currently uploading
 
-            // Firefox only recognizes the simulated mouse click if bubbles is set to true,
+        handleOnClick() {
-            // but since Google Chrome propagates the event much further than needed, we
+            const uploadingFiles = this.getUploadingFiles();
-            // need to stop propagation as soon as the event is created
+            const uploadedFile = this.getUploadedFile();
-            var evt = new MouseEvent('click', {
-                view: window,
-                bubbles: true,
-                cancelable: true
-            });
 
-            evt.stopPropagation();
+            if(uploadedFile) {
-            this.refs.fileinput.getDOMNode().dispatchEvent(evt);
+                this.props.handleCancelFile(uploadedFile.id);
-        }
+            }
-    },
+            if(uploadingFiles.length === 0) {
+                // We only want the button to be clickable if there are no files currently uploading
 
-    getButtonLabel() {
+                // Firefox only recognizes the simulated mouse click if bubbles is set to true,
-        let { filesToUpload, fileClassToUpload } = this.props;
+                // but since Google Chrome propagates the event much further than needed, we
+                // need to stop propagation as soon as the event is created
+                var evt = new MouseEvent('click', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                });
 
-        // filter invalid files that might have been deleted or canceled...
+                evt.stopPropagation();
-        filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter);
+                this.refs.fileinput.getDOMNode().dispatchEvent(evt);
+            }
+        },
 
-        if(this.getUploadingFiles().length !== 0) {
+        getButtonLabel() {
-            return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%';
+            let { filesToUpload, fileClassToUpload } = this.props;
-        } else {
-            return fileClassToUpload.singular;
-        }
-    },
 
-    getUploadedFileLabel() {
+            // filter invalid files that might have been deleted or canceled...
-        const uploadedFile = this.getUploadedFile();
+            filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter);
 
-        if(uploadedFile) {
+            if(this.getUploadingFiles().length !== 0) {
+                return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%';
+            } else {
+                return fileClassToUpload.singular;
+            }
+        },
+
+        getUploadedFileLabel() {
+            const uploadedFile = this.getUploadedFile();
+
+            if(uploadedFile) {
+                return (
+                    <span>
+                        <Glyphicon glyph="ok" />
+                        {' ' + truncateTextAtCharIndex(uploadedFile.name, 40)}
+                    </span>
+                );
+            } else {
+                return (
+                    <span>{getLangText('No file chosen')}</span>
+                );
+            }
+        },
+
+        render() {
+            let { multiple,
+                 allowedExtensions } = this.props;
+
+            /*
+             * We do not want a button that submits here.
+             * As UploadButton could be used in forms that want to be submitted independent
+             * of clicking the selector.
+             * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
+             */
             return (
-                <span>
+                <div className="upload-button-wrapper">
-                    <Glyphicon glyph="ok" />
+                    <a
-                    {' ' + truncateTextAtCharIndex(uploadedFile.name, 40)}
+                        onClick={this.handleOnClick}
-                </span>
+                        className={className}
-            );
+                        disabled={this.getUploadingFiles().length !== 0}>
-        } else {
+                        {this.getButtonLabel()}
-            return (
+                        <input
-                <span>{getLangText('No file chosen')}</span>
+                            multiple={multiple}
+                            ref="fileinput"
+                            type="file"
+                            style={{
+                                display: 'none',
+                                height: 0,
+                                width: 0
+                            }}
+                            onChange={this.handleDrop}
+                            accept={allowedExtensions}/>
+                   </a>
+                   {this.getUploadedFileLabel()}
+                </div>
             );
         }
-    },
+    });
-
+}
-    render() {
-        let { multiple,
-             allowedExtensions } = this.props;
-
-        /*
-         * We do not want a button that submits here.
-         * As UploadButton could be used in forms that want to be submitted independent
-         * of clicking the selector.
-         * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
-         */
-        return (
-            <div className="upload-button-wrapper">
-                <a
-                    onClick={this.handleOnClick}
-                    className="btn btn-default btn-sm margin-left-2px"
-                    disabled={this.getUploadingFiles().length !== 0}>
-                    {this.getButtonLabel()}
-                    <input
-                        multiple={multiple}
-                        ref="fileinput"
-                        type="file"
-                        style={{
-                            display: 'none',
-                            height: 0,
-                            width: 0
-                        }}
-                        onChange={this.handleDrop}
-                        accept={allowedExtensions}/>
-               </a>
-               {this.getUploadedFileLabel()}
-            </div>
-        );
-    }
-});
-
-export default UploadButton;

js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js

@@ -253,7 +253,7 @@ const PRRegisterPieceForm = React.createClass({
                         name="digitalWorkKey"
                         label={getLangText('Select the PDF with your work')}>
                         <InputFineuploader
-                            fileInputElement={UploadButton}
+                            fileInputElement={UploadButton()}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                             setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
                             createBlobRoutine={{
@@ -279,7 +279,7 @@ const PRRegisterPieceForm = React.createClass({
                         name="thumbnailKey"
                         label={getLangText('Featured Cover photo')}>
                         <InputFineuploader
-                            fileInputElement={UploadButton}
+                            fileInputElement={UploadButton()}
                             createBlobRoutine={{
                                 url: ApiUrls.blob_thumbnails
                             }}
@@ -305,7 +305,7 @@ const PRRegisterPieceForm = React.createClass({
                         name="supportingMaterials"
                         label={getLangText('Supporting Materials (Optional)')}>
                         <InputFineuploader
-                            fileInputElement={UploadButton}
+                            fileInputElement={UploadButton()}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                             setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
                             createBlobRoutine={this.getCreateBlobRoutine()}
@@ -327,7 +327,7 @@ const PRRegisterPieceForm = React.createClass({
                         name="proofOfPayment"
                         label={getLangText('Proof of payment')}>
                         <InputFineuploader
-                            fileInputElement={UploadButton}
+                            fileInputElement={UploadButton()}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                             setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')}
                             createBlobRoutine={this.getCreateBlobRoutine()}