@rikas/mui-activestorage-upload/lib/FileChip.js

React MUI package for direct upload with activestorage

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Chip, Stack } from '@mui/material';
import prettyBytes from 'pretty-bytes';
import { FileUploader } from './FileUploader';
export const FileChip = ({ file, uploadUrl, externalError, onFileError, onRemove, onProgress, }) => {
    const { done, error, name, size } = file;
    const handleRemove = (remove) => {
        if (onRemove && remove)
            onRemove(file);
    };
    const handleProgress = (file) => {
        if (onProgress)
            onProgress(file);
    };
    const handleError = (file) => {
        if (onFileError)
            onFileError(file);
    };
    return (_jsxs(Stack, Object.assign({ spacing: 1 }, { children: [_jsx(Chip, { sx: { maxWidth: 250 }, variant: done ? 'filled' : 'outlined', color: error || externalError ? 'error' : 'primary', label: `${name} ${size && `(${prettyBytes(size)})`}`, onDelete: () => handleRemove(done || !!error) }), !done && (_jsx(FileUploader, { file: file, url: uploadUrl, onProgress: handleProgress, onError: handleError }))] })));
};