diff options
Diffstat (limited to 'web/react/components/file_upload.jsx')
-rw-r--r-- | web/react/components/file_upload.jsx | 92 |
1 files changed, 61 insertions, 31 deletions
diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 9316ca9a5..fef253c52 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -1,10 +1,10 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import * as client from '../utils/client.jsx'; +import * as Client from '../utils/client.jsx'; import Constants from '../utils/constants.jsx'; import ChannelStore from '../stores/channel_store.jsx'; -import * as utils from '../utils/utils.jsx'; +import * as Utils from '../utils/utils.jsx'; export default class FileUpload extends React.Component { constructor(props) { @@ -26,7 +26,7 @@ export default class FileUpload extends React.Component { for (var j = 0; j < data.client_ids.length; j++) { delete requests[data.client_ids[j]]; } - this.setState({requests: requests}); + this.setState({requests}); } fileUploadFail(clientId, err) { @@ -52,7 +52,7 @@ export default class FileUpload extends React.Component { } // generate a unique id that can be used by other components to refer back to this upload - let clientId = utils.generateId(); + const clientId = Utils.generateId(); // prepare data to be uploaded var formData = new FormData(); @@ -60,14 +60,14 @@ export default class FileUpload extends React.Component { formData.append('files', files[i], files[i].name); formData.append('client_ids', clientId); - var request = client.uploadFile(formData, + var request = Client.uploadFile(formData, this.fileUploadSuccess.bind(this, channelId), this.fileUploadFail.bind(this, clientId) ); var requests = this.state.requests; requests[clientId] = request; - this.setState({requests: requests}); + this.setState({requests}); this.props.onUploadStart([clientId], channelId); @@ -90,16 +90,7 @@ export default class FileUpload extends React.Component { this.uploadFiles(element.prop('files')); - // clear file input for all modern browsers - try { - element[0].value = ''; - if (element.value) { - element[0].type = 'text'; - element[0].type = 'file'; - } - } catch (e) { - // Do nothing - } + Utils.clearFileInput(element[0]); } handleDrop(e) { @@ -109,8 +100,6 @@ export default class FileUpload extends React.Component { if (typeof files !== 'string' && files.length) { this.uploadFiles(files); - } else { - this.props.onTextDrop(e.originalEvent.dataTransfer.getData('Text')); } } @@ -120,11 +109,19 @@ export default class FileUpload extends React.Component { if (this.props.postType === 'post') { $('.row.main').dragster({ - enter() { - $('.center-file-overlay').removeClass('hidden'); + enter(dragsterEvent, e) { + var files = e.originalEvent.dataTransfer; + + if (Utils.isFileTransfer(files)) { + $('.center-file-overlay').removeClass('hidden'); + } }, - leave() { - $('.center-file-overlay').addClass('hidden'); + leave(dragsterEvent, e) { + var files = e.originalEvent.dataTransfer; + + if (Utils.isFileTransfer(files)) { + $('.center-file-overlay').addClass('hidden'); + } }, drop(dragsterEvent, e) { $('.center-file-overlay').addClass('hidden'); @@ -133,11 +130,19 @@ export default class FileUpload extends React.Component { }); } else if (this.props.postType === 'comment') { $('.post-right__container').dragster({ - enter() { - $('.right-file-overlay').removeClass('hidden'); + enter(dragsterEvent, e) { + var files = e.originalEvent.dataTransfer; + + if (Utils.isFileTransfer(files)) { + $('.right-file-overlay').removeClass('hidden'); + } }, - leave() { - $('.right-file-overlay').addClass('hidden'); + leave(dragsterEvent, e) { + var files = e.originalEvent.dataTransfer; + + if (Utils.isFileTransfer(files)) { + $('.right-file-overlay').addClass('hidden'); + } }, drop(dragsterEvent, e) { $('.right-file-overlay').addClass('hidden'); @@ -191,7 +196,7 @@ export default class FileUpload extends React.Component { var channelId = self.props.channelId || ChannelStore.getCurrentId(); // generate a unique id that can be used by other components to refer back to this file upload - var clientId = utils.generateId(); + var clientId = Utils.generateId(); var formData = new FormData(); formData.append('channel_id', channelId); @@ -213,14 +218,14 @@ export default class FileUpload extends React.Component { formData.append('files', file, name); formData.append('client_ids', clientId); - var request = client.uploadFile(formData, + var request = Client.uploadFile(formData, self.fileUploadSuccess.bind(self, channelId), self.fileUploadFail.bind(self, clientId) ); var requests = self.state.requests; requests[clientId] = request; - self.setState({requests: requests}); + self.setState({requests}); self.props.onUploadStart([clientId], channelId); } @@ -229,6 +234,18 @@ export default class FileUpload extends React.Component { }); } + componentWillUnmount() { + let target; + if (this.props.postType === 'post') { + target = $('.row.main'); + } else { + target = $('.post-right__container'); + } + + // jquery-dragster doesn't provide a function to unregister itself so do it manually + target.off('dragenter dragleave dragover drop dragster:enter dragster:leave dragster:over dragster:drop'); + } + cancelUpload(clientId) { var requests = this.state.requests; var request = requests[clientId]; @@ -237,11 +254,23 @@ export default class FileUpload extends React.Component { request.abort(); delete requests[clientId]; - this.setState({requests: requests}); + this.setState({requests}); } } render() { + let multiple = true; + if (Utils.isMobileApp()) { + // iOS WebViews don't upload videos properly in multiple mode + multiple = false; + } + + let accept = ''; + if (Utils.isIosChrome()) { + // iOS Chrome can't upload videos at all + accept = 'image/*'; + } + return ( <span ref='input' @@ -254,7 +283,8 @@ export default class FileUpload extends React.Component { ref='fileInput' type='file' onChange={this.handleChange} - multiple='true' + multiple={multiple} + accept={accept} /> </span> ); |