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

Users can now drop files into the center pane or the rhs respectively to upload images and other files

Browse Source
This commit is contained in:
Reed Garmsen
2015-08-07 14:24:09 -07:00
parent 9bbeef208f
commit 1fa436b4f9
5 changed files with 79 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -222,7 +222,9 @@ module.exports = React.createClass({
getFileCount={this.getFileCount}
onUploadStart={this.handleUploadStart}
onFileUpload={this.handleFileUploadComplete}
onUploadError={this.handleUploadError} />
onUploadError={this.handleUploadError}
postType='comment'
channelId={this.props.channelId} />
</div>
<MsgTyping channelId={this.props.channelId} parentId={this.props.rootId} />
<div className={postFooterClassName}>

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

@@ -262,7 +262,9 @@ module.exports = React.createClass({
getFileCount={this.getFileCount}
onUploadStart={this.handleUploadStart}
onFileUpload={this.handleFileUploadComplete}
onUploadError={this.handleUploadError} />
onUploadError={this.handleUploadError}
postType='post'
channelId='' />
</div>
<div className={postFooterClassName}>
{postError}

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

@@ -80,49 +80,77 @@ module.exports = React.createClass({
}
} catch(e) {}
},
handleDrop: function(e) {
this.props.onUploadError(null);
var files = e.originalEvent.dataTransfer.files;
if (files.length) {
var numFiles = files.length;
var numToUpload = this.props.setUploads(numFiles);
for (var i = 0; i < numFiles && i < numToUpload; i++) {
var file = files[i];
var channelId = this.props.channelId || ChannelStore.getCurrentId();
var formData = new FormData();
formData.append('channel_id', channelId);
formData.append('files', file, file.name);
client.uploadFile(formData,
function(data) {
var parsedData = $.parseJSON(data);
this.props.onFileUpload(parsedData.filenames, channelId);
}.bind(this),
function(err) {
this.props.onUploadError(err);
}.bind(this)
);
}
}
},
componentDidMount: function() {
var inputDiv = this.refs.input.getDOMNode();
var self = this;
<<<<<<< HEAD
document.addEventListener('paste', function(e) {
=======
$('body').on('dragover', '.app__content', function(e) {
e.preventDefault();
e.stopPropagation();
//e.target.style
console.log("HERE!: drag center");
});
$('body').on('dragover', '.sidebar--right', function(e) {
e.preventDefault();
e.stopPropagation();
//e.target.style
console.log("HERE!: drag right");
});
$('body').on('dragenter', '.app__content', function(e) {
e.preventDefault();
e.stopPropagation();
//e.target.style
console.log("HERE!: dragenter center");
});
$('body').on('dragenter', '.sidebar--right', function(e) {
e.preventDefault();
e.stopPropagation();
//e.target.style
console.log("HERE!: dragenter right");
});
$('body').on('drop', '.app__content', function(e) {
if (e.originalEvent.dataTransfer)
e.preventDefault();
console.log("HERE!: drop center");
});
$('body').on('drop', '.sidebar--right', function(e) {
e.preventDefault();
console.log("HERE!: drop right");
});
if (this.props.postType === 'post') {
$('body').on('dragover', '.app__content', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('body').on('dragenter', '.app__content', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('body').on('dragend dragleave', '.app__content', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('body').on('drop', '.app__content', function(e) {
e.preventDefault();
e.stopPropagation();
self.handleDrop(e);
});
} else if (this.props.postType === 'comment') {
$('body').on('dragover', '.sidebar--right', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('body').on('dragenter', '.sidebar--right', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('body').on('dragend dragleave', '.sidebar--right', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('body').on('drop', '.sidebar--right', function(e) {
e.preventDefault();
e.stopPropagation();
self.handleDrop(e);
});
}
document.addEventListener("paste", function(e) {
>>>>>>> Added handlers for dragging and dropping files onto the center pane or RHS
document.addEventListener('paste', function(e) {
var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0];
if (textarea !== e.target && !$.contains(textarea, e.target)) {

7
web/react/components/post_list.jsx
View File

@@ -124,13 +124,6 @@ module.exports = React.createClass({
$(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment');
}
});
//$('body').on('drop drag')
/*window.document.addEventListener("drop", function(e) {
e.preventDefault();
var centerPostList = $(inputDiv.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode).find('.post-list')[0];
console.log("HERE!: " + centerPostList);
});*/
},
componentDidUpdate: function() {
this.resize();

14
web/sass-files/sass/partials/_files.scss
View File

@@ -194,11 +194,11 @@
border-right: 1px solid #ddd;
vertical-align: center;
// helper to center the image icon in the preview window
.file-details__preview-helper {
height: 100%;
display: inline-block;
vertical-align: middle;
}
}
// helper to center the image icon in the preview window
.file-details__preview-helper {
height: 100%;
display: inline-block;
vertical-align: middle;
}
}
}