How to handle multiple file uploads with attachmentHandler.setContent?

Data Services
1

Hi,

I’m working with the attachmentHandler.setContent method, which currently only supports uploading one file at a time.
Here’s the code I’m using:

const handleSaveContract = (): void => {
               //what if I have an array of files
		const pdfFile: File = FileUtils.getFileFromBytes(state.previewStep.fileByte ?? [], fileName);

		const handler: TransactionHandler<Attachment> = {
			onDone: handleUploadAttachmentDone,
			onError: handleUploadAttachmentError,
			onProgress: () => undefined
		};

		props.attachmentHandler?.setContent(
			handler,
			props.document.id,
			CandidateConstants.CANDIDATE_DM,
			CandidateModelPath.Candidate.OfferContractFiles.OfferContractsGenerated.OfferContractFile.toModelPath(),
			{},
			pdfFile
		);
    }

};

the problem is setContent only handles one file at a time and I need to upload multiple files concurrently.

The question is how can I modify setContent or my code to handle an array of files for simultaneous uploads?

Thanks!

2

Hi @ahmad-warm-vale ,

uploading of multiple contents in a single request is not supported. But you can trigger multiple requests at once.

What is the supposed usecase to upload multiple attachment contents in single request?

3

Hi, if you were to have an array of files, maybe you could try something like this:

		pdfFiles.forEach((pdfFile) => {
			props.attachmentHandler?.setContent(
				handler,
				props.document.id,
				CandidateConstants.CANDIDATE_DM,
				CandidateModelPath.Candidate.OfferContractFiles.OfferContractsGenerated.OfferContractFile.toModelPath(),
				{},
				pdfFile
			);
		})
4

Hi @daniel-bright-delta and @petr-high-peak ,

If we use .forEach(...) to trigger multiple request, how can we wait (Promise.all) for all requests to done?
I think we have to wait for all of the requests done (nothing wrong happened) to continue handling data.

5

Hello,
what if we try wrapping it in a Promise constructor?, I saw that @com.mgmtp.a12.formengine/formengine-core/src/view/internal/components/widgets/form-engine/multi-attachment-upload.tsx does something similar.
Maybe something like this could work:

const attachmentPromises = pdfFiles.map(async (pdfFile) => {
  return new Promise((resolve, reject) => {
    const handler: TransactionHandler<Attachment> = {
      onDone: (attachment) => resolve(attachment),
      onError: (errorKey, errorLocalizable) =>
        reject({ errorKey, errorLocalizable }),
      onProgress: () => {},
    };

    props.attachmentHandler?.setContent(
      handler,
      props.document.id,
      CandidateConstants.CANDIDATE_DM,
      CandidateModelPath.Candidate.OfferContractFiles.OfferContractsGenerated.OfferContractFile.toModelPath(),
      {},
      pdfFile
    );
  });
});

then we could await Promise.all(attachmentPromises)

6

Yub, it can work.

7

Hi @petr-high-peak,

Thanks for answering, in our project, we are handling many selected attachment types by the user which generate print-engine models based on this selection, and then I’m trying to get the attachments from the backend and then represent them on a table.

8

Hi @ahmad-warm-vale,

are the answers posted here solving your problem?

9

Hi @petr-high-peak,

Yes, @daniel-bright-delta answer solved my problem, I marked it as a solution.

Thank you.