@connect-soft/react-file-upload/dist/index.cjs.js

Component for React - supported drag & drop, upload big files

"use strict";var so=Object.create;var v=Object.defineProperty;var po=Object.getOwnPropertyDescriptor;var lo=Object.getOwnPropertyNames;var uo=Object.getPrototypeOf,co=Object.prototype.hasOwnProperty;var go=(e,n)=>{for(var s in n)v(e,s,{get:n[s],enumerable:!0})},H=(e,n,s,d)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of lo(n))!co.call(e,c)&&c!==s&&v(e,c,{get:()=>n[c],enumerable:!(d=po(n,c))||d.enumerable});return e};var u=(e,n,s)=>(s=e!=null?so(uo(e)):{},H(n||!e||!e.__esModule?v(s,"default",{value:e,enumerable:!0}):s,e)),bo=e=>H(v({},"__esModule",{value:!0}),e);var Co={};go(Co,{FileUpload:()=>U,FileUploadProgress:()=>k,default:()=>ko});module.exports=bo(Co);var J=u(require("@connect-soft/upload-file-lib")),K=u(require("@mui/icons-material/CloudUpload")),Q=u(require("@mui/material/Box")),D=u(require("@mui/material/Grid")),F=u(require("@mui/material/Typography")),a=require("react"),X=require("react-dropzone"),m=u(require("styled-components")),Y=require("uuid");var P=u(require("@mui/material/Box")),V=u(require("@mui/material/LinearProgress")),q=u(require("@mui/material/Typography")),b=require("react/jsx-runtime"),mo=({value:e,...n})=>{let s=Math.min(100,Math.abs(Math.max(0,e)));return(0,b.jsxs)(P.default,{sx:{display:"flex",alignItems:"center"},children:[(0,b.jsx)(P.default,{sx:{width:"100%",mr:1},children:(0,b.jsx)(V.default,{variant:"determinate",...n,value:s})}),(0,b.jsx)(P.default,{sx:{minWidth:35},children:(0,b.jsx)(q.default,{variant:"body2",color:"text.secondary",children:`${Math.round(s)}%`})})]})},k=mo;var t=require("react/jsx-runtime"),xo=m.default.input`
    width: 350px;
    max-width: 100%;
    color: #444;
    padding: 5px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #555;

    &::file-selector-button {
        margin-right: 20px;
        border: none;
        background-color: ${e=>e.disabled?"gray":"#04aa6d"};
        pointer-events: ${e=>e.disabled?"none":null};
        padding: 10px 20px;
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
    }
`,fo=m.default.button`
    background: none;
    color: black;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    transition: 0.3s;

    &:hover {
        background-color: DodgerBlue;
        color: white;
    }
`,ho=m.default.button`
    background-color: ${e=>e.disabled?"gray":"#04aa6d"};
    pointer-events: ${e=>e.disabled?"none":null};
    border-radius: 10px;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
`,yo=m.default.div`
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
`,Io=m.default.div`
    width: 100%;
    padding: 20px;
    border-width: 2px;
    border-radius: 2px;
    border-color: #eeeeee;
    border-style: dashed;
    background-color: #fafafa;
    color: #bdbdbd;
    outline: none;
    transition: border 0.24s ease-in-out;
`,vo=m.default.aside`
    width: 100%;
    text-align: left;
`,Po=({additionalData:e={},apiPath:n,config:s,disabled:d=!1,innerRef:c,labelDialogButton:E=(0,t.jsx)(K.default,{fontSize:"large"}),labelSubmit:L="Upload",maxUploadedSize:f=2e5,requestHeaders:N,slots:h={},titleDropZone:_=(0,t.jsx)(F.default,{variant:"h3",children:"Drop Zone"}),titleFiles:j=(0,t.jsx)(F.default,{variant:"h4",children:"Files"}),withButton:oo=!0,withDropZone:eo=!1,onFinished:C=()=>{},onStart:R=()=>{}})=>{var G,O;let{getRootProps:to,getInputProps:ro,acceptedFiles:S,open:no}=(0,X.useDropzone)({...s,noClick:!0,disabled:d}),[T,Z]=(0,a.useState)(!1),[y,$]=(0,a.useState)(!1),{input:A=(0,t.jsx)(xo,{}),submit:M=(0,t.jsx)(ho,{}),dialogButton:W=(0,t.jsx)(fo,{})}=h,ao=(O=(G=h==null?void 0:h.input)==null?void 0:G.props)!=null?O:{},[o,I]=(0,a.useState)(null),{style:io,...w}=ro();(0,a.useEffect)(()=>{let r=S.map(i=>{var p;return(p=o==null?void 0:o.find(l=>l.content===i))!=null?p:{content:i,uid:(0,Y.v4)(),percentage:0,status:"no"}}).filter(i=>!(o!=null&&o.some(p=>p.uid===i.uid)));r.length&&I([...o!=null?o:[],...r])},[S,o]),(0,a.useEffect)(()=>{let r=!(o!=null&&o.some(i=>i.status==="no"));r!==y&&T&&($(r),Z(!1))},[y,o,T]),(0,a.useEffect)(()=>{y&&C&&C(o!=null&&o.some(({status:r})=>r==="error")?"error":"success",o!=null?o:[])},[y,o,C]);let x=(0,a.useCallback)(()=>{Z(!0),$(!1),o==null||o.filter(r=>r.percentage!==1&&r.status!=="success").forEach(r=>{(0,J.default)(n,r.uid,r.content,f!=null?f:2e5,i=>{I(p=>{var l;return(l=p==null?void 0:p.map(g=>g.uid===r.uid?{...g,percentage:i}:g))!=null?l:null})},N,e).then(i=>{let{status:p,response:l}=i;I(g=>{var z;return(z=g==null?void 0:g.map(B=>B.uid===r.uid?{...B,percentage:1,response:l,status:p==="success"?"success":"error"}:B))!=null?z:null})}).catch(()=>{I(i=>{var p;return(p=i==null?void 0:i.map(l=>l.uid===r.uid?{...l,status:"error"}:l))!=null?p:null})})})},[e,n,o,f,N]);return(0,a.useImperativeHandle)(c,()=>({sendFiles:()=>{R&&R(),x()}}),[x,R]),(0,t.jsxs)(Q.default,{sx:{textAlign:"center"},children:[eo?(0,t.jsxs)(yo,{children:[(0,t.jsxs)(Io,{...to({className:"dropzone"}),children:[(0,t.jsx)("input",{...w,style:io}),_,W?(0,a.cloneElement)(W,{disabled:d,onClick:no,children:E}):(0,t.jsx)("button",{disabled:d,onClick:x,children:E})]}),(0,t.jsxs)(vo,{children:[j,(0,t.jsx)(D.default,{container:!0,rowSpacing:1,direction:"row",children:o==null?void 0:o.map(r=>(0,t.jsxs)(D.default,{item:!0,sx:{width:{xs:"250px",md:"500px"}},children:[r.content.name,(0,t.jsx)(k,{value:r.percentage*100})]},r.uid))})]})]}):(0,t.jsx)(t.Fragment,{children:A?(0,a.cloneElement)(A,{...ao,...w,disabled:d}):(0,t.jsx)("input",{...w,disabled:d})}),oo&&(0,t.jsx)(t.Fragment,{children:M?(0,a.cloneElement)(M,{disabled:d,onClick:x,children:L}):(0,t.jsx)("button",{disabled:d,onClick:x,type:"button",children:L})})]})},U=Po;var ko=U;
//# sourceMappingURL=index.cjs.js.map