Upload Files & Send Attachments

const receiverID: string = "UID";
const receiverType: string = CometChat.RECEIVER_TYPE.USER;

const request: CometChat.UploadFileRequest = CometChat.createUploadFileRequest(
  receiverID,
  receiverType
);

const files: FileList = (document.getElementById("files") as HTMLInputElement).files!;

// Pair each file with an id you own, so you can map events back to your UI.
const items = Array.from(files).map((file) => ({ fileId: crypto.randomUUID(), file }));

const listener = new CometChat.UploadFileListener({
  onFileProgress: (fileId: string, loaded: number, total: number, percent: number) => {
    console.log(`${fileId}: ${percent}%`);
  },
  onFileUploaded: (fileId: string, attachment: CometChat.Attachment) => {
    console.log(`${fileId} uploaded ->`, attachment.getUrl());
  },
  onFileError: (fileId: string, error: CometChat.CometChatException) => {
    console.log(`${fileId} rejected (not retryable):`, error.code);
  },
  onFileFailure: (fileId: string, error: CometChat.CometChatException) => {
    console.log(`${fileId} failed (retryable):`, error.code);
  },
  onComplete: (result: CometChat.UploadResult) => {
    console.log("Batch settled:", result);
  },
});

request.uploadAttachments(items, listener);

request
  .setConcurrency(3)              // upload up to 3 files at once (default 1, sequential)
  .setParentMessageId(parentId); // mark this batch as belonging to a thread

const batchId: string = request.getBatchId(); // auto-generated UUID unless you set one

// One listener for the whole batch, regardless of how many upload calls you make.
request.addUploadListener(
  new CometChat.UploadFileListener({
    onFileProgress: (fileId, loaded, total, percent) => updateRow(fileId, percent),
    onFileUploaded: (fileId, attachment) => markUploaded(fileId, attachment),
    onComplete: (result) => console.log("Whole batch settled:", result),
  })
);

// Later:
request.removeUploadListener();

// Remove one file: aborts its in-flight upload (silently — no onFileFailure),
// or drops it from the batch if it has already uploaded.
request.removeAttachment(fileId);

// Re-upload one FAILED file (re-presigns automatically if the URL expired).
// No-op for rejected or already-uploaded files.
request.retryAttachment(fileId);

// Release the whole batch from memory, aborting anything still in flight.
// Call this after a successful send, or to abandon the composer.
request.clearAll();

const receiverID = "UID";
const receiverType = CometChat.RECEIVER_TYPE.USER;

const request = CometChat.createUploadFileRequest(receiverID, receiverType).setConcurrency(3);

// Track per-file outcomes to drive your composer UI — but never send from here.
const listener = new CometChat.UploadFileListener({
  onFileProgress: (fileId, loaded, total, percent) => updateRow(fileId, percent),
  onFileFailure: (fileId, error) => markRetryable(fileId, error), // request.retryAttachment(fileId)
  onFileError: (fileId, error) => markRejected(fileId, error),    // not retryable — remove/replace the file
});

const files = (document.getElementById("files") as HTMLInputElement).files!;
const items = Array.from(files).map((file) => ({ fileId: crypto.randomUUID(), file }));
request.uploadAttachments(items, listener);

// Enable your "Send" button only when every staged file has uploaded — i.e. nothing
// pending, failed, or rejected. Have the user retry or remove the rest first.
function canSend(): boolean {
  const total = request.getAttachmentCount();
  return total > 0 && request.getAttachments().length === total;
}

// Wire this to the "Send" button's click handler.
async function send(): Promise<void> {
  if (!canSend()) return;
  try {
    // One MediaMessage per media type, so each sends with the matching message type.
    for (const type of ["image", "video", "audio", "file"] as const) {
      const attachments = request.getAttachmentsByType(type);
      if (attachments.length === 0) continue;

      const mediaMessage = new CometChat.MediaMessage(
        receiverID,
        "",     // no raw file — attachments already carry hosted URLs
        type,   // matches CometChat.MESSAGE_TYPE.IMAGE / VIDEO / AUDIO / FILE
        receiverType
      );
      mediaMessage.setAttachments(attachments);
      await CometChat.sendMediaMessage(mediaMessage);
    }
    request.clearAll(); // release the batch only after a successful send
  } catch (error) {
    console.log("Media message sending failed with error", error);
  }
}

const max: number = await CometChat.getMaxAttachmentCount();
console.log("Max attachments per message:", max);