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

React MUI package for direct upload with activestorage

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import { DirectUpload } from '@rails/activestorage';
import { LinearProgress, Typography } from '@mui/material';
export const FileUploader = ({ file, url, onProgress, onError }) => {
    useEffect(() => {
        if (!file.blob || file.percent === 100 || file.error || !url) {
            return;
        }
        const directUpload = new DirectUpload(file.blob, url);
        directUpload.create((error, blob) => {
            if (error) {
                onError({ id: file.id, error });
            }
            else {
                onProgress({
                    id: file.id,
                    done: true,
                    percent: 100,
                    signedId: blob.signed_id,
                });
            }
        });
    }, [file.id, file.blob, file.percent, file.error, onError, url, onProgress]);
    return (_jsxs(_Fragment, { children: [!file.error && _jsx(LinearProgress, {}), file.error && (_jsx(Typography, Object.assign({ color: "error", variant: "caption", sx: { pl: 2 } }, { children: "Error uploading file!" })))] }));
};