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

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

import ao from"@connect-soft/upload-file-lib";import io from"@mui/icons-material/CloudUpload";import so from"@mui/material/Box";import G from"@mui/material/Grid";import O from"@mui/material/Typography";import{cloneElement as R,useCallback as po,useEffect as w,useImperativeHandle as lo,useState as B}from"react";import{useDropzone as uo}from"react-dropzone";import d from"styled-components";import{v4 as co}from"uuid";import k from"@mui/material/Box";import eo from"@mui/material/LinearProgress";import to from"@mui/material/Typography";import{jsx as h,jsxs as no}from"react/jsx-runtime";var ro=({value:a,...c})=>{let g=Math.min(100,Math.abs(Math.max(0,a)));return no(k,{sx:{display:"flex",alignItems:"center"},children:[h(k,{sx:{width:"100%",mr:1},children:h(eo,{variant:"determinate",...c,value:g})}),h(k,{sx:{minWidth:35},children:h(to,{variant:"body2",color:"text.secondary",children:`${Math.round(g)}%`})})]})},C=ro;import{Fragment as z,jsx as r,jsxs as u}from"react/jsx-runtime";var go=d.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: ${a=>a.disabled?"gray":"#04aa6d"};
        pointer-events: ${a=>a.disabled?"none":null};
        padding: 10px 20px;
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
    }
`,bo=d.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;
    }
`,mo=d.button`
    background-color: ${a=>a.disabled?"gray":"#04aa6d"};
    pointer-events: ${a=>a.disabled?"none":null};
    border-radius: 10px;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
`,xo=d.div`
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
`,fo=d.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;
`,ho=d.aside`
    width: 100%;
    text-align: left;
`,yo=({additionalData:a={},apiPath:c,config:g,disabled:s=!1,innerRef:V,labelDialogButton:D=r(io,{fontSize:"large"}),labelSubmit:F="Upload",maxUploadedSize:b=2e5,requestHeaders:U,slots:m={},titleDropZone:q=r(O,{variant:"h3",children:"Drop Zone"}),titleFiles:J=r(O,{variant:"h4",children:"Files"}),withButton:K=!0,withDropZone:Q=!1,onFinished:y=()=>{},onStart:I=()=>{}})=>{var A,M;let{getRootProps:X,getInputProps:Y,acceptedFiles:E,open:_}=uo({...g,noClick:!0,disabled:s}),[L,N]=B(!1),[x,S]=B(!1),{input:T=r(go,{}),submit:Z=r(mo,{}),dialogButton:$=r(bo,{})}=m,j=(M=(A=m==null?void 0:m.input)==null?void 0:A.props)!=null?M:{},[o,f]=B(null),{style:oo,...v}=Y();w(()=>{let e=E.map(t=>{var n;return(n=o==null?void 0:o.find(i=>i.content===t))!=null?n:{content:t,uid:co(),percentage:0,status:"no"}}).filter(t=>!(o!=null&&o.some(n=>n.uid===t.uid)));e.length&&f([...o!=null?o:[],...e])},[E,o]),w(()=>{let e=!(o!=null&&o.some(t=>t.status==="no"));e!==x&&L&&(S(e),N(!1))},[x,o,L]),w(()=>{x&&y&&y(o!=null&&o.some(({status:e})=>e==="error")?"error":"success",o!=null?o:[])},[x,o,y]);let l=po(()=>{N(!0),S(!1),o==null||o.filter(e=>e.percentage!==1&&e.status!=="success").forEach(e=>{ao(c,e.uid,e.content,b!=null?b:2e5,t=>{f(n=>{var i;return(i=n==null?void 0:n.map(p=>p.uid===e.uid?{...p,percentage:t}:p))!=null?i:null})},U,a).then(t=>{let{status:n,response:i}=t;f(p=>{var W;return(W=p==null?void 0:p.map(P=>P.uid===e.uid?{...P,percentage:1,response:i,status:n==="success"?"success":"error"}:P))!=null?W:null})}).catch(()=>{f(t=>{var n;return(n=t==null?void 0:t.map(i=>i.uid===e.uid?{...i,status:"error"}:i))!=null?n:null})})})},[a,c,o,b,U]);return lo(V,()=>({sendFiles:()=>{I&&I(),l()}}),[l,I]),u(so,{sx:{textAlign:"center"},children:[Q?u(xo,{children:[u(fo,{...X({className:"dropzone"}),children:[r("input",{...v,style:oo}),q,$?R($,{disabled:s,onClick:_,children:D}):r("button",{disabled:s,onClick:l,children:D})]}),u(ho,{children:[J,r(G,{container:!0,rowSpacing:1,direction:"row",children:o==null?void 0:o.map(e=>u(G,{item:!0,sx:{width:{xs:"250px",md:"500px"}},children:[e.content.name,r(C,{value:e.percentage*100})]},e.uid))})]})]}):r(z,{children:T?R(T,{...j,...v,disabled:s}):r("input",{...v,disabled:s})}),K&&r(z,{children:Z?R(Z,{disabled:s,onClick:l,children:F}):r("button",{disabled:s,onClick:l,type:"button",children:F})})]})},H=yo;var Oo=H;export{H as FileUpload,C as FileUploadProgress,Oo as default};
//# sourceMappingURL=index.esm.js.map