alinea/dist/dashboard/view/media/FileUploader.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import "../../../chunks/chunk-U5RRZUYZ.js";

// src/dashboard/view/media/FileUploader.tsx
import { HStack, Icon, VStack, fromModule } from "alinea/ui";
import { IcOutlineCloudUpload } from "alinea/ui/icons/IcOutlineCloudUpload";
import { IcRoundKeyboardArrowDown } from "alinea/ui/icons/IcRoundKeyboardArrowDown";
import { IcRoundKeyboardArrowUp } from "alinea/ui/icons/IcRoundKeyboardArrowUp";
import { useEffect, useState } from "react";
import {
  UploadStatus,
  useUploads
} from "../../hook/UseUploads.js";
import { FileUploadRow } from "./FileUploadRow.js";

// src/dashboard/view/media/FileUploader.module.scss
var FileUploader_module_default = {
  "root": "alinea-FileUploader",
  "root-content": "alinea-FileUploader-content",
  "rootContent": "alinea-FileUploader-content",
  "is-over": "alinea-FileUploader-is-over",
  "isOver": "alinea-FileUploader-is-over",
  "root-uploads": "alinea-FileUploader-uploads",
  "rootUploads": "alinea-FileUploader-uploads",
  "root-uploads-row": "alinea-FileUploader-uploads-row",
  "rootUploadsRow": "alinea-FileUploader-uploads-row",
  "root-header": "alinea-FileUploader-header",
  "rootHeader": "alinea-FileUploader-header",
  "root-header-label": "alinea-FileUploader-header-label",
  "rootHeaderLabel": "alinea-FileUploader-header-label",
  "root-header-label-input": "alinea-FileUploader-header-label-input",
  "rootHeaderLabelInput": "alinea-FileUploader-header-label-input",
  "root-header-close": "alinea-FileUploader-header-close",
  "rootHeaderClose": "alinea-FileUploader-header-close",
  "root-divider": "alinea-FileUploader-divider",
  "rootDivider": "alinea-FileUploader-divider",
  "root-footer": "alinea-FileUploader-footer",
  "rootFooter": "alinea-FileUploader-footer"
};

// src/dashboard/view/media/FileUploader.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(FileUploader_module_default);
function FileUploader({
  destination,
  max,
  toggleSelect,
  position = "right"
}) {
  const readOnly = !destination;
  const { upload, uploads } = useUploads(toggleSelect);
  const [isOver, setIsOver] = useState(false);
  const isUploading = uploads.length > 0;
  const uploadsDone = uploads.filter(
    (upload2) => upload2.status === UploadStatus.Done
  ).length;
  const isFinished = uploadsDone === uploads.length;
  const todo = uploads.length - uploadsDone;
  const [showUploads, setShowUploads] = useState(true);
  function uploadFiles(files) {
    if (readOnly)
      return;
    return upload([...files], destination);
  }
  function handleFileInput(event) {
    const { files } = event.target;
    if (files)
      return uploadFiles(files);
  }
  const description = isUploading ? isFinished ? `${uploadsDone} upload${uploadsDone > 1 ? "s" : ""} complete` : `uploading ${todo} file${todo > 1 ? "s" : ""}` : "Upload files";
  useEffect(() => {
    const { body } = document;
    let eventTarget;
    function handleDragEnter(event) {
      eventTarget = event.target;
      setIsOver(true);
    }
    function handleDragOver(event) {
      event.preventDefault();
    }
    function handleDragLeave(event) {
      if (event.target === eventTarget)
        setIsOver(false);
    }
    function handleDrop(event) {
      event.preventDefault();
      setIsOver(false);
      const files = event.dataTransfer?.files;
      if (files)
        uploadFiles(files);
    }
    body.addEventListener("dragenter", handleDragEnter);
    body.addEventListener("dragover", handleDragOver);
    body.addEventListener("dragleave", handleDragLeave);
    body.addEventListener("drop", handleDrop);
    return () => {
      body.removeEventListener("dragenter", handleDragEnter);
      body.removeEventListener("dragover", handleDragOver);
      body.removeEventListener("dragleave", handleDragLeave);
      body.removeEventListener("drop", handleDrop);
    };
  }, [destination]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: styles.root({ over: isOver }),
      style: {
        [position]: 0
      },
      children: /* @__PURE__ */ jsxs(VStack, { className: styles.root.content(), children: [
        /* @__PURE__ */ jsxs(HStack, { as: "header", className: styles.root.header(), children: [
          /* @__PURE__ */ jsxs("label", { className: styles.root.header.label(), children: [
            !readOnly && /* @__PURE__ */ jsx(
              "input",
              {
                type: "file",
                className: styles.root.header.label.input(),
                multiple: max !== 1,
                onChange: handleFileInput
              }
            ),
            /* @__PURE__ */ jsxs(HStack, { center: true, gap: 8, children: [
              /* @__PURE__ */ jsx(Icon, { icon: IcOutlineCloudUpload, size: 17 }),
              /* @__PURE__ */ jsx("span", { children: description })
            ] })
          ] }),
          isUploading && /* @__PURE__ */ jsx(
            "button",
            {
              onClick: () => setShowUploads(!showUploads),
              className: styles.root.header.close(),
              children: /* @__PURE__ */ jsx(
                Icon,
                {
                  icon: showUploads ? IcRoundKeyboardArrowDown : IcRoundKeyboardArrowUp,
                  size: 18
                }
              )
            }
          )
        ] }),
        showUploads && /* @__PURE__ */ jsx("div", { className: styles.root.uploads(), children: uploads.map((upload2) => {
          return /* @__PURE__ */ jsx("div", { className: styles.root.uploads.row(), children: /* @__PURE__ */ jsx(FileUploadRow, { ...upload2 }) }, upload2.id);
        }) })
      ] })
    }
  );
}
export {
  FileUploader
};