diff --git a/README.md b/README.md index aa33235..22394b2 100755 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ var FilesDemo = React.createClass({ className='files-dropzone' onChange={this.onFilesChange} onError={this.onFilesError} - accepts={['image/png', 'text/plain', 'audio/*']} + accepts={['image/png', '.pdf', 'audio/*']} multiple maxFiles={3} maxFileSize={10000000} @@ -108,13 +108,13 @@ Error codes are: `accepts` - *Array* of *String* -Control what types of generic/specific MIME types, can be dropped/added. +Control what types of generic/specific MIME types or file extensions can be dropped/added. > See full list of MIME types here: http://www.iana.org/assignments/media-types/media-types.xhtml Example: ```js -accepts={['image/*', 'video/mp4', 'audio/*']} +accepts={['image/*', 'video/mp4', 'audio/*', '.pdf']} ``` --- diff --git a/dist/index.js b/dist/index.js index 0b8dd43..34e358b 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1 +1 @@ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/static/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t1&&(n=[n[0]]);for(var r=[],i=0;i=this.props.maxFiles){this.onError({code:4,message:"maximum file count reached"},a);break}this.fileTypeAcceptable(a)&&this.fileSizeAcceptable(a)&&r.push(a)}this.setState({files:this.props.multiple===!1?r:[].concat(o(this.state.files),r)},function(){t.props.onChange.call(t,t.state.files)})}},{key:"onDragOver",value:function(e){e.preventDefault(),e.stopPropagation()}},{key:"onDragEnter",value:function(e){var t=this.dropzone;t.className+=" "+this.props.dropActiveClassName}},{key:"onDragLeave",value:function(e){var t=this.dropzone;this.dropzone.className=t.className.replace(" "+this.props.dropActiveClassName,"")}},{key:"openFileChooser",value:function(){this.inputElement.value=null,this.inputElement.click()}},{key:"fileTypeAcceptable",value:function(e){var t=this.props.accepts;if(t){if(e.type)for(var n=this.mimeTypeLeft(e.type),r=this.mimeTypeRight(e.type),o=0;othis.props.maxFileSize?(this.onError({code:2,message:e.name+" is too large"},e),!1):e.size1?t[t.length-1]:"none"}},{key:"fileSizeReadable",value:function(e){return e>=1e9?Math.ceil(e/1e9)+"GB":e>=1e6?Math.ceil(e/1e6)+"MB":e>=1e3?Math.ceil(e/1e3)+"kB":Math.ceil(e)+"B"}},{key:"onError",value:function(e,t){this.props.onError.call(this,e,t)}},{key:"removeFile",value:function(e){var t=this;this.setState({files:this.state.files.filter(function(t){return t.id!==e.id})},function(){t.props.onChange.call(t,t.state.files)})}},{key:"removeFiles",value:function(){var e=this;this.setState({files:[]},function(){e.props.onChange.call(e,e.state.files)})}},{key:"render",value:function(){var e=this,t={type:"file",accept:this.props.accepts?this.props.accepts.join():"",multiple:this.props.multiple,name:this.props.name,style:{display:"none"},ref:function(t){e.inputElement=t},onChange:this.onDrop};return c["default"].createElement("div",null,c["default"].createElement("input",t),c["default"].createElement("div",{className:this.props.className,onClick:this.props.clickable===!0?this.openFileChooser:null,onDrop:this.onDrop,onDragOver:this.onDragOver,onDragEnter:this.onDragEnter,onDragLeave:this.onDragLeave,ref:function(t){e.dropzone=t},style:this.props.style},this.props.children))}}]),t}(c["default"].Component);d.propTypes={children:p["default"].oneOfType([p["default"].arrayOf(p["default"].node),p["default"].node]),className:p["default"].string.isRequired,dropActiveClassName:p["default"].string,onChange:p["default"].func,onError:p["default"].func,accepts:p["default"].array,multiple:p["default"].bool,maxFiles:p["default"].number,maxFileSize:p["default"].number,minFileSize:p["default"].number,clickable:p["default"].bool,name:p["default"].string,style:p["default"].object},d.defaultProps={onChange:function(e){console.log(e)},onError:function(e,t){console.log("error code "+e.code+": "+e.message)},className:"files-dropzone",dropActiveClassName:"files-dropzone-active",accepts:null,multiple:!0,maxFiles:1/0,maxFileSize:1/0,minFileSize:0,name:"file",clickable:!0},t["default"]=d},function(t,n){t.exports=e},function(e,t,n){(function(t){if("production"!==t.env.NODE_ENV){var r="function"==typeof Symbol&&Symbol["for"]&&Symbol["for"]("react.element")||60103,o=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},i=!0;e.exports=n(4)(o,i)}else e.exports=n(10)()}).call(t,n(3))},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(c===setTimeout)return setTimeout(e,0);if((c===n||!c)&&setTimeout)return c=setTimeout,setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function i(e){if(f===clearTimeout)return clearTimeout(e);if((f===r||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function a(){h&&d&&(h=!1,d.length?y=d.concat(y):v=-1,y.length&&u())}function u(){if(!h){var e=o(a);h=!0;for(var t=y.length;t;){for(d=y,y=[];++v1)for(var n=1;ns&&(i(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",y,p),u[v]=!0,s++)}return null==l[f]?r?new c(null===l[f]?"The "+d+" `"+y+"` is marked as required "+("in `"+p+"`, but its value is `null`."):"The "+d+" `"+y+"` is marked as required in "+("`"+p+"`, but its value is `undefined`.")):null:e(l,f,p,d,y)}if("production"!==t.env.NODE_ENV)var u={},s=0;var l=r.bind(null,!1);return l.isRequired=r.bind(null,!0),l}function p(e){function t(t,n,r,o,i,a){var u=t[n],s=O(u);if(s!==e){var l=k(u);return new c("Invalid "+o+" `"+i+"` of type "+("`"+l+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return f(t)}function d(){return f(r.thatReturnsNull)}function y(e){function t(t,n,r,o,i){if("function"!=typeof e)return new c("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=t[n];if(!Array.isArray(u)){var s=O(u);return new c("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+r+"`, expected an array."))}for(var l=0;l1?t-1:0),r=1;t>r;r++)n[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,function(){return n[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(a){}};o=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var r=arguments.length,o=Array(r>2?r-2:0),i=2;r>i;i++)o[i-2]=arguments[i];e.apply(void 0,[n].concat(o))}}}(),e.exports=o}).call(t,n(3))},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){(function(t){"use strict";function r(e,n,r,s,l){if("production"!==t.env.NODE_ENV)for(var c in e)if(e.hasOwnProperty(c)){var f;try{o("function"==typeof e[c],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",s||"React class",r,c),f=e[c](n,c,s,r,null,a)}catch(p){f=p}if(i(!f||f instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",s||"React class",r,c,typeof f),f instanceof Error&&!(f.message in u)){u[f.message]=!0;var d=l?l():"";i(!1,"Failed %s type: %s%s",r,f.message,null!=d?d:"")}}}if("production"!==t.env.NODE_ENV)var o=n(6),i=n(7),a=n(8),u={};e.exports=r}).call(t,n(3))},function(e,t,n){"use strict";var r=n(5),o=n(6),i=n(8);e.exports=function(){function e(e,t,n,r,a,u){u!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}}])}); \ No newline at end of file +!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n=t("object"==typeof exports?require("react"):e.react);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/static/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t1&&(n=[n[0]]);for(var r=[],i=0;i=this.props.maxFiles){this.onError({code:4,message:"maximum file count reached"},a);break}this.fileTypeAcceptable(a)&&this.fileSizeAcceptable(a)&&r.push(a)}this.setState({files:this.props.multiple===!1?r:[].concat(o(this.state.files),r)},function(){t.props.onChange.call(t,t.state.files)})}},{key:"onDragOver",value:function(e){e.preventDefault(),e.stopPropagation()}},{key:"onDragEnter",value:function(e){var t=this.dropzone;t.className+=" "+this.props.dropActiveClassName}},{key:"onDragLeave",value:function(e){var t=this.dropzone;this.dropzone.className=t.className.replace(" "+this.props.dropActiveClassName,"")}},{key:"openFileChooser",value:function(){this.inputElement.value=null,this.inputElement.click()}},{key:"fileTypeAcceptable",value:function(e){var t=this,n=this.props.accepts;if(!n)return!0;var r=n.some(function(n){if(e.type&&n.match(d)){var r=t.mimeTypeLeft(e.type),o=t.mimeTypeRight(e.type),i=n.split("/")[0],a=n.split("/")[1];if(i&&a){if(i===r&&"*"===a)return!0;if(i===r&&a===o)return!0}}else if(e.extension&&n.match(y)){var u=n.substr(1);return e.extension===u}return!1});return r||this.onError({code:1,message:e.name+" is not a valid file type"},e),r}},{key:"fileSizeAcceptable",value:function(e){return e.size>this.props.maxFileSize?(this.onError({code:2,message:e.name+" is too large"},e),!1):e.size1?t[t.length-1]:"none"}},{key:"fileSizeReadable",value:function(e){return e>=1e9?Math.ceil(e/1e9)+"GB":e>=1e6?Math.ceil(e/1e6)+"MB":e>=1e3?Math.ceil(e/1e3)+"kB":Math.ceil(e)+"B"}},{key:"onError",value:function(e,t){this.props.onError.call(this,e,t)}},{key:"removeFile",value:function(e){var t=this;this.setState({files:this.state.files.filter(function(t){return t.id!==e.id})},function(){t.props.onChange.call(t,t.state.files)})}},{key:"removeFiles",value:function(){var e=this;this.setState({files:[]},function(){e.props.onChange.call(e,e.state.files)})}},{key:"render",value:function(){var e=this,t={type:"file",accept:this.props.accepts?this.props.accepts.join():"",multiple:this.props.multiple,name:this.props.name,style:{display:"none"},ref:function(t){e.inputElement=t},onChange:this.onDrop};return c["default"].createElement("div",null,c["default"].createElement("input",t),c["default"].createElement("div",{className:this.props.className,onClick:this.props.clickable===!0?this.openFileChooser:null,onDrop:this.onDrop,onDragOver:this.onDragOver,onDragEnter:this.onDragEnter,onDragLeave:this.onDragLeave,ref:function(t){e.dropzone=t},style:this.props.style},this.props.children))}}]),t}(c["default"].Component);h.propTypes={children:p["default"].oneOfType([p["default"].arrayOf(p["default"].node),p["default"].node]),className:p["default"].string.isRequired,dropActiveClassName:p["default"].string,onChange:p["default"].func,onError:p["default"].func,accepts:p["default"].array,multiple:p["default"].bool,maxFiles:p["default"].number,maxFileSize:p["default"].number,minFileSize:p["default"].number,clickable:p["default"].bool,name:p["default"].string,style:p["default"].object},h.defaultProps={onChange:function(e){console.log(e)},onError:function(e,t){console.log("error code "+e.code+": "+e.message)},className:"files-dropzone",dropActiveClassName:"files-dropzone-active",accepts:null,multiple:!0,maxFiles:1/0,maxFileSize:1/0,minFileSize:0,name:"file",clickable:!0},t["default"]=h},function(t,n){t.exports=e},function(e,t,n){(function(t){if("production"!==t.env.NODE_ENV){var r="function"==typeof Symbol&&Symbol["for"]&&Symbol["for"]("react.element")||60103,o=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},i=!0;e.exports=n(4)(o,i)}else e.exports=n(10)()}).call(t,n(3))},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(c===setTimeout)return setTimeout(e,0);if((c===n||!c)&&setTimeout)return c=setTimeout,setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function i(e){if(f===clearTimeout)return clearTimeout(e);if((f===r||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function a(){h&&d&&(h=!1,d.length?y=d.concat(y):v=-1,y.length&&u())}function u(){if(!h){var e=o(a);h=!0;for(var t=y.length;t;){for(d=y,y=[];++v1)for(var n=1;ns&&(i(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",y,p),u[v]=!0,s++)}return null==l[f]?r?new c(null===l[f]?"The "+d+" `"+y+"` is marked as required "+("in `"+p+"`, but its value is `null`."):"The "+d+" `"+y+"` is marked as required in "+("`"+p+"`, but its value is `undefined`.")):null:e(l,f,p,d,y)}if("production"!==t.env.NODE_ENV)var u={},s=0;var l=r.bind(null,!1);return l.isRequired=r.bind(null,!0),l}function p(e){function t(t,n,r,o,i,a){var u=t[n],s=O(u);if(s!==e){var l=k(u);return new c("Invalid "+o+" `"+i+"` of type "+("`"+l+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return f(t)}function d(){return f(r.thatReturnsNull)}function y(e){function t(t,n,r,o,i){if("function"!=typeof e)return new c("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=t[n];if(!Array.isArray(u)){var s=O(u);return new c("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+r+"`, expected an array."))}for(var l=0;l1?t-1:0),r=1;t>r;r++)n[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,function(){return n[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(a){}};o=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var r=arguments.length,o=Array(r>2?r-2:0),i=2;r>i;i++)o[i-2]=arguments[i];e.apply(void 0,[n].concat(o))}}}(),e.exports=o}).call(t,n(3))},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){(function(t){"use strict";function r(e,n,r,s,l){if("production"!==t.env.NODE_ENV)for(var c in e)if(e.hasOwnProperty(c)){var f;try{o("function"==typeof e[c],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",s||"React class",r,c),f=e[c](n,c,s,r,null,a)}catch(p){f=p}if(i(!f||f instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",s||"React class",r,c,typeof f),f instanceof Error&&!(f.message in u)){u[f.message]=!0;var d=l?l():"";i(!1,"Failed %s type: %s%s",r,f.message,null!=d?d:"")}}}if("production"!==t.env.NODE_ENV)var o=n(6),i=n(7),a=n(8),u={};e.exports=r}).call(t,n(3))},function(e,t,n){"use strict";var r=n(5),o=n(6),i=n(8);e.exports=function(){function e(e,t,n,r,a,u){u!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}}])}); \ No newline at end of file diff --git a/package.json b/package.json index 008f9fd..f59d1a8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-files", - "version": "2.4.3", + "version": "2.4.4", "main": "dist/index.js", "description": "A file input (dropzone) management component for React", "scripts": {