2015-09-15 16:35:45 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
|
2015-09-16 09:47:22 +02:00
|
|
|
import { getLangText } from '../../../utils/lang_utils';
|
2015-11-09 16:58:35 +01:00
|
|
|
import { truncateTextAtCharIndex } from '../../../utils/general_utils';
|
2015-09-16 09:47:22 +02:00
|
|
|
|
2015-11-12 14:18:08 +01:00
|
|
|
const { func, array, bool, shape, string } = React.PropTypes;
|
2015-09-15 16:35:45 +02:00
|
|
|
|
2015-11-12 14:18:08 +01:00
|
|
|
|
2015-11-17 11:22:24 +01:00
|
|
|
export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) {
|
|
|
|
return React.createClass({
|
|
|
|
displayName: 'UploadButton',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
onDrop: func.isRequired,
|
|
|
|
filesToUpload: array,
|
|
|
|
multiple: bool,
|
|
|
|
|
|
|
|
// For simplification purposes we're just going to use this prop as a
|
|
|
|
// label for the upload button
|
|
|
|
fileClassToUpload: shape({
|
|
|
|
singular: string,
|
|
|
|
plural: string
|
|
|
|
}),
|
|
|
|
|
|
|
|
allowedExtensions: string,
|
|
|
|
|
2015-11-23 12:31:53 +01:00
|
|
|
// provided by ReactS3FineUploader
|
|
|
|
handleCancelFile: func,
|
|
|
|
handleDeleteFile: func
|
2015-11-17 11:22:24 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
handleDrop(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
let files = event.target.files;
|
|
|
|
|
|
|
|
if(typeof this.props.onDrop === 'function' && files) {
|
2015-11-19 17:36:47 +01:00
|
|
|
this.props.onDrop(files);
|
2015-11-17 11:22:24 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
getUploadingFiles() {
|
|
|
|
return this.props.filesToUpload.filter((file) => file.status === 'uploading');
|
|
|
|
},
|
|
|
|
|
|
|
|
getUploadedFile() {
|
|
|
|
return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
|
|
|
|
},
|
|
|
|
|
2015-11-25 10:54:29 +01:00
|
|
|
clearSelection() {
|
|
|
|
this.refs.fileSelector.getDOMNode().value = '';
|
|
|
|
},
|
|
|
|
|
2015-11-17 11:22:24 +01:00
|
|
|
handleOnClick() {
|
2015-11-25 10:54:29 +01:00
|
|
|
let evt;
|
|
|
|
const uploadingFile = this.getUploadingFiles();
|
2015-11-17 11:22:24 +01:00
|
|
|
const uploadedFile = this.getUploadedFile();
|
|
|
|
|
|
|
|
|
2015-11-25 10:54:29 +01:00
|
|
|
if(uploadingFile.length) {
|
|
|
|
this.clearSelection();
|
|
|
|
this.props.handleCancelFile(uploadingFile[0].id);
|
|
|
|
} else if(uploadedFile) {
|
|
|
|
this.props.handleDeleteFile(uploadedFile.id);
|
|
|
|
}
|
|
|
|
try {
|
|
|
|
evt = new MouseEvent('click', {
|
2015-11-17 11:22:24 +01:00
|
|
|
view: window,
|
|
|
|
bubbles: true,
|
|
|
|
cancelable: true
|
|
|
|
});
|
2015-11-25 10:54:29 +01:00
|
|
|
} catch(e) {
|
|
|
|
// For browsers that do not support the new MouseEvent syntax
|
|
|
|
evt = document.createEvent('MouseEvents');
|
|
|
|
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
|
2015-11-17 11:22:24 +01:00
|
|
|
}
|
2015-11-25 10:54:29 +01:00
|
|
|
evt.stopPropagation();
|
|
|
|
this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
|
2015-11-17 11:22:24 +01:00
|
|
|
},
|
|
|
|
|
2015-11-23 12:31:53 +01:00
|
|
|
onClickRemove() {
|
|
|
|
const uploadedFile = this.getUploadedFile();
|
|
|
|
this.props.handleDeleteFile(uploadedFile.id);
|
|
|
|
},
|
|
|
|
|
2015-11-17 11:22:24 +01:00
|
|
|
getButtonLabel() {
|
|
|
|
let { filesToUpload, fileClassToUpload } = this.props;
|
|
|
|
|
|
|
|
// filter invalid files that might have been deleted or canceled...
|
|
|
|
filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter);
|
|
|
|
|
|
|
|
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>
|
2015-11-20 17:59:26 +01:00
|
|
|
<span className='ascribe-icon icon-ascribe-ok'/>
|
2015-11-23 12:31:53 +01:00
|
|
|
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
|
|
|
|
[<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
|
2015-11-17 11:22:24 +01:00
|
|
|
</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`
|
|
|
|
*/
|
2015-11-09 16:58:35 +01:00
|
|
|
return (
|
2015-11-17 11:22:24 +01:00
|
|
|
<div className="upload-button-wrapper">
|
|
|
|
<a
|
|
|
|
onClick={this.handleOnClick}
|
|
|
|
className={className}
|
|
|
|
disabled={this.getUploadingFiles().length !== 0}>
|
|
|
|
{this.getButtonLabel()}
|
|
|
|
<input
|
|
|
|
multiple={multiple}
|
2015-11-25 10:54:29 +01:00
|
|
|
ref="fileSelector"
|
2015-11-17 11:22:24 +01:00
|
|
|
type="file"
|
|
|
|
style={{
|
|
|
|
display: 'none',
|
|
|
|
height: 0,
|
|
|
|
width: 0
|
|
|
|
}}
|
|
|
|
onChange={this.handleDrop}
|
|
|
|
accept={allowedExtensions}/>
|
|
|
|
</a>
|
|
|
|
{this.getUploadedFileLabel()}
|
|
|
|
</div>
|
2015-11-09 16:58:35 +01:00
|
|
|
);
|
2015-09-15 16:35:45 +02:00
|
|
|
}
|
2015-11-17 11:22:24 +01:00
|
|
|
});
|
|
|
|
}
|