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

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

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n,e=require("react/jsx-runtime"),r=require("styled-components"),t=(n=r)&&"object"==typeof n&&"default"in n?n.default:n,i=require("react"),o=function(){return o=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},o.apply(this,arguments)};function a(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var s,l,p,d,c,u="#666",f=r.css(s||(s=a(["\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",u,u,u,u,u),x=t.label(l||(l=a(["\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?"":f})),h=t.div(p||(p=a(["\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"])),u,"#999"),v=t.div(d||(d=a(["\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":u})),b=t.span(c||(c=a(["\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"])),u),g=function(n){return n/1024/1024},m=function(n){return void 0===n?"":n.map((function(n){return".".concat(n.toLowerCase())})).join(",")};function y(n){var r=n.types,t=n.minSize,i=n.maxSize;if(r){var a=r.toString(),s="";return i&&(s+="size >= ".concat(i,", ")),t&&(s+="size <= ".concat(t,", ")),e.jsx("span",o({title:"".concat(s,"types: ").concat(a),className:"file-types"},{children:a}))}return null}function j(){return e.jsxs("svg",o({width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("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"}),e.jsx("path",{d:"M10.6665 14.6667L6.6665 20H21.3332L15.9998 12L11.9998 17.3333L10.6665 14.6667Z",fill:"#0658C2"}),e.jsx("path",{d:"M25.3332 18.6667H22.6665V22.6667H18.6665V25.3333H22.6665V29.3333H25.3332V25.3333H29.3332V22.6667H25.3332V18.6667Z",fill:"#0658C2"})]}))}var w=0;var C=function(n,r,t,i,o,a){return t?e.jsx("span",{children:"File type/size error, Hovered on types!"}):e.jsx(b,{children:i?e.jsx("span",{children:"Upload disabled"}):n||r?e.jsx(e.Fragment,{children:a?e.jsx(e.Fragment,{children:e.jsx("span",{children:a})}):e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Uploaded Successfully!"})," Upload another?"]})}):e.jsx(e.Fragment,{children:o?e.jsxs(e.Fragment,{children:[e.jsx("span",{children:o.split(" ")[0]})," ",o.substr(o.indexOf(" ")+1)]}):e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Upload"})," or drop a file right here"]})})})};exports.FileUploader=function(n){var r=n.name,t=n.hoverTitle,a=n.types,s=n.handleChange,l=n.classes,p=n.children,d=n.maxSize,c=n.minSize,u=n.fileOrFiles,f=n.onSizeError,b=n.onTypeError,z=n.onSelect,L=n.onDrop,S=n.disabled,k=n.label,E=n.uploadedLabel,F=n.multiple,H=n.required,D=n.onDraggingStateChange,V=n.dropMessageStyle,P=n.ariaLabel,O=n.ariaDescribedby,R=i.useRef(null),q=i.useRef(null),M=i.useState(!1),T=M[0],U=M[1],Z=i.useState(null),N=Z[0],X=Z[1],Y=i.useState(!1),$=Y[0],_=Y[1],B=function(n){return a&&!function(n,e){var r=n.name.split(".").pop();return e.map((function(n){return n.toLowerCase()})).includes(r.toLowerCase())}(n,a)?(_(!0),b&&b("File type is not supported"),!1):d&&g(n.size)>d?(_(!0),f&&f("File size is too big"),!1):!(c&&g(n.size)<c)||(_(!0),f&&f("File size is too small"),!1)},A=function(n){var e=!1;if(n){if(n instanceof File)e=!B(n);else for(var r=0;r<n.length;r++){var t=n[r];e=!B(t)||e}return!e&&(s&&s(n),X(n),U(!0),_(!1),!0)}return!1},G=function(n){var e=n.labelRef,r=n.inputRef,t=n.multiple,o=n.handleChanges,a=n.onDrop,s=i.useState(!1),l=s[0],p=s[1],d=i.useCallback((function(){r.current.click()}),[r]),c=i.useCallback((function(n){n.preventDefault(),n.stopPropagation(),w++,n.dataTransfer.items&&0!==n.dataTransfer.items.length&&p(!0)}),[]),u=i.useCallback((function(n){n.preventDefault(),n.stopPropagation(),--w>0||p(!1)}),[]),f=i.useCallback((function(n){n.preventDefault(),n.stopPropagation()}),[]),x=i.useCallback((function(n){n.preventDefault(),n.stopPropagation(),p(!1),w=0;var e=n.dataTransfer.files;if(e&&e.length>0){var r=t?e:e[0],i=o(r);a&&i&&a(r)}}),[o]);return i.useEffect((function(){var n=e.current;return n.addEventListener("click",d),n.addEventListener("dragenter",c),n.addEventListener("dragleave",u),n.addEventListener("dragover",f),n.addEventListener("drop",x),function(){n.removeEventListener("click",d),n.removeEventListener("dragenter",c),n.removeEventListener("dragleave",u),n.removeEventListener("dragover",f),n.removeEventListener("drop",x)}}),[d,c,u,f,x,e]),l}({labelRef:R,inputRef:q,multiple:F,handleChanges:A,onDrop:L});return i.useEffect((function(){null==D||D(G)}),[G]),i.useEffect((function(){u?(U(!0),X(u)):(q.current&&(q.current.value=""),U(!1),X(null))}),[u]),e.jsxs(x,o({override:p,className:"".concat(l||""," ").concat(S?"is-disabled":""),ref:R,htmlFor:r,onClick:function(n){n.preventDefault(),n.stopPropagation()},"aria-describedby":O,role:"button","aria-label":P},{children:[e.jsx("input",{onClick:function(n){n.stopPropagation(),q&&q.current&&(q.current.value="",q.current.click())},onChange:function(n){var e=n.target.files,r=F?e:e[0],t=A(r);z&&t&&z(r)},accept:m(a),ref:q,type:"file",id:r,name:r,disabled:S,multiple:F,required:H}),G&&e.jsx(h,o({style:V},{children:e.jsx("span",{children:t||"Drop Here"})})),!p&&e.jsxs(e.Fragment,{children:[e.jsx(j,{}),e.jsxs(v,o({$error:$},{children:[C(N,T,$,S,k,E),e.jsx(y,{types:a,minSize:c,maxSize:d})]}))]}),p]}))};