ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
Code Issues Releases Wiki Activity

Add labeling functionality to UploadButton

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-11-12 13:08:23 +01:00
parent b6773549ee
commit 1a67cd66f5
5 changed files with 127 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_settings/contract_settings_update_button.js
View File

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

195
js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
View File

@ -9,115 +9,118 @@ import { getLangText } from '../../../utils/lang_utils';
import { truncateTextAtCharIndex } from '../../../utils/general_utils'; import { truncateTextAtCharIndex } from '../../../utils/general_utils';
let UploadButton = React.createClass({ export default function UploadButton(label) {
propTypes: { return React.createClass({
onDrop: React.PropTypes.func.isRequired, propTypes: {
filesToUpload: React.PropTypes.array, onDrop: React.PropTypes.func.isRequired,
multiple: React.PropTypes.bool, filesToUpload: React.PropTypes.array,
multiple: React.PropTypes.bool,
// For simplification purposes we're just going to use this prop as a // For simplification purposes we're just going to use this prop as a
// label for the upload button // label for the upload button
fileClassToUpload: React.PropTypes.shape({ fileClassToUpload: React.PropTypes.shape({
singular: React.PropTypes.string, singular: React.PropTypes.string,
plural: React.PropTypes.string plural: React.PropTypes.string
}), }),
allowedExtensions: React.PropTypes.string allowedExtensions: React.PropTypes.string
}, },
handleDrop(event) { handleDrop(event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
let files = event.target.files; let files = event.target.files;
if(typeof this.props.onDrop === 'function' && files) { if(typeof this.props.onDrop === 'function' && files) {
this.props.onDrop(files); this.props.onDrop(files);
} }
}, },
getUploadingFiles() { getUploadingFiles() {
return this.props.filesToUpload.filter((file) => file.status === 'uploading'); return this.props.filesToUpload.filter((file) => file.status === 'uploading');
}, },
getUploadedFile() { getUploadedFile() {
return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0]; return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
}, },
handleOnClick() { handleOnClick() {
let uploadingFiles = this.getUploadingFiles(); let uploadingFiles = this.getUploadingFiles();
// We only want the button to be clickable if there are no files currently uploading // We only want the button to be clickable if there are no files currently uploading
if(uploadingFiles.length === 0) { if(uploadingFiles.length === 0) {
// Firefox only recognizes the simulated mouse click if bubbles is set to true, // 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 // but since Google Chrome propagates the event much further than needed, we
// need to stop propagation as soon as the event is created // need to stop propagation as soon as the event is created
var evt = new MouseEvent('click', { var evt = new MouseEvent('click', {
view: window, view: window,
bubbles: true, bubbles: true,
cancelable: true cancelable: true
}); });
evt.stopPropagation(); evt.stopPropagation();
this.refs.fileinput.getDOMNode().dispatchEvent(evt); this.refs.fileinput.getDOMNode().dispatchEvent(evt);
} }
}, },
getButtonLabel() { getButtonLabel() {
const uploadedFile = this.getUploadedFile(); const uploadedFile = this.getUploadedFile();
let { filesToUpload, fileClassToUpload } = this.props; let { filesToUpload, fileClassToUpload } = this.props;
// filter invalid files that might have been deleted or canceled... // filter invalid files that might have been deleted or canceled...
filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter); filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter);
// Depending on whether there is an upload going on or not we // Depending on whether there is an upload going on or not we
// display the progress or the successfully uploaded file's name // display the progress or the successfully uploaded file's name
if(uploadedFile) { if(uploadedFile) {
return (
<span>
<Glyphicon glyph="ok" />
{' ' + truncateTextAtCharIndex(uploadedFile.name, 20)}
</span>
);
} else if(filesToUpload.length > 0) {
return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%';
} else {
return fileClassToUpload.singular;
}
},
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 ( return (
<span> <div className="upload-button-wrapper">
<Glyphicon glyph="ok" /> <a
{' ' + truncateTextAtCharIndex(uploadedFile.name, 20)} onClick={this.handleOnClick}
</span> className="btn btn-default btn-sm margin-left-2px"
disabled={this.getUploadingFiles().length !== 0 || !!this.getUploadedFile()}>
{this.getButtonLabel()}
<input
multiple={multiple}
ref="fileinput"
type="file"
style={{
display: 'none',
height: 0,
width: 0
}}
onChange={this.handleDrop}
accept={allowedExtensions}/>
</a>
{label}
</div>
); );
} else if(filesToUpload.length > 0) {
return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%';
} else {
return fileClassToUpload.singular;
} }
}, });
}
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 (
<a
onClick={this.handleOnClick}
className="btn btn-default btn-sm margin-left-2px"
disabled={this.getUploadingFiles().length !== 0 || !!this.getUploadedFile()}>
{this.getButtonLabel()}
<input
multiple={multiple}
ref="fileinput"
type="file"
style={{
display: 'none',
height: 0,
width: 0
}}
onChange={this.handleDrop}
accept={allowedExtensions}/>
</a>
);
}
});
export default UploadButton;

