WALLET-501: Fix filename encoding on upload (#67)

Encode FileName before upload --------- Co-authored-by: Nicolas Ayral Seydoux <[email protected]>
inrupt · Sep 19, 2024 · 9c0ce3c · 9c0ce3c
1 parent 129b215
commit 9c0ce3c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/api/files.ts b/api/files.ts
@@ -17,6 +17,7 @@ import mime from "mime";
 import FormData from "form-data";
 import type { WalletFile } from "@/types/WalletFile";
 import { handleErrorResponse } from "@inrupt/solid-client-errors";
+import { utf8EncodeResourceName } from "@/utils/fileUtils";
 import { makeApiRequest } from "./apiRequest";
 
 interface FileObject {
@@ -55,13 +56,14 @@ export const postFile = async (fileMetadata: FileObject): Promise<void> => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const formData: any = new FormData();
   formData.append("file", {
-    name: fileMetadata.name,
+    name: utf8EncodeResourceName(fileMetadata.name),
     type:
       fileMetadata.type ||
       mime.getType(fileMetadata.name) ||
       "application/octet-stream",
     uri: fileMetadata.uri,
   });
+  formData.append("fileName", fileMetadata.name);
   let response: Response;
   try {
     response = await fetch(

diff --git a/components/files/FileList.tsx b/components/files/FileList.tsx
@@ -90,7 +90,12 @@ const FileList: React.FC<FileListProps> = ({
         </ThemedText>
 
         <View style={styles.menuIconContainer}>
-          <TouchableOpacity onPress={() => onPressDetailedFile(item)}>
+          <TouchableOpacity
+            onPress={(event) => {
+              event.stopPropagation();
+              onPressDetailedFile(item);
+            }}
+          >
             <FontAwesomeIcon icon={faEllipsis} size={24} />
           </TouchableOpacity>
         </View>

diff --git a/utils/fileUtils.ts b/utils/fileUtils.ts
@@ -30,11 +30,6 @@ export const isImageFile = (filename: string): boolean => {
   return extension ? imageExtensions.includes(extension) : false;
 };
 
-export const getFileContainerByResource = (resource: string) => {
-  const match = resource.match(/\/([^/]+)\/?$/);
-  return match ? match[1] : "";
-};
-
 export const isDisplayDetailedPage = (file: WalletFile) => {
   return isImageFile(file.fileName) || file.isRDFResource;
 };
@@ -87,10 +82,15 @@ export const formatResourceName = (
   return lastPart;
 };
 
-export const removeFileExtension = (resource: string) => {
-  const parts = resource.split("/");
-  const lastPart = parts[parts.length - 1];
-  return lastPart.split(".").slice(0, -1).join(".");
+export const utf8EncodeResourceName = (input: string) => {
+  // encodeURIComponent() does not encode !'()*, so we manually do. This is
+  // required because these characters are allowed in resource names but not
+  // supported unencoded by the backend. For more details, see
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent#encoding_for_content-disposition_and_link_headers
+  return encodeURIComponent(input).replace(
+    /[!'()*]/g,
+    (char) => `%${char.charCodeAt(0).toString(16)}`
+  );
 };
 
 export const isWriteMode = (modes: AccessRequestMode[]) =>