stream-chat-react/dist/components/ReactFileUtilities/UploadButton.js

React components to create chat conversations or livestream style chat

import clsx from 'clsx';
import { nanoid } from 'nanoid';
import React, { forwardRef, useCallback, useMemo } from 'react';
import { useHandleFileChangeWrapper } from './utils';
import { useMessageInputContext, useTranslationContext } from '../../context';
import { useMessageComposer } from '../MessageInput';
import { useAttachmentManagerState } from '../MessageInput/hooks/useAttachmentManagerState';
import { useStateStore } from '../../store';
const attachmentManagerConfigStateSelector = (state) => ({
    acceptedFiles: state.attachments.acceptedFiles,
    maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage,
});
/**
 * @deprecated Use FileInput instead
 */
export const UploadButton = forwardRef(function UploadButton({ onFileChange, resetOnChange = true, ...rest }, ref) {
    const handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);
    return React.createElement("input", { onChange: handleInputChange, ref: ref, type: 'file', ...rest });
});
export const FileInput = UploadButton;
export const UploadFileInput = forwardRef(function UploadFileInput({ className, onFileChange: onFileChangeCustom, ...props }, ref) {
    const { t } = useTranslationContext('UploadFileInput');
    const { cooldownRemaining, textareaRef } = useMessageInputContext();
    const messageComposer = useMessageComposer();
    const { attachmentManager } = messageComposer;
    const { isUploadEnabled } = useAttachmentManagerState();
    const { acceptedFiles, maxNumberOfFilesPerMessage } = useStateStore(messageComposer.configState, attachmentManagerConfigStateSelector);
    const id = useMemo(() => nanoid(), []);
    const onFileChange = useCallback((files) => {
        attachmentManager.uploadFiles(files);
        textareaRef.current?.focus();
        onFileChangeCustom?.(files);
    }, [onFileChangeCustom, attachmentManager, textareaRef]);
    return (React.createElement(FileInput, { accept: acceptedFiles?.join(','), "aria-label": t('aria/File upload'), "data-testid": 'file-input', disabled: !isUploadEnabled || !!cooldownRemaining, id: id, multiple: maxNumberOfFilesPerMessage > 1, ...props, className: clsx('str-chat__file-input', className), onFileChange: onFileChange, ref: ref }));
});