@livelybone/react-file-input/lib/umd/index.js

A file input component of React, support multiple inputs

/**
 * Bundle of @livelybone/react-file-input
 * Generated: 2020-06-06
 * Version: 1.2.4
 * License: MIT
 * Author: 2631541504@qq.com
 */

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e=e||self).ReactFileInput=t(e.React)}(this,function(t){"use strict";var f="default"in t?t.default:t;function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function n(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function c(e,t){return!t||"object"!==i(t)&&"function"!=typeof t?a(e):t}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&l(e,t)}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var e;m=e={exports:{}},h=function(){return function(e,t,n){t=t||"",n=n||512;for(var r=atob(e),i=[],l=0;l<r.length;l+=n){for(var o=r.slice(l,l+n),a=new Array(o.length),c=0;c<o.length;c++)a[c]=o.charCodeAt(c);var s=new Uint8Array(a);i.push(s)}return new Blob(i,{type:t})}},m.exports?(m.exports=h(),m.exports.default=m.exports):window.b64toBlob=h();var m,h;function d(r){return new Promise(function(t,n){try{var e=new FileReader;e.onload=function(e){t(e.target.result)},e.readAsDataURL(r)}catch(e){n(e)}})}function y(e){var t=e.name,n=e.url,r=/\.(jpe?g|png|webp|gif|svg)$/;return t&&r.test(t)||n&&r.test(n)}function v(e){return Promise.all(e.map(function(e){if("string"==typeof e)return{name:e.split("?")[0].split(/\/+/).pop(),url:e};var t,n="file"in e&&e.file||e,r=n.name||e.name,i="url"in e?e.url:"";return(t=n)instanceof File||t instanceof Blob?d(n).then(function(e){return{name:r,url:e,file:n}}):{name:r,url:i}}))}function g(e){return f.createElement("svg",Object.assign({},e,{className:"react-file-delete",viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"}),f.createElement("path",{d:"M953.86906294 235.83183582l-57.99531457 0c2.76168122 8.28504494 2.76168122 19.33177108 2.76168122 27.61681603l0 635.18677903c0 60.75699579-49.71026963 110.46726541-110.46726541 110.46726542L235.83183582 1009.1026963c-60.75699579 0-110.46726541-49.71026963-110.46726541-110.46726542L125.36456912 263.44865185c0-8.28504494 2.76168122-19.33177108 2.76168122-27.61681603L70.13093706 235.83183582c-16.57008987 0-27.61681602-11.04672615-27.61681603-27.61681602s11.04672615-27.61681602 27.61681603-27.61681603l193.31771479 0L263.44865185 70.13093706c0-30.37849854 24.85513482-55.23363335 55.23363336-55.23363336l414.25224691 0c30.37849854 0 55.23363335 24.85513482 55.23363336 55.23363336l0 110.46726541 165.70089875 0c16.57008987 0 27.61681602 11.04672615 27.61681604 27.61681603S970.43915282 235.83183582 953.86906294 235.83183582zM732.93453212 70.13093706L318.68228521 70.13093706l0 110.46726541 414.25224691 0L732.93453212 70.13093706zM180.59820247 235.83183582l0 662.80359506c0 30.37849854 24.85513482 55.23363335 55.23363335 55.23363335l552.33632966 0c30.37849854 0 55.23363335-24.85513482 55.23363335-55.23363335L843.40179753 235.83183582 180.59820247 235.83183582zM705.31771479 788.16816418c-16.57008987 0-27.61681602-11.04672615-27.61681603-27.61681603L677.70089876 401.53273459c0-16.57008987 11.04672615-27.61681602 27.61681603-27.61681604s27.61681602 11.04672615 27.61681604 27.61681604l0 359.01861356C732.93453212 777.12143803 721.88780468 788.16816418 705.31771479 788.16816418zM512 815.7849815c-16.57008987 0-27.61681602-11.04672615-27.61681602-27.61681602L484.38318398 373.91591727c0-16.57008987 11.04672615-27.61681602 27.61681602-27.61681603s27.61681602 11.04672615 27.61681602 27.61681603l0 414.25224691C539.61681602 804.73825405 528.57008987 815.7849815 512 815.7849815zM318.68228521 788.16816418c-16.57008987 0-27.61681602-11.04672615-27.61681604-27.61681603L291.06546788 401.53273459c0-16.57008987 11.04672615-27.61681602 27.61681602-27.61681604 16.57008987 0 27.61681602 11.04672615 27.61681605 27.61681604l0 359.01861356C346.29910124 777.12143803 335.25237508 788.16816418 318.68228521 788.16816418z",fill:"currentColor"}))}function b(e){return f.createElement("svg",Object.assign({},e,{className:"react-file-add",viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"}),f.createElement("path",{d:"M981.06100634 471.21208685H552.78791315V42.93899366a40.78791315 40.78791315 0 0 0-81.5758263 0v428.27309319H42.93899366a40.78791315 40.78791315 0 0 0 0 81.5758263h428.27309319v428.27309319a40.78791315 40.78791315 0 0 0 81.5758263 0V552.78791315h428.27309319a40.78791315 40.78791315 0 0 0 0-81.5758263z",fill:"currentColor"}))}function w(e){return f.createElement("svg",Object.assign({},e,{className:"react-file-img",viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"}),f.createElement("path",{d:"M285.86666667 163.84m81.92 0l552.96 0q81.92 0 81.92 81.92l0 696.32q0 81.92-81.92 81.92l-552.96 0q-81.92 0-81.92-81.92l0-696.32q0-81.92 81.92-81.92Z",fill:"currentColor",opacity:"0.9"}),f.createElement("path",{d:"M490.66666667 399.36a30.72 30.72 0 0 1 30.72-30.72h348.16a30.72 30.72 0 1 1 0 61.44H521.38666667a30.72 30.72 0 0 1-30.72-30.72z m0 194.56a30.72 30.72 0 0 1 30.72-30.72h348.16a30.72 30.72 0 1 1 0 61.44H521.38666667a30.72 30.72 0 0 1-30.72-30.72z m30.72 163.84a30.72 30.72 0 1 0 0 61.44h348.16a30.72 30.72 0 1 0 0-61.44H521.38666667z",fill:"#fff",opacity:"0.3"}),f.createElement("path",{d:"M29.86666667 0m81.92 0l573.44 0q81.92 0 81.92 81.92l0 696.32q0 81.92-81.92 81.92l-573.44 0q-81.92 0-81.92-81.92l0-696.32q0-81.92 81.92-81.92Z",fill:"currentColor"}),f.createElement("path",{d:"M193.70666667 266.24a30.72 30.72 0 0 1 30.72-30.72h348.16a30.72 30.72 0 1 1 0 61.44H224.42666667a30.72 30.72 0 0 1-30.72-30.72z m0 194.56a30.72 30.72 0 0 1 30.72-30.72h348.16a30.72 30.72 0 1 1 0 61.44H224.42666667a30.72 30.72 0 0 1-30.72-30.72z m30.72 163.84a30.72 30.72 0 1 0 0 61.44h348.16a30.72 30.72 0 1 0 0-61.44H224.42666667z",fill:"#fff",opacity:"0.4"}))}var C=function(){function e(){return o(this,e),c(this,s(e).apply(this,arguments))}return u(e,t.Component),n(e,[{key:"render",value:function(){var e=this.props,t=e.file,n=e.uploading,r=e.readonly,i=e.uploadingContent,l=e.beforeDelete,o=e.onDelete,a=e.onFileClick,c=y(t);return f.createElement("div",{className:"react-file-display ".concat(c?"is-image":""),title:t.name},c?f.createElement("img",{className:"react-file-img",src:t.url,alt:t.name,onClick:a}):f.createElement(w,{onClick:a}),f.createElement("span",{className:"react-file-info-wrapper"},!r&&f.createElement("span",{className:"react-file-del-icon",onClick:function(){Promise.resolve(l()).then(function(e){return e&&o()})}},f.createElement(g,null)),t.name&&f.createElement("span",{className:"react-file-name"},t.name)),n&&f.createElement("div",{className:"uploading"},i))}}]),e}(),E=function(){function l(){var e,t;o(this,l);for(var n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return p(a(t=c(this,(e=s(l)).call.apply(e,[this].concat(r)))),"state",{}),p(a(t),"inputEl",void 0),p(a(t),"labelEl",void 0),t}return u(l,t.Component),n(l,[{key:"render",value:function(){var t=this,e=this.props,n=e.id,r=e.accept,i=e.tip,l=e.readonly,o=e.onChange;return f.createElement("label",{className:"react-file-input".concat(i?" has-tip":""),htmlFor:n,ref:function(e){return t.labelEl=e}},f.createElement(b,null),i&&f.createElement("span",{className:"react-file-input-tip"},i),!l&&f.createElement("input",{type:"file",hidden:!0,id:n,ref:function(e){return t.inputEl=e},accept:r,onChange:function(e){o(e.target.files&&e.target.files[0]),e.target.value=""}}))}}]),l}();return function(){function r(e){var t;function n(){return Math.random().toString(36)}return o(this,r),p(a(t=c(this,s(r).call(this,e))),"id",void 0),p(a(t),"controlled",!1),p(a(t),"inputComp",void 0),t.state={files:[]},t.id=e.id||(n()+n()).replace(/0\./,"").slice(0,15).toUpperCase(),t.controlled="files"in e,t.controlled&&("onChange"in e&&"function"==typeof e.onChange?console.log("react-file-input: The `files` prop is provided, it means the component is controlled, and you must provide `onChange` handler to handle the files change of the component"):console.error("react-file-input: You provided a `files` prop to the component without an `onChange` handler. This will render a read-only field")),e.files&&v(e.files).then(function(e){t.setState({files:e})}),t}return u(r,t.Component),n(r,[{key:"setFiles",value:function(e){var t=this,n=this.props.onChange;this.controlled?n&&n(e):this.setState({files:e},function(){n&&n(t.state.files)})}},{key:"fileInput",value:function(n){var r=this;n&&(!this.controlled&&y(n)?d(n):Promise.resolve("")).then(function(e){var t={file:n,url:e,name:n.name};r.props.multiple?r.setFiles(r.state.files.concat(t)):r.setFiles([t])})}},{key:"componentDidUpdate",value:function(e){var t=this;this.props.files&&e.files!==this.props.files&&v(this.props.files).then(function(e){t.setState({files:e})})}},{key:"render",value:function(){var t=this,e=this.props,r=e.beforeDelete,i=e.onFileClick,n=e.multiple,l=e.readonly,o=e.tip,a=e.accept,c=n?this.state.files:this.state.files.slice(0,1),s=c.map(function(e,n){return f.createElement(C,{file:e,key:n,uploading:!!t.props.uploading&&n===c.length-1,readonly:!!t.props.readonly,uploadingContent:t.props.uploadingContent||"uploading...",onDelete:function(){return t.setFiles(t.state.files.filter(function(e,t){return t!==n}))},beforeDelete:function(){return!r||r(e)},onFileClick:function(){i&&i(e,n,t.state.files)}})}),u=f.createElement(E,{id:this.id,ref:function(e){return t.inputComp=e},tip:o,readonly:l,accept:a,onChange:this.fileInput.bind(this)});return n?f.createElement("div",{className:"react-file-input-wrapper multiple".concat(l?" readonly":""," ").concat(this.props.className||"")},s,(!l||this.state.files.length<1)&&u):f.createElement("div",{className:"react-file-input-wrapper".concat(l?" readonly":""," ").concat(this.props.className||"")},s,this.state.files.length<1&&u)}}]),r}()});