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

[PLT-2407] Improve ordering of uploaded attachments (#7022)

Browse Source 
* improve ordering of uploaded attachments

* use LocalizationStore.getLocale() when comparing file names
This commit is contained in:
Saturnino Abril
2017-08-05 02:00:23 +08:00
committed by Christopher Speller
parent c973608ccb
commit 2c8a5ffd97
4 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
webapp/components/file_attachment_list/file_attachment_list.jsx
View File

@@ -61,14 +61,16 @@ export default class FileAttachmentList extends React.Component {
render() {
const postFiles = [];
let fileInfos = [];
if (this.props.fileInfos && this.props.fileInfos.length > 0) {
for (let i = 0; i < Math.min(this.props.fileInfos.length, Constants.MAX_DISPLAY_FILES); i++) {
const fileInfo = this.props.fileInfos[i];
fileInfos = this.props.fileInfos.sort((a, b) => a.create_at - b.create_at);
for (let i = 0; i < Math.min(fileInfos.length, Constants.MAX_DISPLAY_FILES); i++) {
const fileInfo = fileInfos[i];
postFiles.push(
<FileAttachment
key={fileInfo.id}
fileInfo={this.props.fileInfos[i]}
fileInfo={fileInfos[i]}
index={i}
handleImageClick={this.handleImageClick}
compactDisplay={this.props.compactDisplay}
@@ -96,7 +98,7 @@ export default class FileAttachmentList extends React.Component {
show={this.state.showPreviewModal}
onModalDismissed={() => this.setState({showPreviewModal: false})}
startId={this.state.startImgIndex}
fileInfos={this.props.fileInfos}
fileInfos={fileInfos}
/>
</div>
);

3
webapp/components/file_preview.jsx
View File

@@ -41,7 +41,8 @@ export default class FilePreview extends React.Component {
render() {
var previews = [];
this.props.fileInfos.forEach((info) => {
const fileInfos = this.props.fileInfos.sort((a, b) => a.create_at - b.create_at);
fileInfos.forEach((info) => {
const type = Utils.getFileType(info.extension);
let className = 'file-preview';

14
webapp/components/file_upload.jsx
View File

@@ -72,6 +72,8 @@ class FileUpload extends React.Component {
}
uploadFiles(files) {
const sortedFiles = Utils.sortFilesByName(files);
// clear any existing errors
this.props.onUploadError(null);
@@ -83,9 +85,9 @@ class FileUpload extends React.Component {
// keep track of how many files have been too large
const tooLargeFiles = [];
for (let i = 0; i < files.length && numUploads < uploadsRemaining; i++) {
if (files[i].size > global.mm_config.MaxFileSize) {
tooLargeFiles.push(files[i]);
for (let i = 0; i < sortedFiles.length && numUploads < uploadsRemaining; i++) {
if (sortedFiles[i].size > global.mm_config.MaxFileSize) {
tooLargeFiles.push(sortedFiles[i]);
continue;
}
@@ -93,8 +95,8 @@ class FileUpload extends React.Component {
const clientId = Utils.generateId();
const request = uploadFile(
files[i],
files[i].name,
sortedFiles[i],
sortedFiles[i].name,
channelId,
clientId,
this.fileUploadSuccess.bind(this, channelId),
@@ -111,7 +113,7 @@ class FileUpload extends React.Component {
}
const {formatMessage} = this.props.intl;
if (files.length > uploadsRemaining) {
if (sortedFiles.length > uploadsRemaining) {
this.props.onUploadError(formatMessage(holders.limited, {count: Constants.MAX_UPLOAD_FILES}));
} else if (tooLargeFiles.length > 1) {
var tooLargeFilenames = tooLargeFiles.map((file) => file.name).join(', ');

5
webapp/utils/utils.jsx
View File

@@ -475,6 +475,11 @@ export function splitFileLocation(fileLocation) {
return {ext, name: filename, path: filePath};
}
export function sortFilesByName(files) {
const locale = LocalizationStore.getLocale();
return Array.from(files).sort((a, b) => a.name.localeCompare(b.name, locale, {numeric: true}));
}
export function toTitleCase(str) {
function doTitleCase(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();