diff --git a/src/components/BaseQuestionnaireResponseForm/widgets/UploadFileControl/index.tsx b/src/components/BaseQuestionnaireResponseForm/widgets/UploadFileControl/index.tsx
index 92d816ab..0db59017 100644
--- a/src/components/BaseQuestionnaireResponseForm/widgets/UploadFileControl/index.tsx
+++ b/src/components/BaseQuestionnaireResponseForm/widgets/UploadFileControl/index.tsx
@@ -1,8 +1,8 @@
-import { InboxOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-import { Form, Upload, message, Tooltip } from 'antd';
+import { InboxOutlined } from '@ant-design/icons';
+import { Form, Upload, message } from 'antd';
import type { UploadFile } from 'antd';
import { Attachment } from 'fhir/r4b';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
import { QuestionItemProps } from 'sdc-qrf';
import { isSuccess } from '@beda.software/remote-data';
@@ -42,13 +42,13 @@ async function fetchDownloadUrl(filename: string) {
}
export function UploadFileControl({ parentPath, questionItem }: UploadFileProps) {
- const { linkId, text, helpText, repeats } = questionItem;
+ const { linkId, helpText, repeats } = questionItem;
const fieldName = [...parentPath, linkId];
const { formItem, value, onChange } = useFieldController(fieldName, questionItem);
const ref = useRef>({});
+ const uid = useRef>({});
- const hasUploadedFile = value?.length > 0;
- const fileList: Array = (value ?? []).map((v: { value: { Attachment: Attachment } }) => {
+ const initialFileList: Array = (value ?? []).map((v: { value: { Attachment: Attachment } }) => {
const url = v.value.Attachment.url!;
const file: UploadFile = {
uid: url,
@@ -58,12 +58,16 @@ export function UploadFileControl({ parentPath, questionItem }: UploadFileProps)
};
return file;
});
+ const [fileList, setFileList] = useState>(initialFileList);
+
+ const hasUploadedFile = value?.length > 0;
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(
{
@@ -71,49 +75,41 @@ export function UploadFileControl({ parentPath, questionItem }: UploadFileProps)
onProgress,
onError,
onSuccess: async (body: any, xhr?: XMLHttpRequest | undefined) => {
- onSuccess && onSuccess(body, xhr);
const downloadUrl = await fetchDownloadUrl(filename);
ref.current[filename] = downloadUrl;
- const attachement = { value: { Attachment: { url: filename } } };
- if (repeats) {
- onChange([...value, attachement]);
- } else {
- onChange([attachement]);
- }
+ onSuccess && onSuccess(body, xhr);
},
},
uploadUrl,
);
} catch (error) {
- console.error(error);
+ message.error(`${(file as any).name} file upload failed.`);
}
};
const onUploaderChange = (info: { fileList: UploadFile[]; file: UploadFile }) => {
+ setFileList(info.fileList);
const { status } = info.file;
if (status === 'done') {
+ const filename = uid.current[info.file.uid];
+ const attachement = { value: { Attachment: { url: filename } } };
+ if (repeats) {
+ onChange([...value, attachement]);
+ } else {
+ onChange([attachement]);
+ }
message.success(`${info.file.name} file uploaded successfully.`);
} else if (status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
};
- const onRemove = () => {
+ const onRemove = (file: UploadFile) => {
+ console.log(file);
onChange([]);
+ setFileList([]);
};
return (
-
- {text}{' '}
- {helpText && (
-
-
-
- )}
-
- }
- >
+
{!hasUploadedFile || repeats ? (
Click or drag file to this area to upload
-
- Support for a single upload. Strictly prohibited from uploading company data or other banned
- files.
-
+ {helpText}
) : (