react-file-image-uploader
Version:
This NPM package provides a facility to its user to use file uploader for uploading file
11 lines (10 loc) • 17.2 kB
JavaScript
import e from"react";import{makeStyles as t,Grid as r,Container as n,Card as o,CardHeader as a,Divider as i,CardContent as c}from"@material-ui/core";import l from"prop-types";function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(n=(i=c.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw a}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var f=t((function(e){return{root:{textAlign:"left",color:"#393666"},divider:{backgroundColor:"#2a29294f"},container:{margin:0},cardHeader:{color:"white",display:"flex",justifyContent:"space-between"}}}));function d(t){var l=t.avatar,s=void 0===l?null:l,u=t.action,d=void 0===u?null:u,p=t.title,m=void 0===p?"":p,y=t.subheader,v=void 0===y?"":y,h=t.maxWidth,b=void 0===h?"sm":h,g=t.children,O=f();return e.createElement(r,{container:!0,direction:"row"},e.createElement(r,{item:!0,xs:!0},e.createElement(n,{maxWidth:b,className:O.container},e.createElement(o,{className:"".concat(O.root," text-dark ")},e.createElement(a,{className:"".concat(O.cardHeader," "),avatar:s,action:d,title:m,subheader:v}),e.createElement(i,{className:O.divider}),e.createElement(c,null,g)))))}
/*!
* Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/function p(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){m(e,t,r[t])}))}return e}function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=[],n=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(n=(i=c.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw a}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var h=function(){},b={},g={},O={mark:h,measure:h};try{"undefined"!=typeof window&&(b=window),"undefined"!=typeof document&&(g=document),"undefined"!=typeof MutationObserver&&MutationObserver,"undefined"!=typeof performance&&(O=performance)}catch(e){}var _=(b.navigator||{}).userAgent,w=void 0===_?"":_,x=b,E=g,M=O;x.document;var j=!!E.documentElement&&!!E.head&&"function"==typeof E.addEventListener&&"function"==typeof E.createElement;~w.indexOf("MSIE")||w.indexOf("Trident/");!function(){try{process.env.NODE_ENV}catch(e){return!1}}();var C=x.FontAwesomeConfig||{};if(E&&"function"==typeof E.querySelector){[["data-family-prefix","familyPrefix"],["data-replacement-class","replacementClass"],["data-auto-replace-svg","autoReplaceSvg"],["data-auto-add-css","autoAddCss"],["data-auto-a11y","autoA11y"],["data-search-pseudo-elements","searchPseudoElements"],["data-observe-mutations","observeMutations"],["data-mutate-approach","mutateApproach"],["data-keep-original-source","keepOriginalSource"],["data-measure-performance","measurePerformance"],["data-show-missing-icons","showMissingIcons"]].forEach((function(e){var t=v(e,2),r=t[0],n=t[1],o=function(e){return""===e||"false"!==e&&("true"===e||e)}(function(e){var t=E.querySelector("script["+e+"]");if(t)return t.getAttribute(e)}(r));null!=o&&(C[n]=o)}))}var S=y({},{familyPrefix:"fa",replacementClass:"svg-inline--fa",autoReplaceSvg:!0,autoAddCss:!0,autoA11y:!0,searchPseudoElements:!1,observeMutations:!0,mutateApproach:"async",keepOriginalSource:!0,measurePerformance:!1,showMissingIcons:!0},C);S.autoReplaceSvg||(S.observeMutations=!1);var k=y({},S);x.FontAwesomeConfig=k;var A=x||{};A.___FONT_AWESOME___||(A.___FONT_AWESOME___={}),A.___FONT_AWESOME___.styles||(A.___FONT_AWESOME___.styles={}),A.___FONT_AWESOME___.hooks||(A.___FONT_AWESOME___.hooks={}),A.___FONT_AWESOME___.shims||(A.___FONT_AWESOME___.shims=[]);var z=A.___FONT_AWESOME___,N=[];j&&((E.documentElement.doScroll?/^loaded|^c/:/^loaded|^i|^c/).test(E.readyState)||E.addEventListener("DOMContentLoaded",(function e(){E.removeEventListener("DOMContentLoaded",e),1,N.map((function(e){return e()}))}))),"undefined"!=typeof global&&void 0!==global.process&&global.process.emit,"undefined"==typeof setImmediate?setTimeout:setImmediate;k.measurePerformance&&M&&M.mark&&M.measure;var L=function(e,t,r,n){var o,a,i,c=Object.keys(e),l=c.length,s=void 0!==n?function(e,t){return function(r,n,o,a){return e.call(t,r,n,o,a)}}(t,n):t;for(void 0===r?(o=1,i=e[c[0]]):(o=0,i=r);o<l;o++)i=s(i,e[a=c[o]],a,e);return i};function P(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=r.skipHooks,o=void 0!==n&&n,a=Object.keys(t).reduce((function(e,r){var n=t[r];return!!n.icon?e[n.iconName]=n.icon:e[r]=n,e}),{});"function"!=typeof z.hooks.addPack||o?z.styles[e]=y({},z.styles[e]||{},a):z.hooks.addPack(e,a),"fas"===e&&P("fa",t)}var H=z.styles,T=z.shims,V=function(){var e=function(e){return L(H,(function(t,r,n){return t[n]=L(r,e,{}),t}),{})};e((function(e,t,r){return t[3]&&(e[t[3]]=r),e})),e((function(e,t,r){var n=t[2];return e[r]=r,n.forEach((function(t){e[t]=r})),e}));var t="far"in H;L(T,(function(e,r){var n=r[0],o=r[1],a=r[2];return"far"!==o||t||(o="fas"),e[n]={prefix:o,iconName:a},e}),{})};function I(e){this.name="MissingIcon",this.message=e||"Icon unavailable",this.stack=(new Error).stack}V(),z.styles,I.prototype=Object.create(Error.prototype),I.prototype.constructor=I;var W={fill:"currentColor"},D={attributeType:"XML",repeatCount:"indefinite",dur:"2s"};y({},W,{d:"M156.5,447.7l-12.6,29.5c-18.7-9.5-35.9-21.2-51.5-34.9l22.7-22.7C127.6,430.5,141.5,440,156.5,447.7z M40.6,272H8.5 c1.4,21.2,5.4,41.7,11.7,61.1L50,321.2C45.1,305.5,41.8,289,40.6,272z M40.6,240c1.4-18.8,5.2-37,11.1-54.1l-29.5-12.6 C14.7,194.3,10,216.7,8.5,240H40.6z M64.3,156.5c7.8-14.9,17.2-28.8,28.1-41.5L69.7,92.3c-13.7,15.6-25.5,32.8-34.9,51.5 L64.3,156.5z M397,419.6c-13.9,12-29.4,22.3-46.1,30.4l11.9,29.8c20.7-9.9,39.8-22.6,56.9-37.6L397,419.6z M115,92.4 c13.9-12,29.4-22.3,46.1-30.4l-11.9-29.8c-20.7,9.9-39.8,22.6-56.8,37.6L115,92.4z M447.7,355.5c-7.8,14.9-17.2,28.8-28.1,41.5 l22.7,22.7c13.7-15.6,25.5-32.9,34.9-51.5L447.7,355.5z M471.4,272c-1.4,18.8-5.2,37-11.1,54.1l29.5,12.6 c7.5-21.1,12.2-43.5,13.6-66.8H471.4z M321.2,462c-15.7,5-32.2,8.2-49.2,9.4v32.1c21.2-1.4,41.7-5.4,61.1-11.7L321.2,462z M240,471.4c-18.8-1.4-37-5.2-54.1-11.1l-12.6,29.5c21.1,7.5,43.5,12.2,66.8,13.6V471.4z M462,190.8c5,15.7,8.2,32.2,9.4,49.2h32.1 c-1.4-21.2-5.4-41.7-11.7-61.1L462,190.8z M92.4,397c-12-13.9-22.3-29.4-30.4-46.1l-29.8,11.9c9.9,20.7,22.6,39.8,37.6,56.9 L92.4,397z M272,40.6c18.8,1.4,36.9,5.2,54.1,11.1l12.6-29.5C317.7,14.7,295.3,10,272,8.5V40.6z M190.8,50 c15.7-5,32.2-8.2,49.2-9.4V8.5c-21.2,1.4-41.7,5.4-61.1,11.7L190.8,50z M442.3,92.3L419.6,115c12,13.9,22.3,29.4,30.5,46.1 l29.8-11.9C470,128.5,457.3,109.4,442.3,92.3z M397,92.4l22.7-22.7c-15.6-13.7-32.8-25.5-51.5-34.9l-12.6,29.5 C370.4,72.1,384.4,81.5,397,92.4z"});var F=y({},D,{attributeName:"opacity"});y({},W,{cx:"256",cy:"364",r:"28"}),y({},D,{attributeName:"r",values:"28;14;28;28;14;28;"}),y({},F,{values:"1;0;1;1;0;1;"}),y({},W,{opacity:"1",d:"M263.7,312h-16c-6.6,0-12-5.4-12-12c0-71,77.4-63.9,77.4-107.8c0-20-17.8-40.2-57.4-40.2c-29.1,0-44.3,9.6-59.2,28.7 c-3.9,5-11.1,6-16.2,2.4l-13.1-9.2c-5.6-3.9-6.9-11.8-2.6-17.2c21.2-27.2,46.4-44.7,91.2-44.7c52.3,0,97.4,29.8,97.4,80.2 c0,67.6-77.4,63.5-77.4,107.8C275.7,306.6,270.3,312,263.7,312z"}),y({},F,{values:"1;0;0;0;0;1;"}),y({},W,{opacity:"0",d:"M232.5,134.5l7,168c0.3,6.4,5.6,11.5,12,11.5h9c6.4,0,11.7-5.1,12-11.5l7-168c0.3-6.8-5.2-12.5-12-12.5h-23 C237.7,122,232.2,127.7,232.5,134.5z"}),y({},F,{values:"0;0;1;1;0;0;"}),z.styles,z.styles;var U=new(function(){function e(){!
/*!
* Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.definitions={}}var t,r,n;return t=e,(r=[{key:"add",value:function(){for(var e=this,t=arguments.length,r=new Array(t),n=0;n<t;n++)r[n]=arguments[n];var o=r.reduce(this._pullDefinitions,{});Object.keys(o).forEach((function(t){e.definitions[t]=y({},e.definitions[t]||{},o[t]),P(t,o[t]),V()}))}},{key:"reset",value:function(){this.definitions={}}},{key:"_pullDefinitions",value:function(e,t){var r=t.prefix&&t.iconName&&t.icon?{0:t}:t;return Object.keys(r).map((function(t){var n=r[t],o=n.prefix,a=n.iconName,i=n.icon;e[o]||(e[o]={}),e[o][a]=i})),e}}])&&p(t.prototype,r),n&&p(t,n),e}());function B(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function R(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function q(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?R(Object(r),!0).forEach((function(t){B(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):R(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function X(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function $(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function G(e){return t=e,(t-=0)==t?e:(e=e.replace(/[\-_\s]+(.)?/g,(function(e,t){return t?t.toUpperCase():""}))).substr(0,1).toLowerCase()+e.substr(1);var t}function J(e){return e.split(";").map((function(e){return e.trim()})).filter((function(e){return e})).reduce((function(e,t){var r,n=t.indexOf(":"),o=G(t.slice(0,n)),a=t.slice(n+1).trim();return o.startsWith("webkit")?e[(r=o,r.charAt(0).toUpperCase()+r.slice(1))]=a:e[o]=a,e}),{})}try{"production"===process.env.NODE_ENV}catch(e){}function K(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}l.bool,l.string,l.oneOfType([l.object,l.array,l.string]),l.bool,l.bool,l.oneOf(["horizontal","vertical","both"]),l.oneOfType([l.object,l.array,l.string]),l.bool,l.oneOf(["right","left"]),l.bool,l.oneOf([0,90,180,270]),l.oneOf(["lg","xs","sm","1x","2x","3x","4x","5x","6x","7x","8x","9x","10x"]),l.bool,l.oneOfType([l.bool,l.string]),l.string,l.oneOfType([l.string,l.object]),l.bool,function e(t,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if("string"==typeof r)return r;var o=(r.children||[]).map((function(r){return e(t,r)})),a=Object.keys(r.attributes||{}).reduce((function(e,t){var n=r.attributes[t];switch(t){case"class":e.attrs.className=n,delete r.attributes.class;break;case"style":e.attrs.style=J(n);break;default:0===t.indexOf("aria-")||0===t.indexOf("data-")?e.attrs[t.toLowerCase()]=n:e.attrs[G(t)]=n}return e}),{attrs:{}}),i=n.style,c=void 0===i?{}:i,l=X(n,["style"]);return a.attrs.style=q({},a.attrs.style,{},c),t.apply(void 0,[r.tag,q({},a.attrs,{},l)].concat($(o)))}.bind(null,e.createElement),U.add({prefix:"fas",iconName:"file-word",icon:[384,512,[],"f1c2","M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm57.1 120H305c7.7 0 13.4 7.1 11.7 14.7l-38 168c-1.2 5.5-6.1 9.3-11.7 9.3h-38c-5.5 0-10.3-3.8-11.6-9.1-25.8-103.5-20.8-81.2-25.6-110.5h-.5c-1.1 14.3-2.4 17.4-25.6 110.5-1.3 5.3-6.1 9.1-11.6 9.1H117c-5.6 0-10.5-3.9-11.7-9.4l-37.8-168c-1.7-7.5 4-14.6 11.7-14.6h24.5c5.7 0 10.7 4 11.8 9.7 15.6 78 20.1 109.5 21 122.2 1.6-10.2 7.3-32.7 29.4-122.7 1.3-5.4 6.1-9.1 11.7-9.1h29.1c5.6 0 10.4 3.8 11.7 9.2 24 100.4 28.8 124 29.6 129.4-.2-11.2-2.6-17.8 21.6-129.2 1-5.6 5.9-9.5 11.5-9.5zM384 121.9v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"]},{prefix:"fas",iconName:"file-pdf",icon:[384,512,[],"f1c1","M181.9 256.1c-5-16-4.9-46.9-2-46.9 8.4 0 7.6 36.9 2 46.9zm-1.7 47.2c-7.7 20.2-17.3 43.3-28.4 62.7 18.3-7 39-17.2 62.9-21.9-12.7-9.6-24.9-23.4-34.5-40.8zM86.1 428.1c0 .8 13.2-5.4 34.9-40.2-6.7 6.3-29.1 24.5-34.9 40.2zM248 160h136v328c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V24C0 10.7 10.7 0 24 0h200v136c0 13.2 10.8 24 24 24zm-8 171.8c-20-12.2-33.3-29-42.7-53.8 4.5-18.5 11.6-46.6 6.2-64.2-4.7-29.4-42.4-26.5-47.8-6.8-5 18.3-.4 44.1 8.1 77-11.6 27.6-28.7 64.6-40.8 85.8-.1 0-.1.1-.2.1-27.1 13.9-73.6 44.5-54.5 68 5.6 6.9 16 10 21.5 10 17.9 0 35.7-18 61.1-61.8 25.8-8.5 54.1-19.1 79-23.2 21.7 11.8 47.1 19.5 64 19.5 29.2 0 31.2-32 19.7-43.4-13.9-13.6-54.3-9.7-73.6-7.2zM377 105L279 7c-4.5-4.5-10.6-7-17-7h-6v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zm-74.1 255.3c4.1-2.7-2.5-11.9-42.8-9 37.1 15.8 42.8 9 42.8 9z"]},{prefix:"fas",iconName:"file-excel",icon:[384,512,[],"f1c3","M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm60.1 106.5L224 336l60.1 93.5c5.1 8-.6 18.5-10.1 18.5h-34.9c-4.4 0-8.5-2.4-10.6-6.3C208.9 405.5 192 373 192 373c-6.4 14.8-10 20-36.6 68.8-2.1 3.9-6.1 6.3-10.5 6.3H110c-9.5 0-15.2-10.5-10.1-18.5l60.3-93.5-60.3-93.5c-5.2-8 .6-18.5 10.1-18.5h34.8c4.4 0 8.5 2.4 10.6 6.3 26.1 48.8 20 33.6 36.6 68.5 0 0 6.1-11.7 36.6-68.5 2.1-3.9 6.2-6.3 10.6-6.3H274c9.5-.1 15.2 10.4 10.1 18.4zM384 121.9v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"]},{prefix:"fas",iconName:"file-video",icon:[384,512,[],"f1c8","M384 121.941V128H256V0h6.059c6.365 0 12.47 2.529 16.971 7.029l97.941 97.941A24.005 24.005 0 0 1 384 121.941zM224 136V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248c-13.2 0-24-10.8-24-24zm96 144.016v111.963c0 21.445-25.943 31.998-40.971 16.971L224 353.941V392c0 13.255-10.745 24-24 24H88c-13.255 0-24-10.745-24-24V280c0-13.255 10.745-24 24-24h112c13.255 0 24 10.745 24 24v38.059l55.029-55.013c15.011-15.01 40.971-4.491 40.971 16.97z"]});K(".customImageLoader{position:absolute!important;width:100%!important;height:100%!important;align-items:center!important;display:flex!important;justify-content:center!important;font-size:90px!important}.customImageLoader__text{text-overflow:ellipsis;overflow:hidden;position:absolute;bottom:0;width:100%;align-items:center;display:flex;justify-content:center}"),t({root:{width:"100%",display:"flex",justifyContent:"center",top:"29%",position:"relative"},loaderColor:{color:"var(--color-primary)"},imgDisplayHide:{display:"none"},imgDisplayShow:{display:"block",marginLeft:"auto",marginRight:"auto"}});K(".uploadButton{width:100px;height:120px;background-color:hsla(0,0%,100%,.8);transition:all 2s ease-in-out;-webkit-transition:all 2s ease-in-out;transition-duration:3s}.uploadButton__fileButton{display:flex!important;justify-content:center!important;min-width:40px!important;background-color:#fff!important}");K(".fileUploader{margin:0}.fileUploader__customImageLoader{width:100px;height:120px;transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out}.fileUploader__customImageLoader:hover{transform:scale(1.1)}.fileUploader .MuiCardContent-root{display:flex!important;flex-wrap:wrap}");export default function(t){var r=t.maxWidth,n=void 0===r?"sm":r,o=t.title,a=t.onSubmit;t.files;var i=s(e.useState([]),2);return i[0],i[1],e.createElement("div",{className:"fileUploader"},e.createElement(d,{title:o,action:a,maxWidth:n},e.createElement("h1",null,"Hello")))}