@armco/uploader 0.0.1

package/cjs/Uploader.js

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".ar-Uploader .ar-Uploader__file-uploader-progress-bar{transition:max-height .3s,opacity .3s,padding .3s,margin-bottom .3s,background-color .3s;opacity:0;max-height:0}.ar-Uploader .ar-Uploader__file-uploader-progress-bar.show{opacity:1;max-height:4rem}.ar-Uploader .ar-Uploader__file-uploader-progress-bar:hover{background-color:var(--ar-bg-hover-6)}.ar-Uploader .ar-Button.loading .pre{animation:rotating .5s linear infinite}.ar-Uploader:not(.compact):not(.image-rect):not(.image-circle) .ar-Uploader__file-input{transition:border .3s ease-in-out;border:1px dashed lightgrey;border-radius:.5rem;padding:.5rem;background-color:var(--ar-bg-base)}.ar-Uploader:not(.compact):not(.image-rect):not(.image-circle) .ar-Uploader__file-input:has(.ar-Avatar.FAILED){border-color:var(--ar-color-danger-soft)}.ar-Uploader .ar-Uploader__upload-prompt-text{color:var(--ar-color-obscure-4)}.ar-Uploader .ar-Uploader__upload-message{color:var(--ar-color-obscure-2)}")),document.head.appendChild(r)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+"use strict";const ie=require("./useUpload.js"),s=require("react/jsx-runtime"),c=require("react"),C=require("uuid"),oe=require("react-dnd-html5-backend"),a=require("@armco/types"),ce=require("@armco/utils/hooks"),de=require("@armco/utils/helper"),ue=require("@armco/utils/network"),me=require("@armco/shared-components/Droppable"),W=require("@armco/shared-components/Button"),fe=require("@armco/shared-components/Text"),pe=require("@armco/shared-components/ProgressIndicator"),ge=require("@armco/shared-components/Tooltip"),xe=require("@armco/configs/endpoints"),P=require("@armco/avatar"),_=require("@armco/icon");const he=({clear:i,demo:n,disabled:p,result:d})=>{const[F,A]=c.useState(),[T,u]=c.useState();c.useEffect(()=>{u(!0)},[]);const b=d.type==="image",I=s.jsx(pe,{label:d.file.name,preIcon:b?"":"im.ImAttachment",progress:d.progress,slot:a.ArPopoverSlots.ANCHOR,rightEndContent:(F||d.status===a.ArProgress.FAILED)&&s.jsx(_,{icon:"ri.RiDeleteBin6Fill",attributes:{colors:{fillColor:d.status===a.ArProgress.FAILED?"#ff4d4f":"grey"},classes:p?"":"cursor-pointer"},events:{onClick:()=>{p||(u(!1),setTimeout(i,300))}}}),status:d.status,thumbnailRenderer:()=>b?s.jsx(P,{classes:"me-3",item:d,size:a.ArSizes.XSMALL,variant:"circle",viewOnly:!0}):null}),R=x=>typeof x=="string"?x:x.error||x.message||"Server Error";return s.jsx("div",{className:`ar-Uploader__file-uploader-progress-bar position-relative ${T?" show p-1 border-radius l1 mb-1 cursor-pointer":" px-1"} ${d.status}`,onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1),children:d.status===a.ArProgress.FAILED?s.jsxs(ge,{demo:n,children:[I,s.jsx("span",{slot:a.ArPopoverSlots.POPOVER,children:R(d.error)})]}):I})},ye=c.memo(i=>{const{acceptedFileTypes:n,acceptedFileCount:p,afterUpload:d,allowMultiple:F,beforeUpload:A,demo:T,disabled:u,uploadEntryRenderer:b,errorMessage:I="Failed to upload",endpoint:R,fileSizeLimit:x="5mb",files:g,handler:V,message:U,onFileSelected:q,avatarSize:J=a.ArSizes.REGULAR,variant:r="compact",theme:K,updateEndpoint:M,uploadSequential:X,uploadButtonText:w="Upload",uploadingButtonText:z="Uploading..."}=i,m=c.useRef(null),{notify:j}=ce.useNotification(),[t,$]=c.useState(),[v,D]=c.useState(),[L,B]=c.useState(),[N,k]=c.useState(),Y=c.useMemo(()=>v?p!==void 0?g==null?void 0:g.slice(0,p):g:g==null?void 0:g.slice(0,1),[g]),{clear:E,upload:Q,results:O}=ie(R||V||"",X,Y),h=r==="image-circle"||r==="image-rect";c.useEffect(()=>{$(O),(!O||Object.keys(O).length===0)&&m.current&&(m.current.value="");let e;t&&Object.keys(t).length>0&&Object.keys(t).every(l=>{const o=t[l];return e||(e=o.status===a.ArProgress.FAILED),o.status===a.ArProgress.FAILED}),e&&k(I)},[O]),c.useEffect(()=>{D(F)},[F]),c.useEffect(()=>{B(n)},[n]),c.useEffect(()=>{h&&(D(!1),B(["image/jpeg","image/png","image/gif","image/svg+xml"]))},[h]);const G=e=>{const l=de.convertToBytes(x);let o;try{o=p!==void 0&&(typeof p=="number"?p:parseInt(p))}catch{console.warn("Incorrect prop acceptedFileCount supplied, should be a numeric value")}if(typeof o=="number"&&e&&e.length+Object.keys(t||{}).length>o)k("Exceeded allowed number of files."),j({message:"You've selected more then allowed number of files",type:a.ArAlertType.WARNING,uid:C.v4()});else if(e.findIndex(f=>f.size>l)>-1){const f=`${v?"One or more files exceed ":"Selected file exceeds "}specified size limit of ${x}`;k(f),j({message:f,type:a.ArAlertType.WARNING,uid:C.v4()})}else e&&e.length>0&&(Q(e,d,v),q&&q(e))},Z=e=>{var o;k("");const l=Array.from((o=e.target||e.dataTransfer)==null?void 0:o.files);(!A||A(l,()=>G(l)))&&G(l)},y=t&&Object.keys(t).findIndex(e=>t[e].status===a.ArProgress.IN_PROGRESS)>-1,ee=!!(t&&Object.keys(t).length>0&&Object.keys(t).every(e=>{const l=t[e];return l.status===a.ArProgress.COMPLETED||l.status===a.ArProgress.FAILED})),S=t&&t[Object.keys(t)[0]],te=e=>{if(t&&S){const l=Object.keys(t).find(o=>o.startsWith(S.file.name));if(l){const o={...t[l]};o.imageProps=e,t[l]=o,$({...t})}}},se=e=>{if(t&&S){const l=Object.keys(t).find(o=>o.startsWith(S.file.name));if(l){const o=t[l];let f=M||R;if(f){const ne=process.env.NODE_ENV||"development";f=(f.startsWith("http")?"":xe.API_CONFIG.STATIC_HOST[ne])+f,ue.put(f,o).then(ae=>{ae.status===200?j({message:"Image updaetd successfully!",type:a.ArAlertType.SUCCESS,uid:C.v4()}):j({message:"Failed to update image!",type:a.ArAlertType.ERROR,uid:C.v4()})})}else j({message:"Missing image update URL",type:a.ArAlertType.WARNING,uid:C.v4()})}}},H=s.jsxs("div",{className:`ar-Uploader__file-input flex-v-center${y?" disabled":""}${r!=="compact"&&!y&&!u?" cursor-pointer":""}${r==="large"?" flex-h-center flex-column p-3":" justify-content-between"}${r==="image-circle"?" border-radius-50":""}`,onClick:()=>{var e;return r!=="compact"&&!y&&!u&&((e=m.current)==null?void 0:e.click())},children:[h?s.jsx(P,{clearImage:E,demo:T,variant:r==="image-circle"?"circle":"rect",item:S,onChange:te,onCommit:se,size:J,uploadButtonText:w,uploadingButtonText:z}):s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"ar-Uploader__file-input__prompt d-flex flex-column",children:[s.jsx("div",{className:`d-inline-flex ${r==="large"?" flex-center flex-column":"flex-v-center"}`,children:r==="compact"?s.jsxs(s.Fragment,{children:[s.jsx(W,{classes:y?"loading":"",content:y?z:w,preIcon:y?"ri.RiLoader5Fill":ee?N?"fa.FaExclamation":"fa.FaCheck":"md.MdOutlineFileUpload",onClick:()=>{var e;return(e=m.current)==null?void 0:e.click()},theme:K,disabled:u||y}),t&&Object.keys(t).length>0&&r==="compact"&&s.jsxs(s.Fragment,{children:[v?s.jsx("span",{className:"fw-bold flex-v-center ms-3",children:`(${Object.keys(t).length} file${Object.keys(t).length>1?"s":""})`}):s.jsx(fe,{classes:"fw-bold flex-v-center ms-3 text-decoration-underline",descriptor:{id:"temp-text-id",order:0,name:"Text",text:t[Object.keys(t)[0]].file.name,chunks:{}},overflowEllipsis:!0,overflowTooltip:!0}),s.jsx(_,{icon:"io5.IoClose",attributes:{colors:{fillColor:"red"},classes:`ms-2 ${u?"":"cursor-pointer"}`},events:{onClick:()=>{u&&(E(),m.current&&(m.current.value=""))}}})]})]}):s.jsxs(s.Fragment,{children:[s.jsx(_,{icon:"io5.IoFileTrayOutline",attributes:{colors:{fillColor:"#1677ff"},classes:r==="large"?"mb-2":"me-3",size:r==="large"?"3rem":"1rem"}}),s.jsx("span",{className:`ar-Uploader__upload-prompt-text${r==="large"?" h5 mb-0":""}`,children:"Click or drag files here to upload"})]})}),U&&s.jsx("small",{className:`ar-Uploader__upload-message text-decoration-underline ${r==="large"?"fw-bold f3 mt-2 mb-2":"mt-1"}`,children:U})]}),s.jsx("div",{className:"ar-Uploader__file-input__actions",children:r!=="compact"&&t&&Object.keys(t).length>0&&s.jsx(W,{containerClasses:`text-end${r==="large"?" mt-3":""}`,content:"Clear",variant:a.ArButtonVariants.DANGER,size:r==="regular"?a.ArSizes.XSMALL:a.ArSizes.SMALL,onClick:e=>{e.stopPropagation(),E(),m.current&&(m.current.value="")}})})]}),s.jsx("input",{className:"ar-Uploader__input d-none",type:"file",onChange:Z,ref:m,title:"file-uploader",accept:Array.isArray(L)?L.join(","):L,disabled:u,multiple:v})]}),re=N&&s.jsx("span",{className:"error my-1 small",children:N}),le=t&&r!=="compact"&&s.jsx("div",{className:"ar-Uploader__file-upload-progress mt-2",children:Object.entries(t).map(([e,l])=>b?b(l,()=>E(e)):s.jsx(he,{clear:()=>E(e),demo:!!T,disabled:!!u,result:l},e))});return s.jsxs("div",{className:`ar-Uploader d-flex flex-column${r?" "+r:""}${h?" flex-center":" w-100"}`,onDragOver:e=>e.preventDefault(),onDragLeave:e=>e.preventDefault(),children:[r!=="compact"?s.jsx(me,{dropHandler:e=>{m.current&&!u&&(m.current.files=e.dataTransfer.files,m.current.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})))},acceptTypes:[oe.NativeTypes.FILE],hideHoverEffect:h||u,children:H}):H,!h&&re,!h&&le]})},(i,n)=>i.acceptedFileTypes===n.acceptedFileTypes&&i.acceptedFileCount===n.acceptedFileCount&&i.allowMultiple===n.allowMultiple&&i.disabled===n.disabled&&i.errorMessage===n.errorMessage&&i.endpoint===n.endpoint&&i.fileSizeLimit===n.fileSizeLimit&&JSON.stringify(i.files)===JSON.stringify(n.files)&&i.message===n.message&&i.avatarSize===n.avatarSize&&i.variant===n.variant&&i.theme===n.theme&&i.uploadSequential===n.uploadSequential&&i.uploadButtonText===n.uploadButtonText&&i.uploadingButtonText===n.uploadingButtonText);module.exports=ye;

