dynamic-modal

Version:
The dynamic-modal is a solution of creation different modals into project using a json configuration file
42 lines (41 loc) • 2.28 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const InputUpload = ({ onChange, readAsArrayBuffer, read, helpText, label, ...props }) => {
    const onChangeHandler = (event) => {
        if (read && event.target.files) {
            readFileBlob(event.target.files[0], false)
                .then((result) => onChange(result))
                .catch((err) => {
                console.error('file read error', err);
                onChange({ name: '', size: 0, data: '' });
            });
        }
        else {
            onChange(event.target.files);
        }
    };
    const readFileBlob = (blob, image) => {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            if (image)
                fileReader.readAsDataURL(blob);
            else if (readAsArrayBuffer)
                fileReader.readAsArrayBuffer(blob);
            else
                fileReader.readAsText(blob);
            fileReader.onload = () => {
                const fileResult = {
                    name: blob.name,
                    size: blob.size,
                    data: fileReader.result,
                };
                resolve(fileResult);
            };
            fileReader.onerror = (error) => {
                reject(error);
            };
        });
    };
    return (_jsxs("div", { className: "flex flex-col w-full gap-1 text-center", children: [label && (_jsx("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${props.id}`, children: label })), _jsx("input", { className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\n        file:border-0 file:text-sm file:font-semibold\n        file:bg-gray-100 file:text-blue-600\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${props.id}-help`, id: `file-input-${props.id}`, type: "file", onChange: onChangeHandler, ...props }), _jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${props.id}-help`, children: helpText?.toUpperCase() })] }));
};
export default InputUpload;