synapse-react-client/dist/components/FileUpload/FileUpload.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as g, Fragment as h, jsx as r } from "react/jsx-runtime";
import { uploadFile as y } from "../../synapse-client/SynapseClient.js";
import { useSynapseContext as k } from "../../utils/context/SynapseContext.js";
import { Button as C } from "@mui/material";
import { useRef as F } from "react";
function w(s) {
  const {
    id: a,
    buttonProps: c = { variant: "contained" },
    label: f = "Browse...",
    onUploadStart: l,
    onComplete: o
  } = s, { accessToken: p } = k(), n = F(null), d = () => {
    n?.current && n.current?.click();
  }, u = async (t) => {
    if (t.target.files && t.target.files.length > 0) {
      l && l();
      const i = t.target.files[0], m = (e) => {
        console.log(`Progress: ${e.value} / ${e.total}`);
      };
      try {
        const e = await y(
          p,
          i.name,
          i,
          void 0,
          void 0,
          m
        );
        o && o({
          success: !0,
          resp: e
        });
      } catch (e) {
        console.log("FileUpload: fail to upload file", e), o && o({
          success: !1,
          error: e
        });
      }
    }
  };
  return /* @__PURE__ */ g(h, { children: [
    /* @__PURE__ */ r(
      "input",
      {
        "data-testid": "file-input",
        type: "file",
        ref: n,
        onChange: (t) => {
          u(t);
        },
        style: { display: "none" }
      }
    ),
    /* @__PURE__ */ r(C, { id: a, onClick: d, ...c, children: f })
  ] });
}
export {
  w as FileUpload,
  w as default
};
//# sourceMappingURL=FileUpload.js.map