diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/create_post.jsx | 22 | ||||
-rw-r--r-- | web/react/components/file_preview.jsx | 3 | ||||
-rw-r--r-- | web/react/components/file_upload.jsx | 37 | ||||
-rw-r--r-- | web/react/utils/client.jsx | 10 |
4 files changed, 62 insertions, 10 deletions
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 09d7acd9c..b32b53749 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -180,12 +180,21 @@ module.exports = React.createClass({ }, removePreview: function(filename) { var previews = this.state.previews; - for (var i = 0; i < previews.length; i++) { - if (previews[i] === filename) { - previews.splice(i, 1); - break; + var uploadsInProgress = this.state.uploadsInProgress; + + // this can be either an uploaded file or an in progress upload that we need to remove + var index = previews.indexOf(filename); + if (index !== -1) { + previews.splice(index, 1); + } else { + index = uploadsInProgress.indexOf(filename); + + if (index !== -1) { + uploadsInProgress.splice(index, 1); + this.refs.fileUpload.cancelUpload(filename); } } + var draft = PostStore.getCurrentDraft(); if (!draft) { draft = {} @@ -193,8 +202,10 @@ module.exports = React.createClass({ draft['uploadsInProgress'] = []; } draft['previews'] = previews; + draft['uploadsInProgress'] = uploadsInProgress; PostStore.storeCurrentDraft(draft); - this.setState({previews: previews}); + + this.setState({previews: previews, uploadsInProgress: uploadsInProgress}); }, componentDidMount: function() { ChannelStore.addChangeListener(this._onChange); @@ -270,6 +281,7 @@ module.exports = React.createClass({ id="post_textbox" ref="textbox" /> <FileUpload + ref='fileUpload' getFileCount={this.getFileCount} onUploadStart={this.handleUploadStart} onFileUpload={this.handleFileUploadComplete} diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx index 2b4e459f1..8218429fd 100644 --- a/web/react/components/file_preview.jsx +++ b/web/react/components/file_preview.jsx @@ -45,8 +45,9 @@ module.exports = React.createClass({ this.props.uploadsInProgress.forEach(function(filename) { previews.push( - <div className="preview-div"> + <div className="preview-div" data-filename={filename}> <img className="spinner" src="/static/images/load.gif"/> + <a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a> </div> ); }.bind(this)); diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index c02afc5e9..11b3b3cee 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -4,8 +4,12 @@ var client = require('../utils/client.jsx'); var Constants = require('../utils/constants.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); +var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ + getInitialState: function() { + return {requests: {}}; + }, handleChange: function() { var element = $(this.refs.fileInput.getDOMNode()); var files = element.prop('files'); @@ -40,16 +44,26 @@ module.exports = React.createClass({ formData.append('channel_id', channel_id); formData.append('files', files[i], files[i].name); - client.uploadFile(formData, + var request = client.uploadFile(formData, function(data) { parsedData = $.parseJSON(data); this.props.onFileUpload(parsedData['filenames'], channel_id); + + var requests = this.state.requests; + for (var i = 0; i < parsedData['filenames'].length; i++) { + delete requests[utils.getFileName(parsedData['filenames'][i])]; + } + this.setState({requests: requests}); }.bind(this), function(err) { this.props.onUploadError(err); }.bind(this) ); + var requests = this.state.requests; + requests[files[i].name] = request; + this.setState({requests: requests}); + this.props.onUploadStart([files[i].name], channel_id); } @@ -121,18 +135,39 @@ module.exports = React.createClass({ function(data) { parsedData = $.parseJSON(data); self.props.onFileUpload(parsedData['filenames'], channel_id); + + var requests = self.state.requests; + for (var i = 0; i < parsedData['filenames'].length; i++) { + delete requests[utils.getFileName(parsedData['filenames'][i])]; + } + self.setState({requests: requests}); }, function(err) { self.props.onUploadError(err); } ); + var requests = self.state.requests; + requests[files[i].name] = request; + self.setState({requests: requests}); + self.props.onUploadStart([name], channel_id); } } } }); }, + cancelUpload: function(filename) { + var requests = this.state.requests; + var request = requests[filename]; + + if (request) { + request.abort(); + + delete requests[filename]; + this.setState({requests: requests}); + } + }, render: function() { return ( <span ref="input" className="btn btn-file"><span><i className="glyphicon glyphicon-paperclip"></i></span><input ref="fileInput" type="file" onChange={this.handleChange} multiple/></span> diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index b8eda0075..d979515ef 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -762,7 +762,7 @@ module.exports.getProfiles = function(success, error) { }; module.exports.uploadFile = function(formData, success, error) { - $.ajax({ + var request = $.ajax({ url: "/api/v1/files/upload", type: 'POST', data: formData, @@ -771,12 +771,16 @@ module.exports.uploadFile = function(formData, success, error) { processData: false, success: success, error: function(xhr, status, err) { - e = handleError("uploadFile", xhr, status, err); - error(e); + if (err !== 'abort') { + e = handleError("uploadFile", xhr, status, err); + error(e); + } } }); module.exports.track('api', 'api_files_upload'); + + return request; }; module.exports.getPublicLink = function(data, success, error) { |