fix: request validation issue on load persistence tab (#4759)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/components/http/BodyParameters.vue

@@ -113,8 +113,9 @@
               <HoppSmartFileChip
                 v-for="(file, fileIndex) in entry.value"
                 :key="`param-${index}-file-${fileIndex}`"
-                >{{ file.name }}</HoppSmartFileChip
               >
+                {{ file.name }}
+              </HoppSmartFileChip>
             </div>
           </div>
           <span v-else class="flex flex-1">

packages/hoppscotch-data/src/rest/v/9.ts

@@ -20,7 +20,7 @@ export const FormDataKeyValue = z
     z.union([
       z.object({
         isFile: z.literal(true),
-        value: z.array(z.instanceof(Blob).nullable()),
+        value: z.array(z.instanceof(Blob).nullable()).catch([]),
       }),
       z.object({
         isFile: z.literal(false),
@@ -28,6 +28,19 @@ export const FormDataKeyValue = z
       }),
     ])
   )
+  .transform((data) => {
+    // Sample use case about restoring the `value` field in an empty state during page reload
+    // for files chosen in the previous attempt
+    if (data.isFile && Array.isArray(data.value) && data.value.length === 0) {
+      return {
+        ...data,
+        isFile: false,
+        value: "",
+      }
+    }
+
+    return data
+  })
 
 export type FormDataKeyValue = z.infer<typeof FormDataKeyValue>