Port Django get_valid_filename utility to javascript

kobotoolbox · Feb 3, 2022 · 3946808 · 3946808
1 parent 3d46a68
commit 3946808
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/jsapp/js/components/submissions/submissionDataTable.es6 b/jsapp/js/components/submissions/submissionDataTable.es6
@@ -9,6 +9,7 @@ import {renderQuestionTypeIcon} from 'js/assetUtils';
 import {
   DISPLAY_GROUP_TYPES,
   getSubmissionDisplayData,
+  getMediaAttachment,
 } from 'js/components/submissions/submissionUtils';
 import {
   META_QUESTION_TYPES,
@@ -203,18 +204,6 @@ class SubmissionDataTable extends React.Component {
     });
   }
 
-  /**
-   * @prop {string} filename
-   * @returns {object|undefined}
-   */
-  findAttachmentData(targetFilename) {
-    // Match filename with full filename in attachment list
-    // BUG: this works but is possible to find bad attachment as `includes` can match multiple
-    return this.props.submissionData._attachments.find((attachment) => {
-      return attachment.filename.endsWith(`/${targetFilename}`);
-    });
-  }
-
   /**
    * @prop {string} data
    */
@@ -265,10 +254,8 @@ class SubmissionDataTable extends React.Component {
    * @prop {string} filename
    */
   renderAttachment(type, filename) {
-    const fileNameNoSpaces = filename.replace(/ /g, '_');
-    const attachment = this.findAttachmentData(fileNameNoSpaces);
-
-    if (attachment) {
+    const attachment = getMediaAttachment(this.props.submissionData, filename);
+    if (attachment && attachment instanceof Object) {
       if (type === QUESTION_TYPES.image.id) {
         return (
           <a href={attachment.download_url} target='_blank'>
@@ -280,7 +267,7 @@ class SubmissionDataTable extends React.Component {
       }
     // In the case that an attachment is missing, don't crash the page
     } else {
-      return(t('Could not retrieve ##filename##').replace('##filename##', filename));
+      return attachment;
     }
   }
 

diff --git a/jsapp/js/components/submissions/submissionUtils.ts b/jsapp/js/components/submissions/submissionUtils.ts
@@ -477,21 +477,34 @@ export function getMediaAttachment(
   submission: SubmissionResponse,
   fileName: string
 ): string | SubmissionAttachment {
-  const fileNameNoSpaces = fileName.replace(/ /g, '_');
+  const validFileName = getValidFilename(fileName);
   let mediaAttachment: string | SubmissionAttachment = t('Could not find ##fileName##').replace(
     '##fileName##',
     fileName,
   );
 
   submission._attachments.forEach((attachment) => {
-    if (attachment.filename.includes(fileNameNoSpaces)) {
+    if (attachment.filename.includes(validFileName)) {
       mediaAttachment = attachment;
     }
   });
 
   return mediaAttachment;
 }
 
+/**
+  Mimics Django get_valid_filename() to match back-end renaming when an
+  attachment is saved in storage.
+  See https://github.com/django/django/blob/832adb31f27cfc18ad7542c7eda5a1b6ed5f1669/django/utils/text.py#L224
+ */
+export function getValidFilename(
+  fileName: string
+): string {
+  return fileName.normalize('NFD').replace(/\p{Diacritic}/gu, '')
+    .replace(/ /g, '_')
+    .replace(/[^-\w\.]/g, '');
+}
+
 export default {
   DISPLAY_GROUP_TYPES,
   getSubmissionDisplayData,