From dbb84716de7b554a8befacff6f4978dccd9c6311 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87a=C4=9Fatay=20=C3=87ivici?= Date: Sat, 9 Sep 2017 13:38:44 +0300 Subject: [PATCH] Basic mode for FileUpload and refactor --- src/components/fileupload/FileUpload.css | 5 +- src/components/fileupload/FileUpload.js | 184 +++++++++++++++------- src/showcase/fileupload/FileUploadDemo.js | 37 ++++- 3 files changed, 164 insertions(+), 62 deletions(-) diff --git a/src/components/fileupload/FileUpload.css b/src/components/fileupload/FileUpload.css index 11b4ac301e..fa349a1033 100644 --- a/src/components/fileupload/FileUpload.css +++ b/src/components/fileupload/FileUpload.css @@ -90,7 +90,4 @@ .ui-fluid .ui-fileupload-content .ui-button-icon-only { width: 2em; -} - - - +} \ No newline at end of file diff --git a/src/components/fileupload/FileUpload.js b/src/components/fileupload/FileUpload.js index e85f4a6f9d..f51bad58c7 100644 --- a/src/components/fileupload/FileUpload.js +++ b/src/components/fileupload/FileUpload.js @@ -12,6 +12,7 @@ export class FileUpload extends Component { id: null, name: null, url: null, + mode: 'advanced', multiple: false, accept: null, disabled: false, @@ -21,6 +22,7 @@ export class FileUpload extends Component { invalidFileSizeMessageDetail: 'maximum upload size is {0}.', style: null, className: null, + widthCredentials: false, previewWidth: 50, chooseLabel: 'Choose', uploadLabel: 'Upload', @@ -30,13 +32,15 @@ export class FileUpload extends Component { onUpload: null, onError: null, onClear: null, - onSelect: null + onSelect: null, + onProgress: null } static propTypes = { id: PropTypes.string, name: PropTypes.string, url: PropTypes.string, + mode: PropTypes.string, multiple: PropTypes.bool, accept: PropTypes.string, disabled: PropTypes.bool, @@ -46,6 +50,7 @@ export class FileUpload extends Component { invalidFileSizeMessageDetail: PropTypes.string, style: PropTypes.object, className: PropTypes.string, + widthCredentials: PropTypes.bool, previewWidth: PropTypes.number, chooseLabel: PropTypes.string, uploadLabel: PropTypes.string, @@ -55,12 +60,17 @@ export class FileUpload extends Component { onUpload: PropTypes.func, onError: PropTypes.func, onClear: PropTypes.func, - onSelect: PropTypes.func + onSelect: PropTypes.func, + onProgress: PropTypes.func }; constructor(props) { super(props); - this.state = {files:[], msgs: []}; + this.state = { + files:[], + msgs: [] + }; + this.upload = this.upload.bind(this); this.clear = this.clear.bind(this); this.onFileSelect = this.onFileSelect.bind(this); @@ -68,6 +78,9 @@ export class FileUpload extends Component { this.onDragOver = this.onDragOver.bind(this); this.onDragLeave = this.onDragLeave.bind(this); this.onDrop = this.onDrop.bind(this); + this.onFocus = this.onFocus.bind(this); + this.onBlur = this.onBlur.bind(this); + this.onSimpleUploaderClick = this.onSimpleUploaderClick.bind(this); } hasFiles() { @@ -79,10 +92,15 @@ export class FileUpload extends Component { } remove(index) { - var currentFiles = [...this.state.files]; + this.clearInputElement(); + let currentFiles = [...this.state.files]; currentFiles.splice(index, 1); this.setState({files: currentFiles}); } + + clearInputElement() { + this.fileInput.value = ''; + } formatSize(bytes) { if(bytes === 0) { @@ -98,9 +116,9 @@ export class FileUpload extends Component { onFileSelect(event) { this.setState({msgs:[]}); - var selectedFiles = event.dataTransfer ? event.dataTransfer.files : event.target.files; - for(let i = 0; i < selectedFiles.length; i++) { - let file = selectedFiles[i]; + let files = event.dataTransfer ? event.dataTransfer.files : event.target.files; + + for(let file of files) { if(this.validate(file)) { if(this.isImage(file)) { file.objectURL = window.URL.createObjectURL(file); @@ -109,7 +127,7 @@ export class FileUpload extends Component { this.setState({files: [...this.state.files, file]}); } } - + if(this.props.onSelect) { this.props.onSelect({originalEvent: event, files: this.state.files}); } @@ -117,6 +135,12 @@ export class FileUpload extends Component { if(this.hasFiles() && this.props.auto) { this.upload(); } + + this.clearInputElement(); + + if(this.props.mode === 'basic') { + this.fileInput.style.display = 'none'; + } } validate(file) { @@ -136,8 +160,8 @@ export class FileUpload extends Component { upload() { this.setState({msgs:[]}); - var xhr = new XMLHttpRequest(); - var formData = new FormData(); + let xhr = new XMLHttpRequest(); + let formData = new FormData(); if(this.props.onBeforeUpload) { this.props.onBeforeUpload({ @@ -146,27 +170,36 @@ export class FileUpload extends Component { }); } - for(var file of this.state.files) { + for(let file of this.state.files) { formData.append(this.props.name, file, file.name); } xhr.upload.addEventListener('progress', (event) => { if(event.lengthComputable) { - this.setState({progress: Math.round((event.loaded * 100) / event.total)}); + this.setState({progress: Math.round((event.loaded * 100) / event.total)}); } - }, false); + + if(this.props.onProgress) { + this.props.onProgress({ + originalEvent: event, + progress: this.progress + }); + }; + }); xhr.onreadystatechange = () => { if(xhr.readyState === 4) { this.setState({progress: 0}); if(xhr.status >= 200 && xhr.status < 300) { - if(this.props.onUpload) + if(this.props.onUpload) { this.props.onUpload({xhr: xhr, files: this.files}); + } } else { - if(this.props.onError) - this.props.onError.emit({xhr: xhr, files: this.files}); + if(this.props.onError) { + this.props.onError({xhr: xhr, files: this.files}); + } } this.clear(); @@ -182,15 +215,25 @@ export class FileUpload extends Component { }); } + xhr.withCredentials = this.props.withCredentials; + xhr.send(formData); } clear() { this.setState({files:[]}); - if(this.props.onClear) { this.props.onClear(); } + this.clearInputElement(); + } + + onFocus(event) { + DomHandler.addClass(event.currentTarget.parentElement, 'ui-state-focus'); + } + + onBlur(event) { + DomHandler.removeClass(event.currentTarget.parentElement, 'ui-state-focus'); } onDragEnter(event) { @@ -220,58 +263,93 @@ export class FileUpload extends Component { event.stopPropagation(); event.preventDefault(); - this.onFileSelect(event); + let files = event.dataTransfer ? event.dataTransfer.files : event.target.files; + let allowDrop = this.props.multiple||(files && files.length === 1); + + if(allowDrop) { + this.onFileSelect(event); + } } } - - render() { - var className = classNames('ui-fileupload ui-widget', this.props.className); - var chooseButton = ; - - if(!this.props.auto) { - var uploadButton =