31
js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
View File

@ -54,6 +54,13 @@ const PRRegisterPieceForm = React.createClass({
submit() { submit() {
if(!this.validateForms()) { if(!this.validateForms()) {
return; return;
} else {
this.setState({
digitalWorkKeyReady: false,
thumbnailKeyReady: false,
supportingMaterialsReady: false,
proofOfPaymentReady: false
});
} }
const { currentUser } = this.props; const { currentUser } = this.props;
@ -219,10 +226,9 @@ const PRRegisterPieceForm = React.createClass({
className="ascribe-form-bordered" className="ascribe-form-bordered"
ref="uploadersForm"> ref="uploadersForm">
<Property <Property
name="digitalWorkKey" name="digitalWorkKey">
className="input-upload-file-button-property">
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton(<span>{getLangText('Select the PDF with your work')}</span>)}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')} setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
createBlobRoutine={{ createBlobRoutine={{
@ -243,13 +249,11 @@ const PRRegisterPieceForm = React.createClass({
plural: getLangText('Upload the Portfolios') plural: getLangText('Upload the Portfolios')
}} }}
required/> required/>
<span>{getLangText('Select the PDF with your work')}</span>
</Property> </Property>
<Property <Property
name="thumbnailKey" name="thumbnailKey">
className="input-upload-file-button-property">
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton(<span>{getLangText('Featured Cover photo')}</span>)}
createBlobRoutine={{ createBlobRoutine={{
url: ApiUrls.blob_thumbnails url: ApiUrls.blob_thumbnails
}} }}
@ -270,13 +274,11 @@ const PRRegisterPieceForm = React.createClass({
plural: getLangText('Upload cover photos') plural: getLangText('Upload cover photos')
}} }}
required/> required/>
<span>{getLangText('Featured Cover photo')}</span>
</Property> </Property>
<Property <Property
name="supportingMaterials" name="supportingMaterials">
className="input-upload-file-button-property">
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton(<span>{getLangText('Supporting Materials (Optional)')}</span>)}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')} setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
@ -293,13 +295,11 @@ const PRRegisterPieceForm = React.createClass({
singular: getLangText('Upload supporting material'), singular: getLangText('Upload supporting material'),
plural: getLangText('Upload supporting materials') plural: getLangText('Upload supporting materials')
}}/> }}/>
<span>{getLangText('Supporting Materials (Optional)')}</span>
</Property> </Property>
<Property <Property
name="proofOfPayment" name="proofOfPayment">
className="input-upload-file-button-property">
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton(<span>{getLangText('Proof of payment')}</span>)}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')} setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')}
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
@ -318,7 +318,6 @@ const PRRegisterPieceForm = React.createClass({
plural: getLangText('Upload Screenshots') plural: getLangText('Upload Screenshots')
}} }}
required/> required/>
<span>{getLangText('Proof of payment')}</span>
</Property> </Property>
</Form> </Form>
<Form <Form

13
sass/ascribe_property.scss
View File

@ -226,16 +226,3 @@ $ascribe-red-error: rgb(169, 68, 66);
margin-top: 0; margin-top: 0;
} }
} }
.input-upload-file-button-property {
text-align: left;
.btn {
font-size: 1em;
margin-right: 1em;
}
span + .btn {
margin-left: 1em;
}
}

12
sass/ascribe_uploader.scss
View File

@ -177,3 +177,15 @@
height: 12px; height: 12px;
} }
.upload-button-wrapper {
text-align: left;
.btn {
font-size: 1em;
margin-right: 1em;
}
span + .btn {
margin-left: 1em;
}
}