Use question XPath to identify attachment

jsapp/js/components/processing/singleProcessingSubmissionDetails.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {getSurveyFlatPaths} from 'js/assetUtils';
 import type {AssetContent} from 'js/dataInterface';
 import {
   QUESTION_TYPES,
@@ -81,8 +82,11 @@ export default class SingleProcessingSubmissionDetails extends React.Component<S
       return null;
     }
 
-    // Attachment needs to be object with urls.
-    const attachment = getMediaAttachment(submissionData, rowData);
+    // Attachment needs to be an object with urls.
+    const flatPaths = getSurveyFlatPaths(this.props.assetContent.survey, true);
+    const questionXPath = flatPaths[singleProcessingStore.currentQuestionName];
+
+    const attachment = getMediaAttachment(submissionData, rowData, questionXPath);
     if (typeof attachment === 'string') {
       return;
     }

jsapp/js/components/submissions/submissionDataTable.tsx

@@ -60,10 +60,10 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
         );
       }
     }
-
   }
 
   renderGroup(item: DisplayGroup, itemIndex?: number) {
+
     return (
       <bem.SubmissionDataTable__row
         m={['group', `type-${item.type}`]}
@@ -202,7 +202,7 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
       case QUESTION_TYPES.audio.id:
       case QUESTION_TYPES.video.id:
       case QUESTION_TYPES.file.id:
-        return this.renderAttachment(item.type, item.data, item.name);
+        return this.renderAttachment(item.type, item.data, item.name, item.xpath);
       case QUESTION_TYPES.geotrace.id:
         return this.renderMultiplePointsData(item.data);
       case QUESTION_TYPES.geoshape.id:
@@ -260,8 +260,8 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
     ));
   }
 
-  renderAttachment(type: string, filename: string, name: string) {
-    const attachment = getMediaAttachment(this.props.submissionData, filename);
+  renderAttachment(type: string, filename: string, name: string, xpath: string) {
+    const attachment = getMediaAttachment(this.props.submissionData, filename, xpath);
     if (attachment && attachment instanceof Object) {
       if (type === QUESTION_TYPES.audio.id) {
         return (

jsapp/js/components/submissions/submissionUtils.ts

@@ -83,6 +83,8 @@ export class DisplayResponse {
   public label: string | null;
   /** Unique identifier */
   public name: string;
+  /** XPath  */
+  public xpath: string;
   /**
    * Unique identifier of a choices list, only applicable for question types
    * that uses choices lists.
@@ -95,12 +97,14 @@ export class DisplayResponse {
     type: AnyRowTypeName | null,
     label: string | null,
     name: string,
+    xpath: string,
     listName: string | undefined,
     data?: string | null
   ) {
     this.type = type;
     this.label = label;
     this.name = name;
+    this.xpath = xpath;
     if (data) {
       this.data = data;
     }
@@ -288,6 +292,7 @@ export function getSubmissionDisplayData(
           row.type,
           rowLabel,
           rowName,
+          flatPaths[rowName],
           rowListName,
           rowData
         );
@@ -307,6 +312,7 @@ export function getSubmissionDisplayData(
               null,
               getColumnLabel(asset, sdKey, false),
               sdKey,
+              flatPaths[rowName],
               undefined,
               getSupplementalDetailsContent(submissionData, sdKey)
             )
@@ -397,6 +403,7 @@ function populateMatrixData(
         questionSurveyObj.type,
         getTranslatedRowLabel(questionName, survey, translationIndex),
         questionName,
+        flatPaths[questionName],
         getRowListName(questionSurveyObj),
         questionData
       );
@@ -533,15 +540,16 @@ function getRowListName(row: SurveyRow | undefined): string | undefined {
  */
 export function getMediaAttachment(
   submission: SubmissionResponse,
-  fileName: string
+  fileName: string,
+  questionXPath: string
 ): string | SubmissionAttachment {
-  const validFileName = getValidFilename(fileName);
   let mediaAttachment: string | SubmissionAttachment = t(
     'Could not find ##fileName##'
   ).replace('##fileName##', fileName);
 
   submission._attachments.forEach((attachment) => {
-    if (attachment.filename.includes(validFileName)) {
+
+    if (attachment.question_xpath === questionXPath) {
       // Check if the audio filetype is of type not supported by player and send it to format to mp3
       if (
         attachment.mimetype.includes('audio/') &&
@@ -550,11 +558,8 @@ export function getMediaAttachment(
         !attachment.mimetype.includes('/wav') &&
         !attachment.mimetype.includes('ogg')
       ) {
-        const questionPath = Object.keys(submission).find(
-          (key) => submission[key] === fileName
-        );
 
-        const newAudioURL = `${ROOT_URL}/api/v2/assets/${submission._xform_id_string}/data/${attachment.instance}/attachments/?xpath=${questionPath}&format=mp3`;
+        const newAudioURL = attachment.download_url + '?format=mp3';
         const newAttachment = {
           ...attachment,
           download_url: newAudioURL,
@@ -634,6 +639,11 @@ export function getRowSupplementalResponses(
   rowName: string
 ): DisplayResponse[] {
   const output: DisplayResponse[] = [];
+
+  const survey = asset?.content?.survey || [];
+  const flatPaths = getSurveyFlatPaths(survey, true);
+  const questionXPath = flatPaths[rowName];
+
   if (isRowProcessingEnabled(asset.uid, rowName)) {
     const advancedFeatures = asset.advanced_features;
 
@@ -646,6 +656,7 @@ export function getRowSupplementalResponses(
               null,
               getColumnLabel(asset, path, false),
               path,
+              questionXPath,
               undefined,
               getSupplementalDetailsContent(submissionData, path)
             )
@@ -663,6 +674,7 @@ export function getRowSupplementalResponses(
               null,
               getColumnLabel(asset, path, false),
               path,
+              questionXPath,
               undefined,
               getSupplementalDetailsContent(submissionData, path)
             )
@@ -679,6 +691,7 @@ export function getRowSupplementalResponses(
  * attachment is saved in storage.
  * See https://github.com/django/django/blob/832adb31f27cfc18ad7542c7eda5a1b6ed5f1669/django/utils/text.py#L224
  */
+// @TODO Could be delete it, not needed anymore since we rely on question XPath
 export function getValidFilename(fileName: string): string {
   return fileName
     .normalize('NFD')

jsapp/js/components/submissions/table.es6

@@ -809,7 +809,7 @@ export class DataTable extends React.Component {
               let mediaAttachment = null;
 
               if (q.type !== QUESTION_TYPES.text.id) {
-                mediaAttachment = getMediaAttachment(row.original, row.value);
+                mediaAttachment = getMediaAttachment(row.original, row.value, q.$xpath);
               }
 
               if (

jsapp/js/dataInterface.ts

@@ -151,6 +151,7 @@ export interface SubmissionAttachment {
   download_small_url: string;
   mimetype: string;
   filename: string;
+  question_xpath: string;
   instance: number;
   xform: number;
   id: number;