package/cjs/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useUpload.js"),r=require("./Uploader.js");require("react");require("@armco/types");require("@armco/utils/helper");require("@armco/utils/network");require("react/jsx-runtime");require("uuid");require("react-dnd-html5-backend");require("@armco/utils/hooks");require("@armco/shared-components/Droppable");require("@armco/shared-components/Button");require("@armco/shared-components/Text");require("@armco/shared-components/ProgressIndicator");require("@armco/shared-components/Tooltip");require("@armco/configs/endpoints");require("@armco/avatar");require("@armco/icon");exports.useUpload=e;exports.Uploader=r;

package/cjs/useUpload.js

@@ -0,0 +1 @@
+"use strict";const f=require("react"),E=require("@armco/types"),g=require("@armco/utils/helper"),P=require("@armco/utils/network"),S={status:E.ArProgress.COMPLETED,progress:100},d={status:E.ArProgress.FAILED,progress:0},A=(i,p,h)=>{const[l,o]=f.useState(),u=f.useRef({}),c=f.useRef({});f.useEffect(()=>{if(h){const e={};h==null||h.forEach(s=>{e[g.generateFileKey(s)]={...s,progress:100,status:E.ArProgress.COMPLETED,file:typeof s=="object"?s:{name:s.name}}}),o(e)}},[h]),f.useEffect(()=>{const e=c.current;return()=>{Object.keys(e).forEach(s=>clearInterval(e[s]))}},[c]);const v=e=>{if(e){const s={...l};delete s[e],o(s),u.current[e]=!0,clearInterval(c.current[e])}else o(void 0),l&&Object.keys(l).forEach(s=>l[s].status===E.ArProgress.IN_PROGRESS&&(u.current[s]=!0)),Object.keys(c.current).forEach(s=>clearInterval(c.current[s]))},R=async e=>{const y=typeof i=="function"?i:null,r=g.generateFileKey(e);return c.current[r]=setInterval(()=>{o(n=>{const t=n&&n[r];if(!t||t.progress>=95)return c.current&&clearInterval(c.current[r]),n;const a=Math.floor(Math.random()*8)+5;return{...n,[r]:{...t,progress:t.progress+a}}})},500),y?await y(e).then(n=>{u.current[r]||(n.ok||o(t=>({...t,[r]:{file:e,...d}})),o(t=>({...t,[r]:{file:e,...S}})))}).catch(()=>{u.current[r]||o(n=>({...n,[r]:{file:e,...d}}))}).finally(()=>{c.current&&clearInterval(c.current[r])}):await P.upload(i,e).then(n=>{if(u.current[r])delete u.current[r],delete c.current[r];else{if(!n.body){o(a=>({...a,[r]:{file:e,...d,error:n.body,httpStatus:n.status}}));return}const t=n.body.saved[0];o(a=>({...a,[r]:{...t||{},file:e,...S}}))}}).catch(n=>{u.current[r]?(delete u.current[r],delete c.current[r]):o(t=>({...t,[r]:{file:e,...d,error:n}}))}).finally(()=>{c.current&&clearInterval(c.current[r])})};return{clear:v,upload:async(e,s,y)=>{const r={};e.forEach(t=>{const a=g.generateFileKey(t);r[a]={file:t,status:E.ArProgress.IN_PROGRESS,progress:p?1:Math.floor(Math.random()*10)}}),o(y?{...l,...r}:r);let n=[];for(const t of e)p?n.push(await R(t)):n.push(R(t));await Promise.allSettled(n).then(t=>s&&s(t))},results:l}};module.exports=A;

