react-drag-drop-files/dist/index.es.js

Light React Drag & Drop files and images library styled by styled-components

import{jsx as n,jsxs as e,Fragment as r}from"react/jsx-runtime";import t,{css as i}from"styled-components";import{useState as o,useCallback as a,useEffect as l,useRef as s}from"react";var p=function(){return p=Object.assign||function(n){for(var e,r=1,t=arguments.length;r<t;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},p.apply(this,arguments)};function d(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var c,u,f,h,v,x="#666",b=i(c||(c=d(["\n  display: flex;\n  align-items: center;\n  min-width: 322px;\n  max-width: 508px;\n  height: 48px;\n  border: dashed 2px ",";\n  padding: 8px 16px 8px 8px;\n  border-radius: 5px;\n  cursor: pointer;\n  flex-grow: 0;\n\n  &.is-disabled {\n    border: dashed 2px ",";\n    cursor: no-drop;\n    svg {\n      fill: ",";\n      color: ",";\n      path {\n        fill: ",";\n        color: ",";\n      }\n    }\n  }\n"],["\n  display: flex;\n  align-items: center;\n  min-width: 322px;\n  max-width: 508px;\n  height: 48px;\n  border: dashed 2px ",";\n  padding: 8px 16px 8px 8px;\n  border-radius: 5px;\n  cursor: pointer;\n  flex-grow: 0;\n\n  &.is-disabled {\n    border: dashed 2px ",";\n    cursor: no-drop;\n    svg {\n      fill: ",";\n      color: ",";\n      path {\n        fill: ",";\n        color: ",";\n      }\n    }\n  }\n"])),"#0658c2",x,x,x,x,x),g=t.label(u||(u=d(["\n  position: relative;\n  ",";\n  &:focus-within {\n    outline: 2px solid black;\n  }\n  & > input {\n    display: block;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n  }\n"],["\n  position: relative;\n  ",";\n  &:focus-within {\n    outline: 2px solid black;\n  }\n  & > input {\n    display: block;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n  }\n"])),(function(n){return n.override?"":b})),m=t.div(f||(f=d(["\n  border: dashed 2px ",";\n  border-radius: 5px;\n  background-color: ",";\n  opacity: 0.9;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 999;\n  & > span {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translateX(-50%) translateY(-50%);\n  }\n"],["\n  border: dashed 2px ",";\n  border-radius: 5px;\n  background-color: ",";\n  opacity: 0.9;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 999;\n  & > span {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translateX(-50%) translateY(-50%);\n  }\n"])),x,"#999"),y=t.div(h||(h=d(["\n  display: flex;\n  justify-content: space-between;\n  flex-grow: 1;\n  & > span {\n    font-size: 12px;\n    color: ",";\n  }\n  .file-types {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    max-width: 100px;\n  }\n"],["\n  display: flex;\n  justify-content: space-between;\n  flex-grow: 1;\n  & > span {\n    font-size: 12px;\n    color: ",";\n  }\n  .file-types {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    max-width: 100px;\n  }\n"])),(function(n){return n.$error?"red":x})),w=t.span(v||(v=d(["\n  font-size: 14px;\n  color: ",";\n  span {\n    text-decoration: underline;\n  }\n"],["\n  font-size: 14px;\n  color: ",";\n  span {\n    text-decoration: underline;\n  }\n"])),x),z=function(n){return n/1024/1024},L=function(n){return void 0===n?"":n.map((function(n){return".".concat(n.toLowerCase())})).join(",")};function C(e){var r=e.types,t=e.minSize,i=e.maxSize;if(r){var o=r.toString(),a="";return i&&(a+="size >= ".concat(i,", ")),t&&(a+="size <= ".concat(t,", ")),n("span",p({title:"".concat(a,"types: ").concat(o),className:"file-types"},{children:o}))}return null}function E(){return e("svg",p({width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[n("path",{d:"M5.33317 6.66667H22.6665V16H25.3332V6.66667C25.3332 5.196 24.1372 4 22.6665 4H5.33317C3.8625 4 2.6665 5.196 2.6665 6.66667V22.6667C2.6665 24.1373 3.8625 25.3333 5.33317 25.3333H15.9998V22.6667H5.33317V6.66667Z",fill:"#0658C2"}),n("path",{d:"M10.6665 14.6667L6.6665 20H21.3332L15.9998 12L11.9998 17.3333L10.6665 14.6667Z",fill:"#0658C2"}),n("path",{d:"M25.3332 18.6667H22.6665V22.6667H18.6665V25.3333H22.6665V29.3333H25.3332V25.3333H29.3332V22.6667H25.3332V18.6667Z",fill:"#0658C2"})]}))}var H=0;var S=function(t,i,o,a,l,s){return o?n("span",{children:"File type/size error, Hovered on types!"}):n(w,{children:a?n("span",{children:"Upload disabled"}):n(r,t||i?{children:s?n(r,{children:n("span",{children:s})}):e(r,{children:[n("span",{children:"Uploaded Successfully!"})," Upload another?"]})}:{children:e(r,l?{children:[n("span",{children:l.split(" ")[0]})," ",l.substr(l.indexOf(" ")+1)]}:{children:[n("span",{children:"Upload"})," or drop a file right here"]})})})},k=function(t){var i=t.name,d=t.hoverTitle,c=t.types,u=t.handleChange,f=t.classes,h=t.children,v=t.maxSize,x=t.minSize,b=t.fileOrFiles,w=t.onSizeError,k=t.onTypeError,D=t.onSelect,V=t.onDrop,P=t.disabled,j=t.label,F=t.uploadedLabel,O=t.multiple,T=t.required,M=t.onDraggingStateChange,R=t.dropMessageStyle,U=t.ariaLabel,Z=t.ariaDescribedby,q=s(null),N=s(null),X=o(!1),Y=X[0],$=X[1],B=o(null),A=B[0],G=B[1],I=o(!1),J=I[0],K=I[1],Q=function(n){return c&&!function(n,e){var r=n.name.split(".").pop();return e.map((function(n){return n.toLowerCase()})).includes(r.toLowerCase())}(n,c)?(K(!0),k&&k("File type is not supported"),!1):v&&z(n.size)>v?(K(!0),w&&w("File size is too big"),!1):!(x&&z(n.size)<x)||(K(!0),w&&w("File size is too small"),!1)},W=function(n){var e=!1;if(n){if(n instanceof File)e=!Q(n);else for(var r=0;r<n.length;r++){var t=n[r];e=!Q(t)||e}return!e&&(u&&u(n),G(n),$(!0),K(!1),!0)}return!1},_=function(n){var e=n.labelRef,r=n.inputRef,t=n.multiple,i=n.handleChanges,s=n.onDrop,p=o(!1),d=p[0],c=p[1],u=a((function(){r.current.click()}),[r]),f=a((function(n){n.preventDefault(),n.stopPropagation(),H++,n.dataTransfer.items&&0!==n.dataTransfer.items.length&&c(!0)}),[]),h=a((function(n){n.preventDefault(),n.stopPropagation(),--H>0||c(!1)}),[]),v=a((function(n){n.preventDefault(),n.stopPropagation()}),[]),x=a((function(n){n.preventDefault(),n.stopPropagation(),c(!1),H=0;var e=n.dataTransfer.files;if(e&&e.length>0){var r=t?e:e[0],o=i(r);s&&o&&s(r)}}),[i]);return l((function(){var n=e.current;return n.addEventListener("click",u),n.addEventListener("dragenter",f),n.addEventListener("dragleave",h),n.addEventListener("dragover",v),n.addEventListener("drop",x),function(){n.removeEventListener("click",u),n.removeEventListener("dragenter",f),n.removeEventListener("dragleave",h),n.removeEventListener("dragover",v),n.removeEventListener("drop",x)}}),[u,f,h,v,x,e]),d}({labelRef:q,inputRef:N,multiple:O,handleChanges:W,onDrop:V});return l((function(){null==M||M(_)}),[_]),l((function(){b?($(!0),G(b)):(N.current&&(N.current.value=""),$(!1),G(null))}),[b]),e(g,p({override:h,className:"".concat(f||""," ").concat(P?"is-disabled":""),ref:q,htmlFor:i,onClick:function(n){n.preventDefault(),n.stopPropagation()},"aria-describedby":Z,role:"button","aria-label":U},{children:[n("input",{onClick:function(n){n.stopPropagation(),N&&N.current&&(N.current.value="",N.current.click())},onChange:function(n){var e=n.target.files,r=O?e:e[0],t=W(r);D&&t&&D(r)},accept:L(c),ref:N,type:"file",id:i,name:i,disabled:P,multiple:O,required:T}),_&&n(m,p({style:R},{children:n("span",{children:d||"Drop Here"})})),!h&&e(r,{children:[n(E,{}),e(y,p({$error:J},{children:[S(A,Y,J,P,j,F),n(C,{types:c,minSize:x,maxSize:v})]}))]}),h]}))};export{k as FileUploader};