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

* improve ordering of uploaded attachments

* use LocalizationStore.getLocale() when comparing file names

4 files changed, 21 insertions, 11 deletions

diff --git a/webapp/components/file_attachment_list/file_attachment_list.jsx b/webapp/components/file_attachment_list/file_attachment_list.jsx
index 31b1ac424..a497a0004 100644
--- a/webapp/components/file_attachment_list/file_attachment_list.jsx
+++ b/webapp/components/file_attachment_list/file_attachment_list.jsx
@@ -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>
         );
diff --git a/webapp/components/file_preview.jsx b/webapp/components/file_preview.jsx
index 93ee53515..3ec656fd4 100644
--- a/webapp/components/file_preview.jsx
+++ b/webapp/components/file_preview.jsx
@@ -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';
diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx
index 0b32ab66e..0eb12a097 100644
--- a/webapp/components/file_upload.jsx
+++ b/webapp/components/file_upload.jsx
@@ -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(', ');
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index f12fcefba..89e031a3c 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -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();