easy-file-dragdrop 1.0.4

package/dist/index.js

@@ -0,0 +1,491 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  InputCanvas: () => InputCanvas,
+  useDragDrop: () => useDragdrop,
+  useDragdrop: () => useDragdrop
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/InputCanvas.tsx
+var import_image = __toESM(require("next/image"));
+var import_fi = require("react-icons/fi");
+
+// src/components/useDragdrop.ts
+var import_react = require("react");
+var bytesPerKilobyte = 1024;
+function toBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result ?? ""));
+    reader.onerror = () => reject(new Error("Could not convert file to base64"));
+    reader.readAsDataURL(file);
+  });
+}
+function createFileId(file) {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `${file.name}-${file.lastModified}-${Math.random().toString(36).slice(2)}`;
+}
+function createFileKey(file) {
+  return `${file.name}-${file.size}-${file.lastModified}-${file.type}`;
+}
+function doesFileMatchAccept(file, accept) {
+  if (!accept || accept.trim().length === 0) {
+    return true;
+  }
+  const acceptedTokens = accept.split(",").map((token) => token.trim().toLowerCase());
+  const fileName = file.name.toLowerCase();
+  const fileType = file.type.toLowerCase();
+  return acceptedTokens.some((token) => {
+    if (!token) {
+      return false;
+    }
+    if (token.startsWith(".")) {
+      return fileName.endsWith(token);
+    }
+    if (token.endsWith("/*")) {
+      const rootType = token.slice(0, token.length - 1);
+      return fileType.startsWith(rootType);
+    }
+    return fileType === token;
+  });
+}
+function useDragdrop(options = {}) {
+  const {
+    accept,
+    maxFiles,
+    maxFileSize,
+    multiple = true,
+    validation,
+    value,
+    onChange,
+    onFileAdd,
+    onFileAddB24,
+    onFileRemove,
+    showPreview = true,
+    disabled = false
+  } = options;
+  const [files, setFiles] = (0, import_react.useState)([]);
+  const [dragActive, setDragActive] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const inputRef = (0, import_react.useRef)(null);
+  const emitFilesChange = (0, import_react.useCallback)((nextFiles) => {
+    const flatFiles = nextFiles.map((item) => item.file);
+    if (onChange) {
+      onChange(flatFiles);
+    }
+  }, [onChange]);
+  (0, import_react.useEffect)(() => {
+    if (!value) {
+      return;
+    }
+    setFiles((previous) => {
+      const previousByKey = new Map(previous.map((item) => [createFileKey(item.file), item]));
+      const next = value.map((file) => {
+        const key = createFileKey(file);
+        const existing = previousByKey.get(key);
+        if (existing) {
+          return existing;
+        }
+        const isImage = file.type.startsWith("image/");
+        return {
+          id: createFileId(file),
+          file,
+          isImage,
+          previewUrl: showPreview && isImage ? URL.createObjectURL(file) : void 0
+        };
+      });
+      const nextIds = new Set(next.map((item) => item.id));
+      previous.forEach((item) => {
+        if (!nextIds.has(item.id) && item.previewUrl) {
+          URL.revokeObjectURL(item.previewUrl);
+        }
+      });
+      return next;
+    });
+  }, [showPreview, value]);
+  const maxSizeInBytes = (0, import_react.useMemo)(() => {
+    if (!maxFileSize || maxFileSize <= 0) {
+      return void 0;
+    }
+    return maxFileSize * bytesPerKilobyte * bytesPerKilobyte;
+  }, [maxFileSize]);
+  const addFiles = (0, import_react.useCallback)(async (incoming) => {
+    if (disabled) {
+      return;
+    }
+    setError(null);
+    const inputFiles = Array.from(incoming);
+    if (inputFiles.length === 0) {
+      return;
+    }
+    const selectedFiles = multiple ? inputFiles : inputFiles.slice(0, 1);
+    const nextFiles = [];
+    const fileErrors = [];
+    for (const file of selectedFiles) {
+      if (!doesFileMatchAccept(file, accept)) {
+        fileErrors.push(`File type not accepted: ${file.name}`);
+        continue;
+      }
+      if (maxSizeInBytes && file.size > maxSizeInBytes) {
+        fileErrors.push(`File too large: ${file.name}`);
+        continue;
+      }
+      if (validation && !validation(file)) {
+        fileErrors.push(`Validation failed: ${file.name}`);
+        continue;
+      }
+      const isImage = file.type.startsWith("image/");
+      nextFiles.push({
+        id: createFileId(file),
+        file,
+        isImage,
+        previewUrl: showPreview && isImage ? URL.createObjectURL(file) : void 0
+      });
+    }
+    if (fileErrors.length > 0) {
+      setError(fileErrors[0]);
+    }
+    if (nextFiles.length === 0) {
+      return;
+    }
+    let removedByLimit = [];
+    let updatedFiles = [];
+    setFiles((previous) => {
+      const merged = multiple ? [...previous, ...nextFiles] : [nextFiles[0]];
+      if (!maxFiles || maxFiles <= 0) {
+        updatedFiles = merged;
+        return merged;
+      }
+      if (merged.length <= maxFiles) {
+        updatedFiles = merged;
+        return merged;
+      }
+      setError(`Maximum ${maxFiles} file${maxFiles > 1 ? "s" : ""} allowed`);
+      removedByLimit = merged.slice(maxFiles);
+      const limited = merged.slice(0, maxFiles);
+      updatedFiles = limited;
+      return limited;
+    });
+    if (removedByLimit.length > 0) {
+      removedByLimit.forEach((item) => {
+        if (item.previewUrl) {
+          URL.revokeObjectURL(item.previewUrl);
+        }
+      });
+    }
+    if (onFileAdd || onFileAddB24) {
+      for (const item of nextFiles) {
+        if (onFileAdd) {
+          onFileAdd(item.file);
+        }
+        if (onFileAddB24) {
+          const base64 = await toBase64(item.file);
+          onFileAddB24(base64);
+        }
+      }
+    }
+    emitFilesChange(updatedFiles);
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+  }, [accept, disabled, emitFilesChange, maxFiles, maxSizeInBytes, multiple, onFileAdd, onFileAddB24, showPreview, validation]);
+  const removeFile = (0, import_react.useCallback)((id) => {
+    let removedFile;
+    let updatedFiles = [];
+    setFiles((previous) => {
+      removedFile = previous.find((item) => item.id === id);
+      const next = previous.filter((item) => item.id !== id);
+      updatedFiles = next;
+      return next;
+    });
+    if (removedFile?.previewUrl) {
+      URL.revokeObjectURL(removedFile.previewUrl);
+    }
+    if (removedFile?.file && onFileRemove) {
+      onFileRemove(removedFile.file);
+    }
+    emitFilesChange(updatedFiles);
+  }, [emitFilesChange, onFileRemove]);
+  const clearFiles = (0, import_react.useCallback)(() => {
+    setFiles((previous) => {
+      previous.forEach((item) => {
+        if (item.previewUrl) {
+          URL.revokeObjectURL(item.previewUrl);
+        }
+      });
+      return [];
+    });
+    emitFilesChange([]);
+  }, [emitFilesChange]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      files.forEach((item) => {
+        if (item.previewUrl) {
+          URL.revokeObjectURL(item.previewUrl);
+        }
+      });
+    };
+  }, [files]);
+  const onDragEnter = (0, import_react.useCallback)((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!disabled) {
+      setDragActive(true);
+    }
+  }, [disabled]);
+  const onDragOver = (0, import_react.useCallback)((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!disabled) {
+      setDragActive(true);
+    }
+  }, [disabled]);
+  const onDragLeave = (0, import_react.useCallback)((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragActive(false);
+  }, []);
+  const onDrop = (0, import_react.useCallback)(async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragActive(false);
+    if (disabled) {
+      return;
+    }
+    await addFiles(event.dataTransfer.files);
+  }, [addFiles, disabled]);
+  const onInputChange = (0, import_react.useCallback)(async (event) => {
+    const selected = event.target.files;
+    if (!selected || disabled) {
+      return;
+    }
+    await addFiles(selected);
+  }, [addFiles, disabled]);
+  const openFileDialog = (0, import_react.useCallback)(() => {
+    if (!disabled) {
+      inputRef.current?.click();
+    }
+  }, [disabled]);
+  return {
+    files,
+    dragActive,
+    error,
+    inputRef,
+    addFiles,
+    removeFile,
+    clearFiles,
+    openFileDialog,
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onInputChange
+  };
+}
+
+// src/components/InputCanvas.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function cn(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function formatFileSize(sizeInBytes) {
+  if (sizeInBytes === 0) {
+    return "0 B";
+  }
+  const units = ["B", "KB", "MB", "GB"];
+  const sizeLevel = Math.min(Math.floor(Math.log(sizeInBytes) / Math.log(1024)), units.length - 1);
+  const size = sizeInBytes / Math.pow(1024, sizeLevel);
+  return `${size.toFixed(size >= 10 || sizeLevel === 0 ? 0 : 1)} ${units[sizeLevel]}`;
+}
+function getFileTypeIcon(file) {
+  const fileType = file.type.toLowerCase();
+  const fileName = file.name.toLowerCase();
+  if (fileType.startsWith("image/")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fi.FiImage, { size: 22 });
+  }
+  if (fileType.startsWith("video/")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fi.FiFilm, { size: 22 });
+  }
+  if (fileType.startsWith("audio/")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fi.FiMusic, { size: 22 });
+  }
+  if (fileType.includes("pdf") || fileName.endsWith(".pdf")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fi.FiFileText, { size: 22 });
+  }
+  if (fileType.includes("zip") || fileType.includes("compressed") || /\.(zip|rar|7z|tar|gz)$/.test(fileName)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fi.FiPackage, { size: 22 });
+  }
+  if (fileType.includes("json") || fileType.includes("javascript") || fileType.includes("typescript") || /\.(js|jsx|ts|tsx|json|xml|yml|yaml)$/.test(fileName)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fi.FiCode, { size: 22 });
+  }
+  if (fileType.startsWith("text/") || fileType.includes("msword") || fileType.includes("officedocument") || /\.(txt|md|csv|doc|docx|xls|xlsx|ppt|pptx)$/.test(fileName)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fi.FiFileText, { size: 22 });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fi.FiFile, { size: 22 });
+}
+function InputCanvas(props) {
+  const {
+    name,
+    label = "Upload files",
+    description,
+    error: externalError,
+    accept,
+    multiple = false,
+    disabled = false,
+    onBlur,
+    className,
+    classNames,
+    dropzoneText = "Drag and drop files here",
+    dropzoneActiveText = "Drop files to upload",
+    browseText = "Browse",
+    removeButtonLabel = "Remove",
+    showPreview = true
+  } = props;
+  const {
+    files,
+    dragActive,
+    error: internalError,
+    inputRef,
+    removeFile,
+    openFileDialog,
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onInputChange
+  } = useDragdrop(props);
+  const shouldShowDropzone = multiple || files.length === 0;
+  const disabledClass = "efd-dropzone--disabled";
+  const error = internalError || externalError;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("efd-root", className, classNames?.root), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "efd-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: cn("efd-label", classNames?.label), children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: cn("efd-description", classNames?.description), children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        name,
+        type: "file",
+        className: "efd-hidden-input",
+        accept,
+        multiple,
+        disabled,
+        onBlur,
+        onChange: onInputChange
+      }
+    ),
+    shouldShowDropzone ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: cn(
+          "efd-dropzone",
+          !disabled && "efd-dropzone--interactive",
+          dragActive && "efd-dropzone--active",
+          disabled && disabledClass,
+          classNames?.dropzone,
+          dragActive && classNames?.dropzoneActive,
+          disabled && classNames?.dropzoneDisabled
+        ),
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onClick: openFileDialog,
+        onDragEnter,
+        onDragOver,
+        onDragLeave,
+        onDrop,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openFileDialog();
+          }
+        },
+        "aria-disabled": disabled,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("efd-upload-icon"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fi.FiUploadCloud, { size: 28 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: cn("efd-helper-text", classNames?.helperText), children: [
+            dragActive ? dropzoneActiveText : dropzoneText,
+            " ",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn("efd-browse-text"), children: browseText })
+          ] })
+        ]
+      }
+    ) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: cn("efd-error", classNames?.errorText), children: externalError }) : null,
+    !!files.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: cn("efd-file-list", classNames?.fileList), children: files.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "li",
+      {
+        className: cn("efd-file-item", classNames?.fileItem),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("efd-preview", classNames?.preview), children: showPreview && item.isImage && item.previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_image.default,
+            {
+              src: item.previewUrl,
+              alt: item.file.name,
+              width: 80,
+              height: 80,
+              unoptimized: true,
+              className: "efd-preview-image"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "efd-preview-icon", children: getFileTypeIcon(item.file) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("efd-file-meta", classNames?.fileMeta), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: cn("efd-file-name", classNames?.fileName), children: item.file.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: cn("efd-file-size", classNames?.fileSize), children: formatFileSize(item.file.size) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => removeFile(item.id),
+              className: cn("efd-remove-button", classNames?.removeButton),
+              "aria-label": `${removeButtonLabel} ${item.file.name}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fi.FiX, { size: 16 })
+            }
+          )
+        ]
+      },
+      item.id
+    )) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputCanvas,
+  useDragDrop,
+  useDragdrop
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/InputCanvas.tsx","../src/components/useDragdrop.ts"],"sourcesContent":["export { default as InputCanvas } from \"./components/InputCanvas\";\r\nexport { default as useDragdrop } from \"./components/useDragdrop\";\r\nexport { default as useDragDrop } from \"./components/useDragdrop\";\r\nexport type {\r\n\tDragDropClassNames,\r\n\tDragDropFileItem,\r\n\tSimpleDragDropParams\r\n} from \"./types\";\r\n","\"use client\";\r\n\r\nimport \"./InputCanvas.css\";\r\nimport Image from \"next/image\";\r\nimport {\r\n\tFiCode,\r\n\tFiFile,\r\n\tFiFileText,\r\n\tFiFilm,\r\n\tFiImage,\r\n\tFiMusic,\r\n\tFiPackage,\r\n\tFiUploadCloud,\r\n\tFiX\r\n} from \"react-icons/fi\";\r\nimport useDragdrop from \"./useDragdrop\";\r\nimport { SimpleDragDropParams } from \"../types\";\r\n\r\nfunction cn(...values: Array<string | undefined | false | null>): string {\r\n\treturn values.filter(Boolean).join(\" \");\r\n}\r\n\r\nfunction formatFileSize(sizeInBytes: number): string {\r\n\tif (sizeInBytes === 0) {\r\n\t\treturn \"0 B\";\r\n\t}\r\n\r\n\tconst units = [\"B\", \"KB\", \"MB\", \"GB\"];\r\n\tconst sizeLevel = Math.min(Math.floor(Math.log(sizeInBytes) / Math.log(1024)), units.length - 1);\r\n\tconst size = sizeInBytes / Math.pow(1024, sizeLevel);\r\n\treturn `${size.toFixed(size >= 10 || sizeLevel === 0 ? 0 : 1)} ${units[sizeLevel]}`;\r\n}\r\n\r\nfunction getFileTypeIcon(file: File): React.ReactNode {\r\n\tconst fileType = file.type.toLowerCase();\r\n\tconst fileName = file.name.toLowerCase();\r\n\r\n\tif (fileType.startsWith(\"image/\")) {\r\n\t\treturn <FiImage size={22} />;\r\n\t}\r\n\r\n\tif (fileType.startsWith(\"video/\")) {\r\n\t\treturn <FiFilm size={22} />;\r\n\t}\r\n\r\n\tif (fileType.startsWith(\"audio/\")) {\r\n\t\treturn <FiMusic size={22} />;\r\n\t}\r\n\r\n\tif (fileType.includes(\"pdf\") || fileName.endsWith(\".pdf\")) {\r\n\t\treturn <FiFileText size={22} />;\r\n\t}\r\n\r\n\tif (fileType.includes(\"zip\") || fileType.includes(\"compressed\") || /\\.(zip|rar|7z|tar|gz)$/.test(fileName)) {\r\n\t\treturn <FiPackage size={22} />;\r\n\t}\r\n\r\n\tif (fileType.includes(\"json\") || fileType.includes(\"javascript\") || fileType.includes(\"typescript\") || /\\.(js|jsx|ts|tsx|json|xml|yml|yaml)$/.test(fileName)) {\r\n\t\treturn <FiCode size={22} />;\r\n\t}\r\n\r\n\tif (\r\n\t\tfileType.startsWith(\"text/\") ||\r\n\t\tfileType.includes(\"msword\") ||\r\n\t\tfileType.includes(\"officedocument\") ||\r\n\t\t/\\.(txt|md|csv|doc|docx|xls|xlsx|ppt|pptx)$/.test(fileName)\r\n\t) {\r\n\t\treturn <FiFileText size={22} />;\r\n\t}\r\n\r\n\treturn <FiFile size={22} />;\r\n}\r\n\r\nexport default function InputCanvas(props: SimpleDragDropParams) {\r\n\tconst {\r\n\t\tname,\r\n\t\tlabel = \"Upload files\",\r\n\t\tdescription,\r\n\t\terror: externalError,\r\n\t\taccept,\r\n\t\tmultiple = false,\r\n\t\tdisabled = false,\r\n\t\tonBlur,\r\n\t\tclassName,\r\n\t\tclassNames,\r\n\t\tdropzoneText = \"Drag and drop files here\",\r\n\t\tdropzoneActiveText = \"Drop files to upload\",\r\n\t\tbrowseText = \"Browse\",\r\n\t\tremoveButtonLabel = \"Remove\",\r\n\t\tshowPreview = true\r\n\t} = props;\r\n\r\n\tconst {\r\n\t\tfiles,\r\n\t\tdragActive,\r\n\t\terror: internalError,\r\n\t\tinputRef,\r\n\t\tremoveFile,\r\n\t\topenFileDialog,\r\n\t\tonDragEnter,\r\n\t\tonDragOver,\r\n\t\tonDragLeave,\r\n\t\tonDrop,\r\n\t\tonInputChange\r\n\t} = useDragdrop(props);\r\n\r\n\tconst shouldShowDropzone = multiple || files.length === 0;\r\n\tconst disabledClass = \"efd-dropzone--disabled\";\r\n\tconst error = internalError || externalError;\r\n\r\n\treturn (\r\n\t\t<div className={cn(\"efd-root\", className, classNames?.root)}>\r\n\t\t\t<div className=\"efd-header\">\r\n\t\t\t\t<label className={cn(\"efd-label\", classNames?.label)}>\r\n\t\t\t\t\t{label}\r\n\t\t\t\t</label>\r\n\t\t\t\t{description ? (\r\n\t\t\t\t\t<p className={cn(\"efd-description\", classNames?.description)}>{description}</p>\r\n\t\t\t\t) : null}\r\n\t\t\t</div>\r\n\r\n\t\t\t<input\r\n\t\t\t\tref={inputRef}\r\n\t\t\t\tname={name}\r\n\t\t\t\ttype=\"file\"\r\n\t\t\t\tclassName=\"efd-hidden-input\"\r\n\t\t\t\taccept={accept}\r\n\t\t\t\tmultiple={multiple}\r\n\t\t\t\tdisabled={disabled}\r\n\t\t\t\tonBlur={onBlur}\r\n\t\t\t\tonChange={onInputChange}\r\n\t\t\t/>\r\n\r\n\t\t\t{shouldShowDropzone ? (\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName={cn(\r\n\t\t\t\t\t\t\"efd-dropzone\",\r\n\t\t\t\t\t\t!disabled && \"efd-dropzone--interactive\",\r\n\t\t\t\t\t\tdragActive && \"efd-dropzone--active\",\r\n\t\t\t\t\t\tdisabled && disabledClass,\r\n\t\t\t\t\t\tclassNames?.dropzone,\r\n\t\t\t\t\t\tdragActive && classNames?.dropzoneActive,\r\n\t\t\t\t\t\tdisabled && classNames?.dropzoneDisabled\r\n\t\t\t\t\t)}\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\ttabIndex={disabled ? -1 : 0}\r\n\t\t\t\t\tonClick={openFileDialog}\r\n\t\t\t\t\tonDragEnter={onDragEnter}\r\n\t\t\t\t\tonDragOver={onDragOver}\r\n\t\t\t\t\tonDragLeave={onDragLeave}\r\n\t\t\t\t\tonDrop={onDrop}\r\n\t\t\t\t\tonKeyDown={(event) => {\r\n\t\t\t\t\t\tif (event.key === \"Enter\" || event.key === \" \") {\r\n\t\t\t\t\t\t\tevent.preventDefault();\r\n\t\t\t\t\t\t\topenFileDialog();\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}\r\n\t\t\t\t\taria-disabled={disabled}\r\n\t\t\t\t>\r\n\t\t\t\t\t<div className={cn(\"efd-upload-icon\")}> \r\n\t\t\t\t\t\t<FiUploadCloud size={28} />\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<p className={cn(\"efd-helper-text\", classNames?.helperText)}>\r\n\t\t\t\t\t\t{dragActive ? dropzoneActiveText : dropzoneText} {\" \"}\r\n\t\t\t\t\t\t<span className={cn(\"efd-browse-text\")}>{browseText}</span>\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</div>\r\n\t\t\t) : null}\r\n\r\n\t\t\t{error ? (\r\n\t\t\t\t<p className={cn(\"efd-error\", classNames?.errorText)}>{externalError}</p>\r\n\t\t\t) : null}\r\n\r\n\t\t\t{!!files.length && (\r\n\t\t\t\t<ul className={cn(\"efd-file-list\", classNames?.fileList)}>\r\n\t\t\t\t\t{files.map((item) => (\r\n\t\t\t\t\t\t<li\r\n\t\t\t\t\t\t\tkey={item.id}\r\n\t\t\t\t\t\t\tclassName={cn(\"efd-file-item\", classNames?.fileItem)}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<div className={cn(\"efd-preview\", classNames?.preview)}>\r\n\t\t\t\t\t\t\t\t{showPreview && item.isImage && item.previewUrl ? (\r\n\t\t\t\t\t\t\t\t\t<Image\r\n\t\t\t\t\t\t\t\t\t\tsrc={item.previewUrl}\r\n\t\t\t\t\t\t\t\t\t\talt={item.file.name}\r\n\t\t\t\t\t\t\t\t\t\twidth={80}\r\n\t\t\t\t\t\t\t\t\t\theight={80}\r\n\t\t\t\t\t\t\t\t\t\tunoptimized\r\n\t\t\t\t\t\t\t\t\t\tclassName=\"efd-preview-image\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t<div className=\"efd-preview-icon\">\r\n\t\t\t\t\t\t\t\t\t\t{getFileTypeIcon(item.file)}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t<div className={cn(\"efd-file-meta\", classNames?.fileMeta)}>\r\n\t\t\t\t\t\t\t\t<p className={cn(\"efd-file-name\", classNames?.fileName)}>\r\n\t\t\t\t\t\t\t\t\t{item.file.name}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t<p className={cn(\"efd-file-size\", classNames?.fileSize)}>\r\n\t\t\t\t\t\t\t\t\t{formatFileSize(item.file.size)}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\t\tonClick={() => removeFile(item.id)}\r\n\t\t\t\t\t\t\t\tclassName={cn(\"efd-remove-button\", classNames?.removeButton)}\r\n\t\t\t\t\t\t\t\taria-label={`${removeButtonLabel} ${item.file.name}`}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<FiX size={16} />\r\n\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</ul>\r\n\t\t\t)}\r\n\t\t</div>\r\n\t);\r\n}","\"use client\";\r\n\r\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\r\nimport { DragDropFileItem, SimpleDragDropParams } from \"../types\";\r\n\r\ninterface UseDragDropResult {\r\n    files: DragDropFileItem[];\r\n    dragActive: boolean;\r\n    error: string | null;\r\n    inputRef: React.RefObject<HTMLInputElement | null>;\r\n    addFiles: (incoming: FileList | File[]) => Promise<void>;\r\n    removeFile: (id: string) => void;\r\n    clearFiles: () => void;\r\n    openFileDialog: () => void;\r\n    onDragEnter: (event: React.DragEvent<HTMLElement>) => void;\r\n    onDragOver: (event: React.DragEvent<HTMLElement>) => void;\r\n    onDragLeave: (event: React.DragEvent<HTMLElement>) => void;\r\n    onDrop: (event: React.DragEvent<HTMLElement>) => Promise<void>;\r\n    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => Promise<void>;\r\n}\r\n\r\nconst bytesPerKilobyte = 1024;\r\n\r\nfunction toBase64(file: File): Promise<string> {\r\n    return new Promise((resolve, reject) => {\r\n        const reader = new FileReader();\r\n        reader.onload = () => resolve(String(reader.result ?? \"\"));\r\n        reader.onerror = () => reject(new Error(\"Could not convert file to base64\"));\r\n        reader.readAsDataURL(file);\r\n    });\r\n}\r\n\r\nfunction createFileId(file: File): string {\r\n    if (typeof crypto !== \"undefined\" && typeof crypto.randomUUID === \"function\") {\r\n        return crypto.randomUUID();\r\n    }\r\n\r\n    return `${file.name}-${file.lastModified}-${Math.random().toString(36).slice(2)}`;\r\n}\r\n\r\nfunction createFileKey(file: File): string {\r\n    return `${file.name}-${file.size}-${file.lastModified}-${file.type}`;\r\n}\r\n\r\nfunction doesFileMatchAccept(file: File, accept?: string): boolean {\r\n    if (!accept || accept.trim().length === 0) {\r\n        return true;\r\n    }\r\n\r\n    const acceptedTokens = accept.split(\",\").map((token) => token.trim().toLowerCase());\r\n    const fileName = file.name.toLowerCase();\r\n    const fileType = file.type.toLowerCase();\r\n\r\n    return acceptedTokens.some((token) => {\r\n        if (!token) {\r\n            return false;\r\n        }\r\n\r\n        if (token.startsWith(\".\")) {\r\n            return fileName.endsWith(token);\r\n        }\r\n\r\n        if (token.endsWith(\"/*\")) {\r\n            const rootType = token.slice(0, token.length - 1);\r\n            return fileType.startsWith(rootType);\r\n        }\r\n\r\n        return fileType === token;\r\n    });\r\n}\r\n\r\nexport default function useDragdrop(options: SimpleDragDropParams = {}): UseDragDropResult {\r\n    const {\r\n        accept,\r\n        maxFiles,\r\n        maxFileSize,\r\n        multiple = true,\r\n        validation,\r\n        value,\r\n        onChange,\r\n        onFileAdd,\r\n        onFileAddB24,\r\n        onFileRemove,\r\n        showPreview = true,\r\n        disabled = false\r\n    } = options;\r\n\r\n    const [files, setFiles] = useState<DragDropFileItem[]>([]);\r\n    const [dragActive, setDragActive] = useState(false);\r\n    const [error, setError] = useState<string | null>(null);\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n    const emitFilesChange = useCallback((nextFiles: DragDropFileItem[]) => {\r\n        const flatFiles = nextFiles.map((item) => item.file);\r\n        if (onChange) {\r\n            onChange(flatFiles);\r\n        }\r\n    }, [onChange]);\r\n\r\n    useEffect(() => {\r\n        if (!value) {\r\n            return;\r\n        }\r\n\r\n        setFiles((previous) => {\r\n            const previousByKey = new Map(previous.map((item) => [createFileKey(item.file), item]));\r\n            const next = value.map((file) => {\r\n                const key = createFileKey(file);\r\n                const existing = previousByKey.get(key);\r\n                if (existing) {\r\n                    return existing;\r\n                }\r\n\r\n                const isImage = file.type.startsWith(\"image/\");\r\n                return {\r\n                    id: createFileId(file),\r\n                    file,\r\n                    isImage,\r\n                    previewUrl: showPreview && isImage ? URL.createObjectURL(file) : undefined\r\n                };\r\n            });\r\n\r\n            const nextIds = new Set(next.map((item) => item.id));\r\n            previous.forEach((item) => {\r\n                if (!nextIds.has(item.id) && item.previewUrl) {\r\n                    URL.revokeObjectURL(item.previewUrl);\r\n                }\r\n            });\r\n\r\n            return next;\r\n        });\r\n    }, [showPreview, value]);\r\n\r\n    const maxSizeInBytes = useMemo(() => {\r\n        if (!maxFileSize || maxFileSize <= 0) {\r\n            return undefined;\r\n        }\r\n\r\n        return maxFileSize * bytesPerKilobyte * bytesPerKilobyte;\r\n    }, [maxFileSize]);\r\n\r\n    const addFiles = useCallback(async (incoming: FileList | File[]) => {\r\n        if (disabled) {\r\n            return;\r\n        }\r\n\r\n        setError(null);\r\n\r\n        const inputFiles = Array.from(incoming);\r\n        if (inputFiles.length === 0) {\r\n            return;\r\n        }\r\n\r\n        const selectedFiles = multiple ? inputFiles : inputFiles.slice(0, 1);\r\n\r\n        const nextFiles: DragDropFileItem[] = [];\r\n        const fileErrors: string[] = [];\r\n\r\n        for (const file of selectedFiles) {\r\n            if (!doesFileMatchAccept(file, accept)) {\r\n                fileErrors.push(`File type not accepted: ${file.name}`);\r\n                continue;\r\n            }\r\n\r\n            if (maxSizeInBytes && file.size > maxSizeInBytes) {\r\n                fileErrors.push(`File too large: ${file.name}`);\r\n                continue;\r\n            }\r\n\r\n            if (validation && !validation(file)) {\r\n                fileErrors.push(`Validation failed: ${file.name}`);\r\n                continue;\r\n            }\r\n\r\n            const isImage = file.type.startsWith(\"image/\");\r\n            nextFiles.push({\r\n                id: createFileId(file),\r\n                file,\r\n                isImage,\r\n                previewUrl: showPreview && isImage ? URL.createObjectURL(file) : undefined\r\n            });\r\n        }\r\n\r\n        if (fileErrors.length > 0) {\r\n            setError(fileErrors[0]);\r\n        }\r\n\r\n        if (nextFiles.length === 0) {\r\n            return;\r\n        }\r\n\r\n        let removedByLimit: DragDropFileItem[] = [];\r\n        let updatedFiles: DragDropFileItem[] = [];\r\n\r\n        setFiles((previous) => {\r\n            const merged = multiple ? [...previous, ...nextFiles] : [nextFiles[0]];\r\n\r\n            if (!maxFiles || maxFiles <= 0) {\r\n                updatedFiles = merged;\r\n                return merged;\r\n            }\r\n\r\n            if (merged.length <= maxFiles) {\r\n                updatedFiles = merged;\r\n                return merged;\r\n            }\r\n\r\n            setError(`Maximum ${maxFiles} file${maxFiles > 1 ? \"s\" : \"\"} allowed`);\r\n            removedByLimit = merged.slice(maxFiles);\r\n            const limited = merged.slice(0, maxFiles);\r\n            updatedFiles = limited;\r\n            return limited;\r\n        });\r\n\r\n        if (removedByLimit.length > 0) {\r\n            removedByLimit.forEach((item) => {\r\n                if (item.previewUrl) {\r\n                    URL.revokeObjectURL(item.previewUrl);\r\n                }\r\n            });\r\n        }\r\n\r\n        if (onFileAdd || onFileAddB24) {\r\n            for (const item of nextFiles) {\r\n                if (onFileAdd) {\r\n                    onFileAdd(item.file);\r\n                }\r\n\r\n                if (onFileAddB24) {\r\n                    const base64 = await toBase64(item.file);\r\n                    onFileAddB24(base64);\r\n                }\r\n            }\r\n        }\r\n\r\n        emitFilesChange(updatedFiles);\r\n\r\n        if (inputRef.current) {\r\n            inputRef.current.value = \"\";\r\n        }\r\n    }, [accept, disabled, emitFilesChange, maxFiles, maxSizeInBytes, multiple, onFileAdd, onFileAddB24, showPreview, validation]);\r\n\r\n    const removeFile = useCallback((id: string) => {\r\n        let removedFile: DragDropFileItem | undefined;\r\n        let updatedFiles: DragDropFileItem[] = [];\r\n\r\n        setFiles((previous) => {\r\n            removedFile = previous.find((item) => item.id === id);\r\n            const next = previous.filter((item) => item.id !== id);\r\n            updatedFiles = next;\r\n            return next;\r\n        });\r\n\r\n        if (removedFile?.previewUrl) {\r\n            URL.revokeObjectURL(removedFile.previewUrl);\r\n        }\r\n\r\n        if (removedFile?.file && onFileRemove) {\r\n            onFileRemove(removedFile.file);\r\n        }\r\n\r\n        emitFilesChange(updatedFiles);\r\n    }, [emitFilesChange, onFileRemove]);\r\n\r\n    const clearFiles = useCallback(() => {\r\n        setFiles((previous) => {\r\n            previous.forEach((item) => {\r\n                if (item.previewUrl) {\r\n                    URL.revokeObjectURL(item.previewUrl);\r\n                }\r\n            });\r\n\r\n            return [];\r\n        });\r\n\r\n        emitFilesChange([]);\r\n    }, [emitFilesChange]);\r\n\r\n    useEffect(() => {\r\n        return () => {\r\n            files.forEach((item) => {\r\n                if (item.previewUrl) {\r\n                    URL.revokeObjectURL(item.previewUrl);\r\n                }\r\n            });\r\n        };\r\n    }, [files]);\r\n\r\n    const onDragEnter = useCallback((event: React.DragEvent<HTMLElement>) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n\r\n        if (!disabled) {\r\n            setDragActive(true);\r\n        }\r\n    }, [disabled]);\r\n\r\n    const onDragOver = useCallback((event: React.DragEvent<HTMLElement>) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n\r\n        if (!disabled) {\r\n            setDragActive(true);\r\n        }\r\n    }, [disabled]);\r\n\r\n    const onDragLeave = useCallback((event: React.DragEvent<HTMLElement>) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        setDragActive(false);\r\n    }, []);\r\n\r\n    const onDrop = useCallback(async (event: React.DragEvent<HTMLElement>) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        setDragActive(false);\r\n\r\n        if (disabled) {\r\n            return;\r\n        }\r\n\r\n        await addFiles(event.dataTransfer.files);\r\n    }, [addFiles, disabled]);\r\n\r\n    const onInputChange = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {\r\n        const selected = event.target.files;\r\n\r\n        if (!selected || disabled) {\r\n            return;\r\n        }\r\n\r\n        await addFiles(selected);\r\n    }, [addFiles, disabled]);\r\n\r\n    const openFileDialog = useCallback(() => {\r\n        if (!disabled) {\r\n            inputRef.current?.click();\r\n        }\r\n    }, [disabled]);\r\n\r\n    return {\r\n        files,\r\n        dragActive,\r\n        error,\r\n        inputRef,\r\n        addFiles,\r\n        removeFile,\r\n        clearFiles,\r\n        openFileDialog,\r\n        onDragEnter,\r\n        onDragOver,\r\n        onDragLeave,\r\n        onDrop,\r\n        onInputChange\r\n    };\r\n}\r\n"],"mappings":"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","names":["Image"]}