package/es/Uploader.js

@@ -0,0 +1,383 @@
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".ar-Uploader .ar-Uploader__file-uploader-progress-bar{transition:max-height .3s,opacity .3s,padding .3s,margin-bottom .3s,background-color .3s;opacity:0;max-height:0}.ar-Uploader .ar-Uploader__file-uploader-progress-bar.show{opacity:1;max-height:4rem}.ar-Uploader .ar-Uploader__file-uploader-progress-bar:hover{background-color:var(--ar-bg-hover-6)}.ar-Uploader .ar-Button.loading .pre{animation:rotating .5s linear infinite}.ar-Uploader:not(.compact):not(.image-rect):not(.image-circle) .ar-Uploader__file-input{transition:border .3s ease-in-out;border:1px dashed lightgrey;border-radius:.5rem;padding:.5rem;background-color:var(--ar-bg-base)}.ar-Uploader:not(.compact):not(.image-rect):not(.image-circle) .ar-Uploader__file-input:has(.ar-Avatar.FAILED){border-color:var(--ar-color-danger-soft)}.ar-Uploader .ar-Uploader__upload-prompt-text{color:var(--ar-color-obscure-4)}.ar-Uploader .ar-Uploader__upload-message{color:var(--ar-color-obscure-2)}")),document.head.appendChild(r)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import me from "./useUpload.js";
+import { jsxs as p, jsx as r, Fragment as M } from "react/jsx-runtime";
+import { memo as ue, useRef as fe, useState as x, useMemo as pe, useEffect as L } from "react";
+import { v4 as O } from "uuid";
+import { NativeTypes as ge } from "react-dnd-html5-backend";
+import { ArSizes as j, ArProgress as g, ArButtonVariants as he, ArPopoverSlots as Y, ArAlertType as R } from "@armco/types";
+import { useNotification as ye } from "@armco/utils/hooks";
+import { convertToBytes as be } from "@armco/utils/helper";
+import { put as xe } from "@armco/utils/network";
+import ve from "@armco/shared-components/Droppable";
+import Q from "@armco/shared-components/Button";
+import Ce from "@armco/shared-components/Text";
+import Ae from "@armco/shared-components/ProgressIndicator";
+import Ee from "@armco/shared-components/Tooltip";
+import { API_CONFIG as Ie } from "@armco/configs/endpoints";
+import Z from "@armco/avatar";
+import D from "@armco/icon";
+const Fe = ({
+  clear: n,
+  demo: o,
+  disabled: u,
+  result: s
+}) => {
+  const [S, v] = x(), [T, c] = x();
+  L(() => {
+    c(!0);
+  }, []);
+  const C = s.type === "image", k = /* @__PURE__ */ r(
+    Ae,
+    {
+      label: s.file.name,
+      preIcon: C ? "" : "im.ImAttachment",
+      progress: s.progress,
+      slot: Y.ANCHOR,
+      rightEndContent: (S || s.status === g.FAILED) && /* @__PURE__ */ r(
+        D,
+        {
+          icon: "ri.RiDeleteBin6Fill",
+          attributes: {
+            colors: {
+              fillColor: s.status === g.FAILED ? "#ff4d4f" : "grey"
+            },
+            classes: u ? "" : "cursor-pointer"
+          },
+          events: {
+            onClick: () => {
+              u || (c(!1), setTimeout(n, 300));
+            }
+          }
+        }
+      ),
+      status: s.status,
+      thumbnailRenderer: () => C ? /* @__PURE__ */ r(
+        Z,
+        {
+          classes: "me-3",
+          item: s,
+          size: j.XSMALL,
+          variant: "circle",
+          viewOnly: !0
+        }
+      ) : null
+    }
+  ), N = (h) => typeof h == "string" ? h : h.error || h.message || "Server Error";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: `ar-Uploader__file-uploader-progress-bar position-relative ${T ? " show p-1 border-radius l1 mb-1 cursor-pointer" : " px-1"} ${s.status}`,
+      onMouseEnter: () => v(!0),
+      onMouseLeave: () => v(!1),
+      children: s.status === g.FAILED ? /* @__PURE__ */ p(Ee, { demo: o, children: [
+        k,
+        /* @__PURE__ */ r("span", { slot: Y.POPOVER, children: N(s.error) })
+      ] }) : k
+    }
+  );
+}, Je = ue(
+  (n) => {
+    const {
+      acceptedFileTypes: o,
+      acceptedFileCount: u,
+      afterUpload: s,
+      allowMultiple: S,
+      beforeUpload: v,
+      demo: T,
+      disabled: c,
+      uploadEntryRenderer: C,
+      errorMessage: k = "Failed to upload",
+      endpoint: N,
+      fileSizeLimit: h = "5mb",
+      files: f,
+      handler: P,
+      message: z,
+      onFileSelected: B,
+      avatarSize: ee = j.REGULAR,
+      variant: l = "compact",
+      theme: te,
+      updateEndpoint: G,
+      uploadSequential: le,
+      uploadButtonText: W = "Upload",
+      uploadingButtonText: H = "Uploading..."
+    } = n, d = fe(null), { notify: A } = ye(), [t, q] = x(), [E, V] = x(), [w, J] = x(), [$, _] = x(), ae = pe(
+      () => E ? u !== void 0 ? f == null ? void 0 : f.slice(0, u) : f : f == null ? void 0 : f.slice(0, 1),
+      [f]
+    ), { clear: I, upload: re, results: U } = me(
+      N || P || "",
+      le,
+      ae
+    ), y = l === "image-circle" || l === "image-rect";
+    L(() => {
+      q(U), (!U || Object.keys(U).length === 0) && d.current && (d.current.value = "");
+      let e;
+      t && Object.keys(t).length > 0 && Object.keys(t).every((a) => {
+        const i = t[a];
+        return e || (e = i.status === g.FAILED), i.status === g.FAILED;
+      }), e && _(k);
+    }, [U]), L(() => {
+      V(S);
+    }, [S]), L(() => {
+      J(o);
+    }, [o]), L(() => {
+      y && (V(!1), J([
+        "image/jpeg",
+        "image/png",
+        "image/gif",
+        "image/svg+xml"
+      ]));
+    }, [y]);
+    const K = (e) => {
+      const a = be(h);
+      let i;
+      try {
+        i = u !== void 0 && (typeof u == "number" ? u : parseInt(u));
+      } catch {
+        console.warn(
+          "Incorrect prop acceptedFileCount supplied, should be a numeric value"
+        );
+      }
+      if (typeof i == "number" && e && e.length + Object.keys(t || {}).length > i)
+        _("Exceeded allowed number of files."), A({
+          message: "You've selected more then allowed number of files",
+          type: R.WARNING,
+          uid: O()
+        });
+      else if (e.findIndex((m) => m.size > a) > -1) {
+        const m = `${E ? "One or more files exceed " : "Selected file exceeds "}specified size limit of ${h}`;
+        _(m), A({
+          message: m,
+          type: R.WARNING,
+          uid: O()
+        });
+      } else
+        e && e.length > 0 && (re(e, s, E), B && B(e));
+    }, oe = (e) => {
+      var i;
+      _("");
+      const a = Array.from(
+        (i = e.target || e.dataTransfer) == null ? void 0 : i.files
+      );
+      (!v || v(a, () => K(a))) && K(a);
+    }, b = t && Object.keys(t).findIndex((e) => t[e].status === g.IN_PROGRESS) > -1, ne = !!(t && Object.keys(t).length > 0 && Object.keys(t).every((e) => {
+      const a = t[e];
+      return a.status === g.COMPLETED || a.status === g.FAILED;
+    })), F = t && t[Object.keys(t)[0]], X = /* @__PURE__ */ p(
+      "div",
+      {
+        className: `ar-Uploader__file-input flex-v-center${b ? " disabled" : ""}${l !== "compact" && !b && !c ? " cursor-pointer" : ""}${l === "large" ? " flex-h-center flex-column p-3" : " justify-content-between"}${l === "image-circle" ? " border-radius-50" : ""}`,
+        onClick: () => {
+          var e;
+          return l !== "compact" && !b && !c && ((e = d.current) == null ? void 0 : e.click());
+        },
+        children: [
+          y ? /* @__PURE__ */ r(
+            Z,
+            {
+              clearImage: I,
+              demo: T,
+              variant: l === "image-circle" ? "circle" : "rect",
+              item: F,
+              onChange: (e) => {
+                if (t && F) {
+                  const a = Object.keys(t).find(
+                    (i) => i.startsWith(F.file.name)
+                  );
+                  if (a) {
+                    const i = { ...t[a] };
+                    i.imageProps = e, t[a] = i, q({ ...t });
+                  }
+                }
+              },
+              onCommit: (e) => {
+                if (t && F) {
+                  const a = Object.keys(t).find(
+                    (i) => i.startsWith(F.file.name)
+                  );
+                  if (a) {
+                    const i = t[a];
+                    let m = G || N;
+                    if (m) {
+                      const ce = process.env.NODE_ENV || "development";
+                      m = (m.startsWith("http") ? "" : Ie.STATIC_HOST[ce]) + m, xe(m, i).then((de) => {
+                        de.status === 200 ? A({
+                          message: "Image updaetd successfully!",
+                          type: R.SUCCESS,
+                          uid: O()
+                        }) : A({
+                          message: "Failed to update image!",
+                          type: R.ERROR,
+                          uid: O()
+                        });
+                      });
+                    } else
+                      A({
+                        message: "Missing image update URL",
+                        type: R.WARNING,
+                        uid: O()
+                      });
+                  }
+                }
+              },
+              size: ee,
+              uploadButtonText: W,
+              uploadingButtonText: H
+            }
+          ) : /* @__PURE__ */ p(M, { children: [
+            /* @__PURE__ */ p("div", { className: "ar-Uploader__file-input__prompt d-flex flex-column", children: [
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  className: `d-inline-flex ${l === "large" ? " flex-center flex-column" : "flex-v-center"}`,
+                  children: l === "compact" ? /* @__PURE__ */ p(M, { children: [
+                    /* @__PURE__ */ r(
+                      Q,
+                      {
+                        classes: b ? "loading" : "",
+                        content: b ? H : W,
+                        preIcon: b ? "ri.RiLoader5Fill" : ne ? $ ? "fa.FaExclamation" : "fa.FaCheck" : "md.MdOutlineFileUpload",
+                        onClick: () => {
+                          var e;
+                          return (e = d.current) == null ? void 0 : e.click();
+                        },
+                        theme: te,
+                        disabled: c || b
+                      }
+                    ),
+                    t && Object.keys(t).length > 0 && l === "compact" && /* @__PURE__ */ p(M, { children: [
+                      E ? /* @__PURE__ */ r("span", { className: "fw-bold flex-v-center ms-3", children: `(${Object.keys(t).length} file${Object.keys(t).length > 1 ? "s" : ""})` }) : /* @__PURE__ */ r(
+                        Ce,
+                        {
+                          classes: "fw-bold flex-v-center ms-3 text-decoration-underline",
+                          descriptor: {
+                            id: "temp-text-id",
+                            order: 0,
+                            name: "Text",
+                            text: t[Object.keys(t)[0]].file.name,
+                            chunks: {}
+                          },
+                          overflowEllipsis: !0,
+                          overflowTooltip: !0
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        D,
+                        {
+                          icon: "io5.IoClose",
+                          attributes: {
+                            colors: {
+                              fillColor: "red"
+                            },
+                            classes: `ms-2 ${c ? "" : "cursor-pointer"}`
+                          },
+                          events: {
+                            onClick: () => {
+                              c && (I(), d.current && (d.current.value = ""));
+                            }
+                          }
+                        }
+                      )
+                    ] })
+                  ] }) : /* @__PURE__ */ p(M, { children: [
+                    /* @__PURE__ */ r(
+                      D,
+                      {
+                        icon: "io5.IoFileTrayOutline",
+                        attributes: {
+                          colors: {
+                            fillColor: "#1677ff"
+                          },
+                          classes: l === "large" ? "mb-2" : "me-3",
+                          size: l === "large" ? "3rem" : "1rem"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: `ar-Uploader__upload-prompt-text${l === "large" ? " h5 mb-0" : ""}`,
+                        children: "Click or drag files here to upload"
+                      }
+                    )
+                  ] })
+                }
+              ),
+              z && /* @__PURE__ */ r(
+                "small",
+                {
+                  className: `ar-Uploader__upload-message text-decoration-underline ${l === "large" ? "fw-bold f3 mt-2 mb-2" : "mt-1"}`,
+                  children: z
+                }
+              )
+            ] }),
+            /* @__PURE__ */ r("div", { className: "ar-Uploader__file-input__actions", children: l !== "compact" && t && Object.keys(t).length > 0 && /* @__PURE__ */ r(
+              Q,
+              {
+                containerClasses: `text-end${l === "large" ? " mt-3" : ""}`,
+                content: "Clear",
+                variant: he.DANGER,
+                size: l === "regular" ? j.XSMALL : j.SMALL,
+                onClick: (e) => {
+                  e.stopPropagation(), I(), d.current && (d.current.value = "");
+                }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              className: "ar-Uploader__input d-none",
+              type: "file",
+              onChange: oe,
+              ref: d,
+              title: "file-uploader",
+              accept: Array.isArray(w) ? w.join(",") : w,
+              disabled: c,
+              multiple: E
+            }
+          )
+        ]
+      }
+    ), ie = $ && /* @__PURE__ */ r("span", { className: "error my-1 small", children: $ }), se = t && l !== "compact" && /* @__PURE__ */ r("div", { className: "ar-Uploader__file-upload-progress mt-2", children: Object.entries(t).map(
+      ([e, a]) => C ? C(a, () => I(e)) : /* @__PURE__ */ r(
+        Fe,
+        {
+          clear: () => I(e),
+          demo: !!T,
+          disabled: !!c,
+          result: a
+        },
+        e
+      )
+    ) });
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        className: `ar-Uploader d-flex flex-column${l ? " " + l : ""}${y ? " flex-center" : " w-100"}`,
+        onDragOver: (e) => e.preventDefault(),
+        onDragLeave: (e) => e.preventDefault(),
+        children: [
+          l !== "compact" ? /* @__PURE__ */ r(
+            ve,
+            {
+              dropHandler: (e) => {
+                d.current && !c && (d.current.files = e.dataTransfer.files, d.current.dispatchEvent(
+                  new Event("change", { bubbles: !0, cancelable: !0 })
+                ));
+              },
+              acceptTypes: [ge.FILE],
+              hideHoverEffect: y || c,
+              children: X
+            }
+          ) : X,
+          !y && ie,
+          !y && se
+        ]
+      }
+    );
+  },
+  (n, o) => n.acceptedFileTypes === o.acceptedFileTypes && n.acceptedFileCount === o.acceptedFileCount && n.allowMultiple === o.allowMultiple && n.disabled === o.disabled && n.errorMessage === o.errorMessage && n.endpoint === o.endpoint && n.fileSizeLimit === o.fileSizeLimit && JSON.stringify(n.files) === JSON.stringify(o.files) && n.message === o.message && n.avatarSize === o.avatarSize && n.variant === o.variant && n.theme === o.theme && n.uploadSequential === o.uploadSequential && n.uploadButtonText === o.uploadButtonText && n.uploadingButtonText === o.uploadingButtonText
+);
+export {
+  Je as default
+};

package/es/index.js

@@ -0,0 +1,22 @@
+import { default as h } from "./useUpload.js";
+import { default as k } from "./Uploader.js";
+import "react";
+import "@armco/types";
+import "@armco/utils/helper";
+import "@armco/utils/network";
+import "react/jsx-runtime";
+import "uuid";
+import "react-dnd-html5-backend";
+import "@armco/utils/hooks";
+import "@armco/shared-components/Droppable";
+import "@armco/shared-components/Button";
+import "@armco/shared-components/Text";
+import "@armco/shared-components/ProgressIndicator";
+import "@armco/shared-components/Tooltip";
+import "@armco/configs/endpoints";
+import "@armco/avatar";
+import "@armco/icon";
+export {
+  k as Uploader,
+  h as useUpload
+};

package/es/useUpload.js

@@ -0,0 +1,123 @@
+import { useState as I, useRef as S, useEffect as v } from "react";
+import { ArProgress as d } from "@armco/types";
+import { generateFileKey as m } from "@armco/utils/helper";
+import { upload as b } from "@armco/utils/network";
+const R = {
+  status: d.COMPLETED,
+  progress: 100
+}, p = {
+  status: d.FAILED,
+  progress: 0
+}, C = (E, y, f) => {
+  const [l, o] = I(), a = S({}), c = S({});
+  v(() => {
+    if (f) {
+      const t = {};
+      f == null || f.forEach((n) => {
+        t[m(n)] = {
+          ...n,
+          progress: 100,
+          status: d.COMPLETED,
+          file: typeof n == "object" ? n : { name: n.name }
+        };
+      }), o(t);
+    }
+  }, [f]), v(() => {
+    const t = c.current;
+    return () => {
+      Object.keys(t).forEach((n) => clearInterval(t[n]));
+    };
+  }, [c]);
+  const g = (t) => {
+    if (t) {
+      const n = { ...l };
+      delete n[t], o(n), a.current[t] = !0, clearInterval(c.current[t]);
+    } else
+      o(void 0), l && Object.keys(l).forEach(
+        (n) => l[n].status === d.IN_PROGRESS && (a.current[n] = !0)
+      ), Object.keys(c.current).forEach(
+        (n) => clearInterval(c.current[n])
+      );
+  }, i = async (t) => {
+    const h = typeof E == "function" ? E : null, r = m(t);
+    return c.current[r] = setInterval(() => {
+      o((s) => {
+        const e = s && s[r];
+        if (!e || e.progress >= 95)
+          return c.current && clearInterval(c.current[r]), s;
+        const u = Math.floor(Math.random() * 8) + 5;
+        return {
+          ...s,
+          [r]: {
+            ...e,
+            progress: e.progress + u
+          }
+        };
+      });
+    }, 500), h ? await h(t).then((s) => {
+      a.current[r] || (s.ok || o((e) => ({
+        ...e,
+        [r]: { file: t, ...p }
+      })), o((e) => ({
+        ...e,
+        [r]: { file: t, ...R }
+      })));
+    }).catch(() => {
+      a.current[r] || o((s) => ({
+        ...s,
+        [r]: { file: t, ...p }
+      }));
+    }).finally(() => {
+      c.current && clearInterval(c.current[r]);
+    }) : await b(E, t).then((s) => {
+      if (a.current[r])
+        delete a.current[r], delete c.current[r];
+      else {
+        if (!s.body) {
+          o((u) => ({
+            ...u,
+            [r]: {
+              file: t,
+              ...p,
+              error: s.body,
+              httpStatus: s.status
+            }
+          }));
+          return;
+        }
+        const e = s.body.saved[0];
+        o((u) => ({
+          ...u,
+          [r]: { ...e || {}, file: t, ...R }
+        }));
+      }
+    }).catch((s) => {
+      a.current[r] ? (delete a.current[r], delete c.current[r]) : o((e) => ({
+        ...e,
+        [r]: { file: t, ...p, error: s }
+      }));
+    }).finally(() => {
+      c.current && clearInterval(c.current[r]);
+    });
+  };
+  return { clear: g, upload: async (t, n, h) => {
+    const r = {};
+    t.forEach((e) => {
+      const u = m(e);
+      r[u] = {
+        file: e,
+        status: d.IN_PROGRESS,
+        progress: y ? 1 : Math.floor(Math.random() * 10)
+      };
+    }), o(h ? { ...l, ...r } : r);
+    let s = [];
+    for (const e of t)
+      y ? s.push(await i(e)) : s.push(i(e));
+    await Promise.allSettled(s).then(
+      (e) => n && n(e)
+    );
+  }, results: l };
+};
+export {
+  C as default
+};

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@armco/uploader",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "cjs/index.js",
+  "module": "es/index.js",
+  "types": "types/index.d.ts",
+  "scripts": {
+    "*": "rm -rf build && tsc && vite build",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "publish:sh": "./publish.sh",
+    "publish:local": "./publish-local.sh"
+  },
+  "dependencies": {
+    "@armco/avatar": "^0.0.1",
+    "@armco/configs": "^0.0.7",
+    "@armco/icon": "^0.0.4",
+    "@armco/shared-components": "^0.0.52",
+    "@armco/types": "^0.0.11",
+    "@armco/utils": "^0.0.17",
+    "react": ">16.8.0",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": ">16.8.0",
+    "uuid": "^10.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^9.2.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.2.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.0.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "glob": "^11.0.0",
+    "jsdom": "^21.1.0",
+    "prettier": "^2.7.1",
+    "prettier-config-nick": "^1.0.2",
+    "sass": "^1.63.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^4.2.2",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vitest": "^0.30.1"
+  },
+  "peerDependencies": {
+    "react": ">16.8.0",
+    "react-dom": ">16.8.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "plugins": [
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": "error",
+      "react/jsx-no-target-blank": "off"
+    }
+  },
+  "prettier": "prettier-config-nick",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ReStruct-Corporate-Advantage/uploader.git"
+  },
+  "keywords": [
+    "components",
+    "atomic",
+    "building-blocks",
+    "foundation"
+  ],
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ReStruct-Corporate-Advantage/uploader/issues"
+  },
+  "homepage": "https://github.com/ReStruct-Corporate-Advantage/uploader#readme"
+}

package/types/Uploader.d.ts

@@ -0,0 +1,3 @@
+import { UploaderProps } from '@armco/types';
+declare const Uploader: import('react').MemoExoticComponent<(props: UploaderProps) => JSX.Element>;
+export default Uploader;

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useUpload } from './useUpload';
+export { default as Uploader } from './Uploader';

package/types/useUpload.d.ts

@@ -0,0 +1,10 @@
+import { FunctionType, UploadHandler, UploadResults } from '@armco/types';
+declare const useUpload: (endpointOrHandler: string | UploadHandler, isSequential?: boolean, files?: Array<File | {
+    name: string;
+    url?: string;
+}>) => {
+    clear: (fileId?: string) => void;
+    upload: (newFiles: File[], callback?: FunctionType, shouldAppend?: boolean) => Promise<void>;
+    results: UploadResults | undefined;
+};
+export default useUpload;