IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Changed post drafts to maintain a store a unique id for each file upload to fix issues with duplicate file names

Browse Source
This commit is contained in:
hmhealey
2015-08-10 12:05:45 -04:00
parent 4b74c873cc
commit c9a1bf2d33
7 changed files with 79 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/react/components/create_comment.jsx
View File

@@ -95,7 +95,7 @@ module.exports = React.createClass({
$(".post-right__scroll").perfectScrollbar('update');
this.setState({messageText: messageText});
},
handleUploadStart: function(filenames, channel_id) {
handleUploadStart: function(clientIds, channel_id) {
var draft = PostStore.getCommentDraft(this.props.rootId);
if (!draft) {
draft = {};
@@ -104,12 +104,12 @@ module.exports = React.createClass({
draft['previews'] = [];
}
draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames);
draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds);
PostStore.storeCommentDraft(this.props.rootId, draft);
this.setState({uploadsInProgress: draft['uploadsInProgress']});
},
handleFileUploadComplete: function(filenames, channel_id) {
handleFileUploadComplete: function(filenames, clientIds, channel_id) {
var draft = PostStore.getCommentDraft(this.props.rootId);
if (!draft) {
draft = {};
@@ -119,18 +119,8 @@ module.exports = React.createClass({
}
// remove each finished file from uploads
for (var i = 0; i < filenames.length; i++) {
var filename = filenames[i];
// filenames returned by the server include a path while stored uploads only have the actual file name
var index = -1;
for (var j = 0; j < draft['uploadsInProgress'].length; j++) {
var upload = draft['uploadsInProgress'][j];
if (upload.indexOf(filename, upload.length - filename.length)) {
index = j;
break;
}
}
for (var i = 0; i < clientIds.length; i++) {
var index = draft['uploadsInProgress'].indexOf(clientIds[i]);
if (index != -1) {
draft['uploadsInProgress'].splice(index, 1);
@@ -148,20 +138,20 @@ module.exports = React.createClass({
clearPreviews: function() {
this.setState({previews: []});
},
removePreview: function(filename) {
removePreview: function(id) {
var previews = this.state.previews;
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);
// id can either be the path of an uploaded file or the client id of an in progress upload
var index = previews.indexOf(id);
if (index !== -1) {
previews.splice(index, 1);
} else {
index = uploadsInProgress.indexOf(filename);
index = uploadsInProgress.indexOf(id);
if (index !== -1) {
uploadsInProgress.splice(index, 1);
this.refs.fileUpload.cancelUpload(filename);
this.refs.fileUpload.cancelUpload(id);
}
}

30
web/react/components/create_post.jsx
View File

@@ -128,7 +128,7 @@ module.exports = React.createClass({
$(".post-list-holder-by-time").css("height", height + "px");
$(window).trigger('resize');
},
handleUploadStart: function(filenames, channel_id) {
handleUploadStart: function(clientIds, channel_id) {
var draft = PostStore.getDraft(channel_id);
if (!draft) {
draft = {};
@@ -137,12 +137,12 @@ module.exports = React.createClass({
draft['previews'] = [];
}
draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames);
draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds);
PostStore.storeDraft(channel_id, draft);
this.setState({uploadsInProgress: draft['uploadsInProgress']});
},
handleFileUploadComplete: function(filenames, channel_id) {
handleFileUploadComplete: function(filenames, clientIds, channel_id) {
var draft = PostStore.getDraft(channel_id);
if (!draft) {
draft = {};
@@ -152,18 +152,8 @@ module.exports = React.createClass({
}
// remove each finished file from uploads
for (var i = 0; i < filenames.length; i++) {
var filename = filenames[i];
// filenames returned by the server include a path while stored uploads only have the actual file name
var index = -1;
for (var j = 0; j < draft['uploadsInProgress'].length; j++) {
var upload = draft['uploadsInProgress'][j];
if (upload.indexOf(filename, upload.length - filename.length)) {
index = j;
break;
}
}
for (var i = 0; i < clientIds.length; i++) {
var index = draft['uploadsInProgress'].indexOf(clientIds[i]);
if (index != -1) {
draft['uploadsInProgress'].splice(index, 1);
@@ -178,20 +168,20 @@ module.exports = React.createClass({
handleUploadError: function(err) {
this.setState({ server_error: err });
},
removePreview: function(filename) {
removePreview: function(id) {
var previews = this.state.previews;
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);
// id can either be the path of an uploaded file or the client id of an in progress upload
var index = previews.indexOf(id);
if (index !== -1) {
previews.splice(index, 1);
} else {
index = uploadsInProgress.indexOf(filename);
index = uploadsInProgress.indexOf(id);
if (index !== -1) {
uploadsInProgress.splice(index, 1);
this.refs.fileUpload.cancelUpload(filename);
this.refs.fileUpload.cancelUpload(id);
}
}

11
web/react/components/file_preview.jsx
View File

@@ -10,7 +10,12 @@ var Constants = require('../utils/constants.jsx');
module.exports = React.createClass({
handleRemove: function(e) {
var previewDiv = e.target.parentNode.parentNode;
this.props.onRemove(previewDiv.getAttribute('data-filename'));
if (previewDiv.hasAttribute('data-filename')) {
this.props.onRemove(previewDiv.getAttribute('data-filename'));
} else if (previewDiv.hasAttribute('data-client-id')) {
this.props.onRemove(previewDiv.getAttribute('data-client-id'));
}
},
render: function() {
var previews = [];
@@ -43,9 +48,9 @@ module.exports = React.createClass({
}
}.bind(this));
this.props.uploadsInProgress.forEach(function(filename) {
this.props.uploadsInProgress.forEach(function(clientId) {
previews.push(
<div className="preview-div" data-filename={filename}>
<div className="preview-div" data-client-id={clientId}>
<img className="spinner" src="/static/images/load.gif"/>
<a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a>
</div>

36
web/react/components/file_upload.jsx
View File

@@ -39,19 +39,23 @@ module.exports = React.createClass({
continue;
}
// generate a unique id that can be used by other components to refer back to this file upload
var clientId = utils.generateId();
// Prepare data to be uploaded.
formData = new FormData();
formData.append('channel_id', channel_id);
formData.append('files', files[i], files[i].name);
formData.append('client_ids', clientId);
var request = client.uploadFile(formData,
function(data) {
parsedData = $.parseJSON(data);
this.props.onFileUpload(parsedData['filenames'], channel_id);
this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channel_id);
var requests = this.state.requests;
for (var i = 0; i < parsedData['filenames'].length; i++) {
delete requests[utils.getFileName(parsedData['filenames'][i])];
for (var i = 0; i < parsedData['client_ids'].length; i++) {
delete requests[parsedData['client_ids'][i]];
}
this.setState({requests: requests});
}.bind(this),
@@ -61,10 +65,10 @@ module.exports = React.createClass({
);
var requests = this.state.requests;
requests[files[i].name] = request;
requests[clientId] = request;
this.setState({requests: requests});
this.props.onUploadStart([files[i].name], channel_id);
this.props.onUploadStart([clientId], channel_id);
}
// clear file input for all modern browsers
@@ -123,6 +127,9 @@ module.exports = React.createClass({
var channel_id = ChannelStore.getCurrentId();
// generate a unique id that can be used by other components to refer back to this file upload
var clientId = utils.generateId();
formData = new FormData();
formData.append('channel_id', channel_id);
var d = new Date();
@@ -130,15 +137,16 @@ module.exports = React.createClass({
var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes());
var name = "Image Pasted at "+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+hour+"-"+min+"." + ext;
formData.append('files', file, name);
formData.append('client_ids', clientId);
client.uploadFile(formData,
var request = client.uploadFile(formData,
function(data) {
parsedData = $.parseJSON(data);
self.props.onFileUpload(parsedData['filenames'], channel_id);
self.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channel_id);
var requests = self.state.requests;
for (var i = 0; i < parsedData['filenames'].length; i++) {
delete requests[utils.getFileName(parsedData['filenames'][i])];
for (var i = 0; i < parsedData['client_ids'].length; i++) {
delete requests[parsedData['client_ids'][i]];
}
self.setState({requests: requests});
},
@@ -148,23 +156,23 @@ module.exports = React.createClass({
);
var requests = self.state.requests;
requests[files[i].name] = request;
requests[clientId] = request;
self.setState({requests: requests});
self.props.onUploadStart([name], channel_id);
self.props.onUploadStart([clientId], channel_id);
}
}
}
});
},
cancelUpload: function(filename) {
cancelUpload: function(clientId) {
var requests = this.state.requests;
var request = requests[filename];
var request = requests[clientId];
if (request) {
request.abort();
delete requests[filename];
delete requests[clientId];
this.setState({requests: requests});
}
},