ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +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() {
return (
<ReactS3FineUploader
fileInputElement={UploadButton}
fileInputElement={UploadButton()}
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
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';
let UploadButton = React.createClass({
propTypes: {
onDrop: React.PropTypes.func.isRequired,
filesToUpload: React.PropTypes.array,
multiple: React.PropTypes.bool,
export default function UploadButton(label) {
return React.createClass({
propTypes: {
onDrop: React.PropTypes.func.isRequired,
filesToUpload: React.PropTypes.array,
multiple: React.PropTypes.bool,
// For simplification purposes we're just going to use this prop as a
// label for the upload button
fileClassToUpload: React.PropTypes.shape({
singular: React.PropTypes.string,
plural: React.PropTypes.string
}),
// For simplification purposes we're just going to use this prop as a
// label for the upload button
fileClassToUpload: React.PropTypes.shape({
singular: React.PropTypes.string,
plural: React.PropTypes.string
}),
allowedExtensions: React.PropTypes.string
},
allowedExtensions: React.PropTypes.string
},
handleDrop(event) {
event.preventDefault();
event.stopPropagation();
let files = event.target.files;
handleDrop(event) {
event.preventDefault();
event.stopPropagation();
let files = event.target.files;
if(typeof this.props.onDrop === 'function' && files) {
this.props.onDrop(files);
}
if(typeof this.props.onDrop === 'function' && files) {
this.props.onDrop(files);
}
},
},
getUploadingFiles() {
return this.props.filesToUpload.filter((file) => file.status === 'uploading');
},
getUploadingFiles() {
return this.props.filesToUpload.filter((file) => file.status === 'uploading');
},
getUploadedFile() {
return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
},
getUploadedFile() {
return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
},
handleOnClick() {
let uploadingFiles = this.getUploadingFiles();
handleOnClick() {
let uploadingFiles = this.getUploadingFiles();
// We only want the button to be clickable if there are no files currently uploading
if(uploadingFiles.length === 0) {
// 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
var evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
// We only want the button to be clickable if there are no files currently uploading
if(uploadingFiles.length === 0) {
// 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
var evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
evt.stopPropagation();
this.refs.fileinput.getDOMNode().dispatchEvent(evt);
}
},
evt.stopPropagation();
this.refs.fileinput.getDOMNode().dispatchEvent(evt);
}
},
getButtonLabel() {
const uploadedFile = this.getUploadedFile();
let { filesToUpload, fileClassToUpload } = this.props;
getButtonLabel() {
const uploadedFile = this.getUploadedFile();
let { filesToUpload, fileClassToUpload } = this.props;
// filter invalid files that might have been deleted or canceled...
filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter);
// 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
// display the progress or the successfully uploaded file's name
if(uploadedFile) {
// Depending on whether there is an upload going on or not we
// display the progress or the successfully uploaded file's name
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 (
<span>
<Glyphicon glyph="ok" />
{' ' + truncateTextAtCharIndex(uploadedFile.name, 20)}
</span>
<div className="upload-button-wrapper">
<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>
{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() {
if(!this.validateForms()) {
return;
} else {
this.setState({
digitalWorkKeyReady: false,
thumbnailKeyReady: false,
supportingMaterialsReady: false,
proofOfPaymentReady: false
});
}
const { currentUser } = this.props;
@ -219,10 +226,9 @@ const PRRegisterPieceForm = React.createClass({
className="ascribe-form-bordered"
ref="uploadersForm">
<Property
name="digitalWorkKey"
className="input-upload-file-button-property">
name="digitalWorkKey">
<InputFineuploader
fileInputElement={UploadButton}
fileInputElement={UploadButton(<span>{getLangText('Select the PDF with your work')}</span>)}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
createBlobRoutine={{
@ -243,13 +249,11 @@ const PRRegisterPieceForm = React.createClass({
plural: getLangText('Upload the Portfolios')
}}
required/>
<span>{getLangText('Select the PDF with your work')}</span>
</Property>
<Property
name="thumbnailKey"
className="input-upload-file-button-property">
name="thumbnailKey">
<InputFineuploader
fileInputElement={UploadButton}
fileInputElement={UploadButton(<span>{getLangText('Featured Cover photo')}</span>)}
createBlobRoutine={{
url: ApiUrls.blob_thumbnails
}}
@ -270,13 +274,11 @@ const PRRegisterPieceForm = React.createClass({
plural: getLangText('Upload cover photos')
}}
required/>
<span>{getLangText('Featured Cover photo')}</span>
</Property>
<Property
name="supportingMaterials"
className="input-upload-file-button-property">
name="supportingMaterials">
<InputFineuploader
fileInputElement={UploadButton}
fileInputElement={UploadButton(<span>{getLangText('Supporting Materials (Optional)')}</span>)}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
createBlobRoutine={this.getCreateBlobRoutine()}
@ -293,13 +295,11 @@ const PRRegisterPieceForm = React.createClass({
singular: getLangText('Upload supporting material'),
plural: getLangText('Upload supporting materials')
}}/>
<span>{getLangText('Supporting Materials (Optional)')}</span>
</Property>
<Property
name="proofOfPayment"
className="input-upload-file-button-property">
name="proofOfPayment">
<InputFineuploader
fileInputElement={UploadButton}
fileInputElement={UploadButton(<span>{getLangText('Proof of payment')}</span>)}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')}
createBlobRoutine={this.getCreateBlobRoutine()}
@ -318,7 +318,6 @@ const PRRegisterPieceForm = React.createClass({
plural: getLangText('Upload Screenshots')
}}
required/>
<span>{getLangText('Proof of payment')}</span>
</Property>
</Form>
<Form

13
sass/ascribe_property.scss
View File

@ -226,16 +226,3 @@ $ascribe-red-error: rgb(169, 68, 66);
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;
}
.upload-button-wrapper {
text-align: left;
.btn {
font-size: 1em;
margin-right: 1em;
}
span + .btn {
margin-left: 1em;
}
}