Refactor UploadButton to resemble HTML5 file chooser input

js/components/ascribe_settings/contract_settings_update_button.js

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

@@ -8,22 +8,24 @@ import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils
 import { getLangText } from '../../../utils/lang_utils';
 import { truncateTextAtCharIndex } from '../../../utils/general_utils';
 
+const { func, array, bool, shape, string } = React.PropTypes;
 
-export default function UploadButton(label) {
+let UploadButton = React.createClass({
-    return React.createClass({
     propTypes: {
-            onDrop: React.PropTypes.func.isRequired,
+        onDrop: func.isRequired,
-            filesToUpload: React.PropTypes.array,
+        filesToUpload: array,
-            multiple: React.PropTypes.bool,
+        multiple: bool,
 
         // For simplification purposes we're just going to use this prop as a
         // label for the upload button
-            fileClassToUpload: React.PropTypes.shape({
+        fileClassToUpload: shape({
-                singular: React.PropTypes.string,
+            singular: string,
-                plural: React.PropTypes.string
+            plural: string
         }),
 
-            allowedExtensions: React.PropTypes.string
+        allowedExtensions: string,
+
+        handleCancelFile: func // provided by ReactS3FineUploader
     },
 
     handleDrop(event) {
@@ -46,10 +48,15 @@ export default function UploadButton(label) {
     },
 
     handleOnClick() {
-            let uploadingFiles = this.getUploadingFiles();
+        const uploadingFiles = this.getUploadingFiles();
+        const uploadedFile = this.getUploadedFile();
 
-            // We only want the button to be clickable if there are no files currently uploading
+        if(uploadedFile) {
+            this.props.handleCancelFile(uploadedFile.id);
+        }
         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,
             // but since Google Chrome propagates the event much further than needed, we
             // need to stop propagation as soon as the event is created
@@ -65,14 +72,21 @@ export default function UploadButton(label) {
     },
 
     getButtonLabel() {
-            const uploadedFile = this.getUploadedFile();
         let { filesToUpload, fileClassToUpload } = this.props;
 
         // filter invalid files that might have been deleted or canceled...
         filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter);
 
-            // Depending on whether there is an upload going on or not we
+        if(this.getUploadingFiles().length !== 0) {
-            // display the progress or the successfully uploaded file's name
+            return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%';
+        } else {
+            return fileClassToUpload.singular;
+        }
+    },
+
+    getUploadedFileLabel() {
+        const uploadedFile = this.getUploadedFile();
+
         if(uploadedFile) {
             return (
                 <span>
@@ -80,18 +94,16 @@ export default function UploadButton(label) {
                     {' ' + truncateTextAtCharIndex(uploadedFile.name, 20)}
                 </span>
             );
-            } else if(filesToUpload.length > 0) {
-                return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%';
         } else {
-                return fileClassToUpload.singular;
+            return (
+                <span>{getLangText('No file chosen')}</span>
+            );
         }
     },
 
     render() {
-            let {
+        let { multiple,
-                 multiple,
+             allowedExtensions } = this.props;
-                 allowedExtensions
-            } = this.props;
 
         /*
          * We do not want a button that submits here.
@@ -104,7 +116,7 @@ export default function UploadButton(label) {
                 <a
                     onClick={this.handleOnClick}
                     className="btn btn-default btn-sm margin-left-2px"
-                        disabled={this.getUploadingFiles().length !== 0 || !!this.getUploadedFile()}>
+                    disabled={this.getUploadingFiles().length !== 0}>
                     {this.getButtonLabel()}
                     <input
                         multiple={multiple}
@@ -118,9 +130,10 @@ export default function UploadButton(label) {
                         onChange={this.handleDrop}
                         accept={allowedExtensions}/>
                </a>
-                   {label}
+               {this.getUploadedFileLabel()}
             </div>
         );
     }
 });
-}
+
+export default UploadButton;

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

@@ -249,9 +249,10 @@ const PRRegisterPieceForm = React.createClass({
                     className="ascribe-form-bordered"
                     ref="uploadersForm">
                     <Property
-                        name="digitalWorkKey">
+                        name="digitalWorkKey"
+                        label={getLangText('Select the PDF with your work')}>
                         <InputFineuploader
-                            fileInputElement={UploadButton(<span>{getLangText('Select the PDF with your work')}</span>)}
+                            fileInputElement={UploadButton}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                             setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
                             createBlobRoutine={{
@@ -268,15 +269,16 @@ const PRRegisterPieceForm = React.createClass({
                             }}
                             location={location}
                             fileClassToUpload={{
-                                singular: getLangText('Upload the Portfolio'),
+                                singular: getLangText('Select the Portfolio'),
-                                plural: getLangText('Upload the Portfolios')
+                                plural: getLangText('Select the Portfolios')
                             }}
                             required/>
                     </Property>
                     <Property
-                        name="thumbnailKey">
+                        name="thumbnailKey"
+                        label={getLangText('Featured Cover photo')}>
                         <InputFineuploader
-                            fileInputElement={UploadButton(<span>{getLangText('Featured Cover photo')}</span>)}
+                            fileInputElement={UploadButton}
                             createBlobRoutine={{
                                 url: ApiUrls.blob_thumbnails
                             }}
@@ -293,15 +295,16 @@ const PRRegisterPieceForm = React.createClass({
                             }}
                             location={location}
                             fileClassToUpload={{
-                                singular: getLangText('Upload cover photo'),
+                                singular: getLangText('Select cover photo'),
-                                plural: getLangText('Upload cover photos')
+                                plural: getLangText('Select cover photos')
                             }}
                             required/>
                     </Property>
                     <Property
-                        name="supportingMaterials">
+                        name="supportingMaterials"
+                        label={getLangText('Supporting Materials (Optional)')}>
                         <InputFineuploader
-                            fileInputElement={UploadButton(<span>{getLangText('Supporting Materials (Optional)')}</span>)}
+                            fileInputElement={UploadButton}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                             setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
                             createBlobRoutine={this.getCreateBlobRoutine()}
@@ -315,14 +318,15 @@ const PRRegisterPieceForm = React.createClass({
                             }}
                             location={location}
                             fileClassToUpload={{
-                                singular: getLangText('Upload supporting material'),
+                                singular: getLangText('Select supporting material'),
-                                plural: getLangText('Upload supporting materials')
+                                plural: getLangText('Select supporting materials')
                             }}/>
                     </Property>
                     <Property
-                        name="proofOfPayment">
+                        name="proofOfPayment"
+                        label={getLangText('Proof of payment')}>
                         <InputFineuploader
-                            fileInputElement={UploadButton(<span>{getLangText('Proof of payment')}</span>)}
+                            fileInputElement={UploadButton}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                             setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')}
                             createBlobRoutine={this.getCreateBlobRoutine()}
@@ -337,8 +341,8 @@ const PRRegisterPieceForm = React.createClass({
                             }}
                             location={location}
                             fileClassToUpload={{
-                                singular: getLangText('Upload Screenshot'),
+                                singular: getLangText('Select Screenshot'),
-                                plural: getLangText('Upload Screenshots')
+                                plural: getLangText('Select Screenshots')
                             }}
                             required/>
                     </Property>