chatwoot/app/javascript/dashboard/composables/useFileUpload.js

import { computed } from 'vue';
import { useMapGetter } from 'dashboard/composables/store';
import { useAlert } from 'dashboard/composables';
import { useI18n } from 'vue-i18n';
import { DirectUpload } from 'activestorage';
import {
  MAXIMUM_FILE_UPLOAD_SIZE,
  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
} from 'shared/constants/messages';
import { checkFileSizeLimit } from 'shared/helpers/FileHelper';

/**
 * Composable for handling file uploads in conversations
 * @param {Object} options - Configuration options
 * @param {boolean} options.isATwilioSMSChannel - Whether the current channel is Twilio SMS
 * @param {Function} options.attachFile - Callback function to handle file attachment
 * @returns {Object} File upload methods and utilities
 */
export const useFileUpload = ({ isATwilioSMSChannel, attachFile }) => {
  const { t } = useI18n();

  const accountId = useMapGetter('getCurrentAccountId');
  const currentUser = useMapGetter('getCurrentUser');
  const currentChat = useMapGetter('getSelectedChat');
  const globalConfig = useMapGetter('globalConfig/get');

  const maxFileSize = computed(() =>
    isATwilioSMSChannel
      ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
      : MAXIMUM_FILE_UPLOAD_SIZE
  );

  const handleDirectFileUpload = file => {
    if (!file) return;

    if (checkFileSizeLimit(file, maxFileSize.value)) {
      const upload = new DirectUpload(
        file.file,
        `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
        {
          directUploadWillCreateBlobWithXHR: xhr => {
            xhr.setRequestHeader(
              'api_access_token',
              currentUser.value.access_token
            );
          },
        }
      );

      upload.create((error, blob) => {
        if (error) {
          useAlert(error);
        } else {
          attachFile({ file, blob });
        }
      });
    } else {
      useAlert(
        t('CONVERSATION.FILE_SIZE_LIMIT', {
          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
        })
      );
    }
  };

  const handleIndirectFileUpload = file => {
    if (!file) return;

    if (checkFileSizeLimit(file, maxFileSize.value)) {
      attachFile({ file });
    } else {
      useAlert(
        t('CONVERSATION.FILE_SIZE_LIMIT', {
          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
        })
      );
    }
  };

  const onFileUpload = file => {
    if (globalConfig.value.directUploadsEnabled) {
      handleDirectFileUpload(file);
    } else {
      handleIndirectFileUpload(file);
    }
  };

  return {
    onFileUpload,
  };
};