Refactor uploading

src/components/BaseQuestionnaireResponseForm/widgets/UploadFileControl/index.tsx

@@ -1,5 +1,6 @@
 import { InboxOutlined } from '@ant-design/icons';
-import { Form, Upload, message } from 'antd';
+import { formatError } from 'aidbox-react';
+import { Form, Upload, message, notification } from 'antd';
 import type { UploadFile } from 'antd';
 import { Attachment } from 'fhir/r4b';
 import { useRef, useState } from 'react';
@@ -8,7 +9,7 @@ import { QuestionItemProps } from 'sdc-qrf';
 import { isSuccess } from '@beda.software/remote-data';
 
 import {
-    generateDownloadUrl,
+    /* generateDownloadUrl, */
     generateUploadUrl,
     uploadFileWithXHR,
     CustomUploadRequestOption,
@@ -20,41 +21,20 @@ const { Dragger } = Upload;
 
 type UploadFileProps = QuestionItemProps;
 
-async function fetchUploadUrl(fileName: string) {
-    const response = await generateUploadUrl(fileName);
-    if (isSuccess(response) && response.data?.put_presigned_url) {
-        return {
-            uploadUrl: response.data.put_presigned_url,
-            filename: response.data.filename,
-        };
-    } else {
-        throw new Error('file upload failed.');
-    }
-}
-
-async function fetchDownloadUrl(filename: string) {
-    const response = await generateDownloadUrl(filename);
-    if (isSuccess(response) && response.data?.get_presigned_url) {
-        return response.data.get_presigned_url;
-    } else {
-        throw new Error('url download failed');
-    }
-}
-
 export function UploadFileControl({ parentPath, questionItem }: UploadFileProps) {
     const { linkId, helpText, repeats } = questionItem;
     const fieldName = [...parentPath, linkId];
     const { formItem, value, onChange } = useFieldController(fieldName, questionItem);
-    const ref = useRef<Record<string, string>>({});
+    /* const ref = useRef<Record<string, string>>({}); */
     const uid = useRef<Record<string, string>>({});
 
     const initialFileList: Array<UploadFile> = (value ?? []).map((v: { value: { Attachment: Attachment } }) => {
         const url = v.value.Attachment.url!;
         const file: UploadFile = {
             uid: url,
             name: url,
-            url: ref.current[url],
-            thumbUrl: ref.current[url],
+            /* url: ref.current[url], */
+            /* thumbUrl: ref.current[url], */
         };
         return file;
     });
@@ -64,26 +44,14 @@ export function UploadFileControl({ parentPath, questionItem }: UploadFileProps)
 
     const multiple = repeats;
     const customRequest = async (options: CustomUploadRequestOption) => {
-        const { file, onSuccess, onError, onProgress } = options;
-        try {
-            const { uploadUrl, filename } = await fetchUploadUrl((file as any).name);
-            uid.current[(file as any).uid] = filename;
-
-            uploadFileWithXHR(
-                {
-                    file,
-                    onProgress,
-                    onError,
-                    onSuccess: async (body: any, xhr?: XMLHttpRequest | undefined) => {
-                        const downloadUrl = await fetchDownloadUrl(filename);
-                        ref.current[filename] = downloadUrl;
-                        onSuccess && onSuccess(body, xhr);
-                    },
-                },
-                uploadUrl,
-            );
-        } catch (error) {
-            message.error(`${(file as any).name} file upload failed.`);
+        const file: UploadFile = options.file as any;
+        const response = await generateUploadUrl(file.name);
+        if (isSuccess(response)) {
+            const { filename, uploadUrl } = response.data;
+            uid.current[file.uid] = filename;
+            uploadFileWithXHR(options, uploadUrl);
+        } else {
+            notification.error(formatError(response.error));
         }
     };
     const onUploaderChange = (info: { fileList: UploadFile<any>[]; file: UploadFile<any> }) => {

src/services/file-upload.ts

@@ -1,7 +1,9 @@
-import { service } from 'aidbox-react/lib/services/service';
 import type { UploadRequestOption } from 'rc-upload/lib/interface';
 
+import { service } from 'aidbox-react/lib/services/service';
+
 import config from '@beda.software/emr-config';
+import { mapSuccess } from '@beda.software/remote-data';
 
 interface UploadUrlResponse {
     filename: string;
@@ -13,28 +15,34 @@ interface DownloadUrlResponse {
 }
 
 export async function generateUploadUrl(filename: string) {
-    return await service<UploadUrlResponse>({
-        baseURL: config.baseURL,
-        url: '/$generate-upload-url',
-        method: 'POST',
-        data: {
-            filename,
-        },
-    });
+    return mapSuccess(
+        await service<UploadUrlResponse>({
+            baseURL: config.baseURL,
+            url: '/$generate-upload-url',
+            method: 'POST',
+            data: {
+                filename,
+            },
+        }),
+        (data) => ({ filename: data.filename, uploadUrl: data.put_presigned_url }),
+    );
 }
 
 export async function generateDownloadUrl(key: string) {
-    return await service<DownloadUrlResponse>({
-        baseURL: config.baseURL,
-        url: '/$generate-download-url',
-        method: 'POST',
-        data: {
-            key,
-        },
-    });
+    return mapSuccess(
+        await service<DownloadUrlResponse>({
+            baseURL: config.baseURL,
+            url: '/$generate-download-url',
+            method: 'POST',
+            data: {
+                key,
+            },
+        }),
+        ({ get_presigned_url }) => ({ downloadUrl: get_presigned_url }),
+    );
 }
 
-export type CustomUploadRequestOption = Pick<UploadRequestOption, "file" | "onProgress" | "onError" | "onSuccess">;
+export type CustomUploadRequestOption = Pick<UploadRequestOption, 'file' | 'onProgress' | 'onError' | 'onSuccess'>;
 
 export function uploadFileWithXHR(options: CustomUploadRequestOption, uploadUrl: string) {
     const { file, onProgress, onError, onSuccess } = options;