From 0db3ad6f12c63507c25cd4559b768bcca21334f0 Mon Sep 17 00:00:00 2001 From: Oussama Bouthouri Date: Mon, 4 Jun 2018 18:02:40 +0100 Subject: [PATCH 1/5] fixes #43 submit is not triggered directly anymore --- src/component/compiled.js | 569 ++++++++++++++++++++------------------ src/component/index.js | 2 +- 2 files changed, 303 insertions(+), 268 deletions(-) diff --git a/src/component/compiled.js b/src/component/compiled.js index f2e71aaa..a5e6fd61 100644 --- a/src/component/compiled.js +++ b/src/component/compiled.js @@ -1,7 +1,7 @@ 'use strict'; Object.defineProperty(exports, "__esModule", { - value: true + value: true }); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); @@ -33,308 +33,343 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var styles = { - display: "flex", - alignItems: "center", - justifyContent: "center", - flexWrap: "wrap", - width: "100%" + display: "flex", + alignItems: "center", + justifyContent: "center", + flexWrap: "wrap", + width: "100%" }; var ReactImageUploadComponent = function (_React$Component) { - _inherits(ReactImageUploadComponent, _React$Component); - - function ReactImageUploadComponent(props) { - _classCallCheck(this, ReactImageUploadComponent); - - var _this2 = _possibleConstructorReturn(this, (ReactImageUploadComponent.__proto__ || Object.getPrototypeOf(ReactImageUploadComponent)).call(this, props)); - - _this2.state = { - pictures: [], - notAcceptedFileType: [], - notAcceptedFileSize: [] - }; - _this2.inputElement = ''; - _this2.onDropFile = _this2.onDropFile.bind(_this2); - _this2.triggerFileUpload = _this2.triggerFileUpload.bind(_this2); - return _this2; - } - - /* + _inherits(ReactImageUploadComponent, _React$Component); + + function ReactImageUploadComponent(props) { + _classCallCheck(this, ReactImageUploadComponent); + + var _this2 = _possibleConstructorReturn(this, (ReactImageUploadComponent.__proto__ || Object.getPrototypeOf(ReactImageUploadComponent)).call(this, props)); + + _this2.state = { + pictures: [], + files: [], + notAcceptedFileType: [], + notAcceptedFileSize: [] + }; + _this2.inputElement = ''; + _this2.onDropFile = _this2.onDropFile.bind(_this2); + _this2.triggerFileUpload = _this2.triggerFileUpload.bind(_this2); + return _this2; + } + + /* On button click, trigger input file to open */ - _createClass(ReactImageUploadComponent, [{ - key: 'triggerFileUpload', - value: function triggerFileUpload() { - this.inputElement.click(); - } + _createClass(ReactImageUploadComponent, [{ + key: 'triggerFileUpload', + value: function triggerFileUpload() { + this.inputElement.click(); + } - /* + /* Handle file validation */ - }, { - key: 'onDropFile', - value: function onDropFile(e) { - var files = e.target.files; - var _this = this; - // If callback giving, fire. - if (typeof this.props.onChange === "function") { - this.props.onChange(files); - } - // Iterate over all uploaded files - for (var i = 0; i < files.length; i++) { - var f = files[i]; - // Check for file extension - if (!this.hasExtension(f.name)) { - var newArray = _this.state.notAcceptedFileType.slice(); - newArray.push(f.name); - _this.setState({ notAcceptedFileType: newArray }); - continue; - } - // Check for file size - if (f.size > this.props.maxFileSize) { - var _newArray = _this.state.notAcceptedFileSize.slice(); - _newArray.push(f.name); - _this.setState({ notAcceptedFileSize: _newArray }); - continue; - } - - var reader = new FileReader(); - // Read the image via FileReader API and save image result in state. - reader.onload = function () { - return function (e) { - if (_this.props.singleImage === true) { - _this.setState({ pictures: [e.target.result] }); - } else if (_this.state.pictures.indexOf(e.target.result) === -1) { - var _newArray2 = _this.state.pictures.slice(); - _newArray2.push(e.target.result); - _this.setState({ pictures: _newArray2 }); - } - }; - }(f); - reader.readAsDataURL(f); - } - } - - /* + }, { + key: 'onDropFile', + value: function onDropFile(e) { + var _this3 = this; + + var files = e.target.files; + var _this = this; + + // Iterate over all uploaded files + + var _loop = function _loop(i) { + var f = files[i]; + // Check for file extension + if (!_this3.hasExtension(f.name)) { + var newArray = _this.state.notAcceptedFileType.slice(); + newArray.push(f.name); + _this.setState({ notAcceptedFileType: newArray }); + return 'continue'; + } + // Check for file size + if (f.size > _this3.props.maxFileSize) { + var _newArray = _this.state.notAcceptedFileSize.slice(); + _newArray.push(f.name); + _this.setState({ notAcceptedFileSize: _newArray }); + return 'continue'; + } + + var reader = new FileReader(); + // Read the image via FileReader API and save image result in state. + reader.onload = function () { + return function (e) { + // Add the file name to the data URL + var dataURL = e.target.result; + dataURL = dataURL.replace(";base64", ';name=' + f.name + ';base64'); + + if (_this.props.singleImage === true) { + _this.setState({ pictures: [dataURL], files: [f] }, function () { + _this.props.onChange(_this.state.files, _this.state.pictures); + }); + } else if (_this.state.pictures.indexOf(dataURL) === -1) { + var _newArray2 = _this.state.pictures.slice(); + _newArray2.push(dataURL); + + var newFiles = _this.state.files.slice(); + newFiles.push(f); + + _this.setState({ pictures: _newArray2, files: newFiles }, function () { + _this.props.onChange(_this.state.files, _this.state.pictures); + }); + } + }; + }(f); + reader.readAsDataURL(f); + }; + + for (var i = 0; i < files.length; i++) { + var _ret = _loop(i); + + if (_ret === 'continue') continue; + } + } + + /* Render the upload icon */ - }, { - key: 'renderIcon', - value: function renderIcon() { - if (this.props.withIcon) { - return _react2.default.createElement('img', { src: _UploadIcon2.default, className: 'uploadIcon', alt: 'Upload Icon' }); - } - } + }, { + key: 'renderIcon', + value: function renderIcon() { + if (this.props.withIcon) { + return _react2.default.createElement('img', { src: _UploadIcon2.default, className: 'uploadIcon', alt: 'Upload Icon' }); + } + } - /* + /* Render label */ - }, { - key: 'renderLabel', - value: function renderLabel() { - if (this.props.withLabel) { - return _react2.default.createElement( - 'p', - { className: this.props.labelClass, style: this.props.labelStyles }, - this.props.label - ); - } - } - - /* + }, { + key: 'renderLabel', + value: function renderLabel() { + if (this.props.withLabel) { + return _react2.default.createElement( + 'p', + { className: this.props.labelClass, style: this.props.labelStyles }, + this.props.label + ); + } + } + + /* Check file extension (onDropFile) */ - }, { - key: 'hasExtension', - value: function hasExtension(fileName) { - return new RegExp('(' + this.props.imgExtension.join('|').replace(/\./g, '\\.') + ')$').test(fileName); - } + }, { + key: 'hasExtension', + value: function hasExtension(fileName) { + var pattern = '(' + this.props.imgExtension.join('|').replace(/\./g, '\\.') + ')$'; + return new RegExp(pattern, 'i').test(fileName); + } - /* + /* Remove the image from state */ - }, { - key: 'removeImage', - value: function removeImage(picture) { - var filteredAry = this.state.pictures.filter(function (e) { - return e !== picture; - }); - this.setState({ pictures: filteredAry }); - } - - /* + }, { + key: 'removeImage', + value: function removeImage(picture) { + var _this4 = this; + + var removeIndex = this.state.pictures.findIndex(function (e) { + return e === picture; + }); + var filteredPictures = this.state.pictures.filter(function (e, index) { + return index !== removeIndex; + }); + var filteredFiles = this.state.files.filter(function (e, index) { + return index !== removeIndex; + }); + + this.setState({ pictures: filteredPictures, files: filteredFiles }, function () { + _this4.props.onChange(_this4.state.files, _this4.state.pictures); + }); + } + + /* Check if any errors && render */ - }, { - key: 'renderErrors', - value: function renderErrors() { - var _this3 = this; - - var notAccepted = ''; - if (this.state.notAcceptedFileType.length > 0) { - notAccepted = this.state.notAcceptedFileType.map(function (error, index) { - return _react2.default.createElement( - 'div', - { className: 'errorMessage' + _this3.props.errorClass, key: index, style: _this3.props.errorStyle }, - '* ', - error, - ' ', - _this3.props.fileTypeError - ); - }); - } - if (this.state.notAcceptedFileSize.length > 0) { - notAccepted = this.state.notAcceptedFileSize.map(function (error, index) { - return _react2.default.createElement( - 'div', - { className: 'errorMessage' + _this3.props.errorClass, key: index, style: _this3.props.errorStyle }, - '* ', - error, - ' ', - _this3.props.fileSizeError - ); - }); - } - return notAccepted; - } - - /* + }, { + key: 'renderErrors', + value: function renderErrors() { + var _this5 = this; + + var notAccepted = ''; + if (this.state.notAcceptedFileType.length > 0) { + notAccepted = this.state.notAcceptedFileType.map(function (error, index) { + return _react2.default.createElement( + 'div', + { className: 'errorMessage ' + _this5.props.errorClass, key: index, style: _this5.props.errorStyle }, + '* ', + error, + ' ', + _this5.props.fileTypeError + ); + }); + } + if (this.state.notAcceptedFileSize.length > 0) { + notAccepted = this.state.notAcceptedFileSize.map(function (error, index) { + return _react2.default.createElement( + 'div', + { className: 'errorMessage ' + _this5.props.errorClass, key: index, style: _this5.props.errorStyle }, + '* ', + error, + ' ', + _this5.props.fileSizeError + ); + }); + } + return notAccepted; + } + + /* Render preview images */ - }, { - key: 'renderPreview', - value: function renderPreview() { - return _react2.default.createElement( - 'div', - { className: 'uploadPicturesWrapper' }, - _react2.default.createElement( - _reactFlipMove2.default, - { enterAnimation: 'fade', leaveAnimation: 'fade', style: styles }, - this.renderPreviewPictures() - ) - ); - } - }, { - key: 'renderPreviewPictures', - value: function renderPreviewPictures() { - var _this4 = this; - - return this.state.pictures.map(function (picture, index) { - return _react2.default.createElement( - 'div', - { key: index, className: 'uploadPictureContainer' }, - _react2.default.createElement( - 'div', - { className: 'deleteImage', onClick: function onClick() { - return _this4.removeImage(picture); - } }, - 'X' - ), - _react2.default.createElement('img', { src: picture, className: 'uploadPicture', alt: 'preview' }) - ); - }); - } - }, { - key: 'render', - value: function render() { - var _this5 = this; - - return _react2.default.createElement( - 'div', - { className: "fileUploader " + this.props.className, style: this.props.style }, - _react2.default.createElement( - 'div', - { className: 'fileContainer' }, - this.renderIcon(), - this.renderLabel(), - _react2.default.createElement( - 'div', - { className: 'errorsContainer' }, - this.renderErrors() - ), - _react2.default.createElement( - 'button', - { - className: "chooseFileButton " + this.props.buttonClassName, - style: this.props.buttonStyles, - onClick: this.triggerFileUpload - }, - this.props.buttonText - ), - _react2.default.createElement('input', { - type: 'file', - ref: function ref(input) { - return _this5.inputElement = input; - }, - name: this.props.name, - multiple: 'multiple', - onChange: this.onDropFile, - accept: this.props.accept - }), - this.props.withPreview ? this.renderPreview() : null - ) - ); - } - }]); - - return ReactImageUploadComponent; + }, { + key: 'renderPreview', + value: function renderPreview() { + return _react2.default.createElement( + 'div', + { className: 'uploadPicturesWrapper' }, + _react2.default.createElement( + _reactFlipMove2.default, + { enterAnimation: 'fade', leaveAnimation: 'fade', style: styles }, + this.renderPreviewPictures() + ) + ); + } + }, { + key: 'renderPreviewPictures', + value: function renderPreviewPictures() { + var _this6 = this; + + return this.state.pictures.map(function (picture, index) { + return _react2.default.createElement( + 'div', + { key: index, className: 'uploadPictureContainer' }, + _react2.default.createElement( + 'div', + { className: 'deleteImage', onClick: function onClick() { + return _this6.removeImage(picture); + } }, + 'X' + ), + _react2.default.createElement('img', { src: picture, className: 'uploadPicture', alt: 'preview' }) + ); + }); + } + }, { + key: 'render', + value: function render() { + var _this7 = this; + + return _react2.default.createElement( + 'div', + { className: "fileUploader " + this.props.className, style: this.props.style }, + _react2.default.createElement( + 'div', + { className: 'fileContainer' }, + this.renderIcon(), + this.renderLabel(), + _react2.default.createElement( + 'div', + { className: 'errorsContainer' }, + this.renderErrors() + ), + _react2.default.createElement( + 'button', + { + type: this.props.buttonType, + className: "chooseFileButton " + this.props.buttonClassName, + style: this.props.buttonStyles, + onClick: this.triggerFileUpload + }, + this.props.buttonText + ), + _react2.default.createElement('input', { + type: 'file', + ref: function ref(input) { + return _this7.inputElement = input; + }, + name: this.props.name, + multiple: 'multiple', + onChange: this.onDropFile, + accept: this.props.accept + }), + this.props.withPreview ? this.renderPreview() : null + ) + ); + } + }]); + + return ReactImageUploadComponent; }(_react2.default.Component); ReactImageUploadComponent.defaultProps = { - className: '', - buttonClassName: {}, - buttonStyles: {}, - withPreview: false, - accept: "accept=image/*", - name: "", - withIcon: true, - buttonText: "Choose images", - withLabel: true, - label: "Max file size: 5mb, accepted: jpg|gif|png", - labelStyles: {}, - labelClass: "", - imgExtension: ['.jpg', '.gif', '.png'], - maxFileSize: 5242880, - fileSizeError: " file size is too big", - fileTypeError: " is not supported file extension", - errorClass: "", - style: {}, - errorStyle: {}, - singleImage: false + className: '', + buttonClassName: "", + buttonStyles: {}, + withPreview: false, + accept: "image/*", + name: "", + withIcon: true, + buttonText: "Choose images", + buttonType: "button", + withLabel: true, + label: "Max file size: 5mb, accepted: jpg|gif|png", + labelStyles: {}, + labelClass: "", + imgExtension: ['.jpg', '.gif', '.png'], + maxFileSize: 5242880, + fileSizeError: " file size is too big", + fileTypeError: " is not a supported file extension", + errorClass: "", + style: {}, + errorStyle: {}, + singleImage: false, + onChange: function onChange() {} }; ReactImageUploadComponent.propTypes = { - style: _propTypes2.default.object, - className: _propTypes2.default.string, - onChange: _propTypes2.default.func, - onDelete: _propTypes2.default.func, - buttonClassName: _propTypes2.default.object, - buttonStyles: _propTypes2.default.object, - withPreview: _propTypes2.default.bool, - accept: _propTypes2.default.string, - name: _propTypes2.default.string, - withIcon: _propTypes2.default.bool, - buttonText: _propTypes2.default.string, - withLabel: _propTypes2.default.bool, - label: _propTypes2.default.string, - labelStyles: _propTypes2.default.object, - labelClass: _propTypes2.default.string, - imgExtension: _propTypes2.default.array, - maxFileSize: _propTypes2.default.number, - fileSizeError: _propTypes2.default.string, - fileTypeError: _propTypes2.default.string, - errorClass: _propTypes2.default.string, - errorStyle: _propTypes2.default.object, - singleImage: _propTypes2.default.bool + style: _propTypes2.default.object, + className: _propTypes2.default.string, + onChange: _propTypes2.default.func, + onDelete: _propTypes2.default.func, + buttonClassName: _propTypes2.default.string, + buttonStyles: _propTypes2.default.object, + buttonType: _propTypes2.default.string, + withPreview: _propTypes2.default.bool, + accept: _propTypes2.default.string, + name: _propTypes2.default.string, + withIcon: _propTypes2.default.bool, + buttonText: _propTypes2.default.string, + withLabel: _propTypes2.default.bool, + label: _propTypes2.default.string, + labelStyles: _propTypes2.default.object, + labelClass: _propTypes2.default.string, + imgExtension: _propTypes2.default.array, + maxFileSize: _propTypes2.default.number, + fileSizeError: _propTypes2.default.string, + fileTypeError: _propTypes2.default.string, + errorClass: _propTypes2.default.string, + errorStyle: _propTypes2.default.object, + singleImage: _propTypes2.default.bool }; -exports.default = ReactImageUploadComponent; +exports.default = ReactImageUploadComponent; \ No newline at end of file diff --git a/src/component/index.js b/src/component/index.js index 341e99ef..0acdb674 100644 --- a/src/component/index.js +++ b/src/component/index.js @@ -217,7 +217,7 @@ ReactImageUploadComponent.defaultProps = { name: "", withIcon: true, buttonText: "Choose images", - buttonType: "submit", + buttonType: "button", withLabel: true, label: "Max file size: 5mb, accepted: jpg|gif|png", labelStyles: {}, From 811d63c916052a7081a704e560db61a439163d43 Mon Sep 17 00:00:00 2001 From: Oussama Bouthouri Date: Tue, 5 Jun 2018 09:42:36 +0100 Subject: [PATCH 2/5] fix #45 correct single image upload behavior --- src/component/compiled.js | 521 ++++++++++++++++---------------------- src/component/index.js | 2 +- 2 files changed, 216 insertions(+), 307 deletions(-) diff --git a/src/component/compiled.js b/src/component/compiled.js index a5e6fd61..e4573fdd 100644 --- a/src/component/compiled.js +++ b/src/component/compiled.js @@ -1,38 +1,10 @@ -'use strict'; +import React from 'react'; +import PropTypes from 'prop-types'; +import './index.css'; +import FlipMove from 'react-flip-move'; +import UploadIcon from './UploadIcon.svg'; -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -require('./index.css'); - -var _reactFlipMove = require('react-flip-move'); - -var _reactFlipMove2 = _interopRequireDefault(_reactFlipMove); - -var _UploadIcon = require('./UploadIcon.svg'); - -var _UploadIcon2 = _interopRequireDefault(_UploadIcon); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var styles = { +const styles = { display: "flex", alignItems: "center", justifyContent: "center", @@ -40,286 +12,223 @@ var styles = { width: "100%" }; -var ReactImageUploadComponent = function (_React$Component) { - _inherits(ReactImageUploadComponent, _React$Component); - - function ReactImageUploadComponent(props) { - _classCallCheck(this, ReactImageUploadComponent); - - var _this2 = _possibleConstructorReturn(this, (ReactImageUploadComponent.__proto__ || Object.getPrototypeOf(ReactImageUploadComponent)).call(this, props)); - - _this2.state = { +class ReactImageUploadComponent extends React.Component { + constructor(props) { + super(props); + this.state = { pictures: [], files: [], notAcceptedFileType: [], notAcceptedFileSize: [] }; - _this2.inputElement = ''; - _this2.onDropFile = _this2.onDropFile.bind(_this2); - _this2.triggerFileUpload = _this2.triggerFileUpload.bind(_this2); - return _this2; + this.inputElement = ''; + this.onDropFile = this.onDropFile.bind(this); + this.triggerFileUpload = this.triggerFileUpload.bind(this); } /* On button click, trigger input file to open */ + triggerFileUpload() { + this.inputElement.click(); + } - - _createClass(ReactImageUploadComponent, [{ - key: 'triggerFileUpload', - value: function triggerFileUpload() { - this.inputElement.click(); - } - - /* - Handle file validation - */ - - }, { - key: 'onDropFile', - value: function onDropFile(e) { - var _this3 = this; - - var files = e.target.files; - var _this = this; - - // Iterate over all uploaded files - - var _loop = function _loop(i) { - var f = files[i]; - // Check for file extension - if (!_this3.hasExtension(f.name)) { - var newArray = _this.state.notAcceptedFileType.slice(); - newArray.push(f.name); - _this.setState({ notAcceptedFileType: newArray }); - return 'continue'; - } - // Check for file size - if (f.size > _this3.props.maxFileSize) { - var _newArray = _this.state.notAcceptedFileSize.slice(); - _newArray.push(f.name); - _this.setState({ notAcceptedFileSize: _newArray }); - return 'continue'; - } - - var reader = new FileReader(); - // Read the image via FileReader API and save image result in state. - reader.onload = function () { - return function (e) { - // Add the file name to the data URL - var dataURL = e.target.result; - dataURL = dataURL.replace(";base64", ';name=' + f.name + ';base64'); - - if (_this.props.singleImage === true) { - _this.setState({ pictures: [dataURL], files: [f] }, function () { - _this.props.onChange(_this.state.files, _this.state.pictures); - }); - } else if (_this.state.pictures.indexOf(dataURL) === -1) { - var _newArray2 = _this.state.pictures.slice(); - _newArray2.push(dataURL); - - var newFiles = _this.state.files.slice(); - newFiles.push(f); - - _this.setState({ pictures: _newArray2, files: newFiles }, function () { - _this.props.onChange(_this.state.files, _this.state.pictures); - }); - } - }; - }(f); - reader.readAsDataURL(f); - }; - - for (var i = 0; i < files.length; i++) { - var _ret = _loop(i); - - if (_ret === 'continue') continue; + /* + Handle file validation + */ + onDropFile(e) { + const files = e.target.files; + const _this = this; + + // Iterate over all uploaded files + for (let i = 0; i < files.length; i++) { + let f = files[i]; + // Check for file extension + if (!this.hasExtension(f.name)) { + const newArray = _this.state.notAcceptedFileType.slice(); + newArray.push(f.name); + _this.setState({ notAcceptedFileType: newArray }); + continue; } - } - - /* - Render the upload icon - */ - - }, { - key: 'renderIcon', - value: function renderIcon() { - if (this.props.withIcon) { - return _react2.default.createElement('img', { src: _UploadIcon2.default, className: 'uploadIcon', alt: 'Upload Icon' }); + // Check for file size + if (f.size > this.props.maxFileSize) { + const newArray = _this.state.notAcceptedFileSize.slice(); + newArray.push(f.name); + _this.setState({ notAcceptedFileSize: newArray }); + continue; } - } - - /* - Render label - */ - }, { - key: 'renderLabel', - value: function renderLabel() { - if (this.props.withLabel) { - return _react2.default.createElement( - 'p', - { className: this.props.labelClass, style: this.props.labelStyles }, - this.props.label - ); - } + const reader = new FileReader(); + // Read the image via FileReader API and save image result in state. + reader.onload = function () { + return function (e) { + // Add the file name to the data URL + let dataURL = e.target.result; + dataURL = dataURL.replace(";base64", `;name=${f.name};base64`); + + if (_this.props.singleImage === true) { + _this.setState({ pictures: [dataURL], files: [f] }, () => { + _this.props.onChange(_this.state.files, _this.state.pictures); + }); + } else if (_this.state.pictures.indexOf(dataURL) === -1) { + const newArray = _this.state.pictures.slice(); + newArray.push(dataURL); + + const newFiles = _this.state.files.slice(); + newFiles.push(f); + + _this.setState({ pictures: newArray, files: newFiles }, () => { + _this.props.onChange(_this.state.files, _this.state.pictures); + }); + } + }; + }(f); + reader.readAsDataURL(f); } + } - /* - Check file extension (onDropFile) + /* + Render the upload icon */ - - }, { - key: 'hasExtension', - value: function hasExtension(fileName) { - var pattern = '(' + this.props.imgExtension.join('|').replace(/\./g, '\\.') + ')$'; - return new RegExp(pattern, 'i').test(fileName); + renderIcon() { + if (this.props.withIcon) { + return React.createElement('img', { src: UploadIcon, className: 'uploadIcon', alt: 'Upload Icon' }); } + } - /* - Remove the image from state - */ - - }, { - key: 'removeImage', - value: function removeImage(picture) { - var _this4 = this; - - var removeIndex = this.state.pictures.findIndex(function (e) { - return e === picture; - }); - var filteredPictures = this.state.pictures.filter(function (e, index) { - return index !== removeIndex; - }); - var filteredFiles = this.state.files.filter(function (e, index) { - return index !== removeIndex; - }); - - this.setState({ pictures: filteredPictures, files: filteredFiles }, function () { - _this4.props.onChange(_this4.state.files, _this4.state.pictures); - }); + /* + Render label + */ + renderLabel() { + if (this.props.withLabel) { + return React.createElement( + 'p', + { className: this.props.labelClass, style: this.props.labelStyles }, + this.props.label + ); } + } - /* - Check if any errors && render - */ - - }, { - key: 'renderErrors', - value: function renderErrors() { - var _this5 = this; - - var notAccepted = ''; - if (this.state.notAcceptedFileType.length > 0) { - notAccepted = this.state.notAcceptedFileType.map(function (error, index) { - return _react2.default.createElement( - 'div', - { className: 'errorMessage ' + _this5.props.errorClass, key: index, style: _this5.props.errorStyle }, - '* ', - error, - ' ', - _this5.props.fileTypeError - ); - }); - } - if (this.state.notAcceptedFileSize.length > 0) { - notAccepted = this.state.notAcceptedFileSize.map(function (error, index) { - return _react2.default.createElement( - 'div', - { className: 'errorMessage ' + _this5.props.errorClass, key: index, style: _this5.props.errorStyle }, - '* ', - error, - ' ', - _this5.props.fileSizeError - ); - }); - } - return notAccepted; - } + /* + Check file extension (onDropFile) + */ + hasExtension(fileName) { + const pattern = '(' + this.props.imgExtension.join('|').replace(/\./g, '\\.') + ')$'; + return new RegExp(pattern, 'i').test(fileName); + } - /* - Render preview images - */ + /* + Remove the image from state + */ + removeImage(picture) { + const removeIndex = this.state.pictures.findIndex(e => e === picture); + const filteredPictures = this.state.pictures.filter((e, index) => index !== removeIndex); + const filteredFiles = this.state.files.filter((e, index) => index !== removeIndex); + + this.setState({ pictures: filteredPictures, files: filteredFiles }, () => { + this.props.onChange(this.state.files, this.state.pictures); + }); + } - }, { - key: 'renderPreview', - value: function renderPreview() { - return _react2.default.createElement( - 'div', - { className: 'uploadPicturesWrapper' }, - _react2.default.createElement( - _reactFlipMove2.default, - { enterAnimation: 'fade', leaveAnimation: 'fade', style: styles }, - this.renderPreviewPictures() - ) - ); + /* + Check if any errors && render + */ + renderErrors() { + let notAccepted = ''; + if (this.state.notAcceptedFileType.length > 0) { + notAccepted = this.state.notAcceptedFileType.map((error, index) => { + return React.createElement( + 'div', + { className: 'errorMessage ' + this.props.errorClass, key: index, style: this.props.errorStyle }, + '* ', + error, + ' ', + this.props.fileTypeError + ); + }); } - }, { - key: 'renderPreviewPictures', - value: function renderPreviewPictures() { - var _this6 = this; - - return this.state.pictures.map(function (picture, index) { - return _react2.default.createElement( + if (this.state.notAcceptedFileSize.length > 0) { + notAccepted = this.state.notAcceptedFileSize.map((error, index) => { + return React.createElement( 'div', - { key: index, className: 'uploadPictureContainer' }, - _react2.default.createElement( - 'div', - { className: 'deleteImage', onClick: function onClick() { - return _this6.removeImage(picture); - } }, - 'X' - ), - _react2.default.createElement('img', { src: picture, className: 'uploadPicture', alt: 'preview' }) + { className: 'errorMessage ' + this.props.errorClass, key: index, style: this.props.errorStyle }, + '* ', + error, + ' ', + this.props.fileSizeError ); }); } - }, { - key: 'render', - value: function render() { - var _this7 = this; + return notAccepted; + } + + /* + Render preview images + */ + renderPreview() { + return React.createElement( + 'div', + { className: 'uploadPicturesWrapper' }, + React.createElement( + FlipMove, + { enterAnimation: 'fade', leaveAnimation: 'fade', style: styles }, + this.renderPreviewPictures() + ) + ); + } - return _react2.default.createElement( + renderPreviewPictures() { + return this.state.pictures.map((picture, index) => { + return React.createElement( 'div', - { className: "fileUploader " + this.props.className, style: this.props.style }, - _react2.default.createElement( + { key: index, className: 'uploadPictureContainer' }, + React.createElement( 'div', - { className: 'fileContainer' }, - this.renderIcon(), - this.renderLabel(), - _react2.default.createElement( - 'div', - { className: 'errorsContainer' }, - this.renderErrors() - ), - _react2.default.createElement( - 'button', - { - type: this.props.buttonType, - className: "chooseFileButton " + this.props.buttonClassName, - style: this.props.buttonStyles, - onClick: this.triggerFileUpload - }, - this.props.buttonText - ), - _react2.default.createElement('input', { - type: 'file', - ref: function ref(input) { - return _this7.inputElement = input; - }, - name: this.props.name, - multiple: 'multiple', - onChange: this.onDropFile, - accept: this.props.accept - }), - this.props.withPreview ? this.renderPreview() : null - ) + { className: 'deleteImage', onClick: () => this.removeImage(picture) }, + 'X' + ), + React.createElement('img', { src: picture, className: 'uploadPicture', alt: 'preview' }) ); - } - }]); + }); + } - return ReactImageUploadComponent; -}(_react2.default.Component); + render() { + return React.createElement( + 'div', + { className: "fileUploader " + this.props.className, style: this.props.style }, + React.createElement( + 'div', + { className: 'fileContainer' }, + this.renderIcon(), + this.renderLabel(), + React.createElement( + 'div', + { className: 'errorsContainer' }, + this.renderErrors() + ), + React.createElement( + 'button', + { + type: this.props.buttonType, + className: "chooseFileButton " + this.props.buttonClassName, + style: this.props.buttonStyles, + onClick: this.triggerFileUpload + }, + this.props.buttonText + ), + React.createElement('input', { + type: 'file', + ref: input => this.inputElement = input, + name: this.props.name, + multiple: !this.props.singleImage, + onChange: this.onDropFile, + accept: this.props.accept + }), + this.props.withPreview ? this.renderPreview() : null + ) + ); + } +} ReactImageUploadComponent.defaultProps = { className: '', @@ -343,33 +252,33 @@ ReactImageUploadComponent.defaultProps = { style: {}, errorStyle: {}, singleImage: false, - onChange: function onChange() {} + onChange: () => {} }; ReactImageUploadComponent.propTypes = { - style: _propTypes2.default.object, - className: _propTypes2.default.string, - onChange: _propTypes2.default.func, - onDelete: _propTypes2.default.func, - buttonClassName: _propTypes2.default.string, - buttonStyles: _propTypes2.default.object, - buttonType: _propTypes2.default.string, - withPreview: _propTypes2.default.bool, - accept: _propTypes2.default.string, - name: _propTypes2.default.string, - withIcon: _propTypes2.default.bool, - buttonText: _propTypes2.default.string, - withLabel: _propTypes2.default.bool, - label: _propTypes2.default.string, - labelStyles: _propTypes2.default.object, - labelClass: _propTypes2.default.string, - imgExtension: _propTypes2.default.array, - maxFileSize: _propTypes2.default.number, - fileSizeError: _propTypes2.default.string, - fileTypeError: _propTypes2.default.string, - errorClass: _propTypes2.default.string, - errorStyle: _propTypes2.default.object, - singleImage: _propTypes2.default.bool + style: PropTypes.object, + className: PropTypes.string, + onChange: PropTypes.func, + onDelete: PropTypes.func, + buttonClassName: PropTypes.string, + buttonStyles: PropTypes.object, + buttonType: PropTypes.string, + withPreview: PropTypes.bool, + accept: PropTypes.string, + name: PropTypes.string, + withIcon: PropTypes.bool, + buttonText: PropTypes.string, + withLabel: PropTypes.bool, + label: PropTypes.string, + labelStyles: PropTypes.object, + labelClass: PropTypes.string, + imgExtension: PropTypes.array, + maxFileSize: PropTypes.number, + fileSizeError: PropTypes.string, + fileTypeError: PropTypes.string, + errorClass: PropTypes.string, + errorStyle: PropTypes.object, + singleImage: PropTypes.bool }; -exports.default = ReactImageUploadComponent; \ No newline at end of file +export default ReactImageUploadComponent; \ No newline at end of file diff --git a/src/component/index.js b/src/component/index.js index 0acdb674..0a82a168 100644 --- a/src/component/index.js +++ b/src/component/index.js @@ -197,7 +197,7 @@ class ReactImageUploadComponent extends React.Component { type="file" ref={input => this.inputElement = input} name={this.props.name} - multiple="multiple" + multiple={!this.props.singleImage} onChange={this.onDropFile} accept={this.props.accept} /> From 1aed819a5acc91c42b178761b5c71f438c807ea4 Mon Sep 17 00:00:00 2001 From: Oussama Bouthouri Date: Tue, 5 Jun 2018 09:45:30 +0100 Subject: [PATCH 3/5] fix #46 all jpeg file type extension can be uploaded --- src/component/compiled.js | 2 +- src/component/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/component/compiled.js b/src/component/compiled.js index e4573fdd..897d4e22 100644 --- a/src/component/compiled.js +++ b/src/component/compiled.js @@ -244,7 +244,7 @@ ReactImageUploadComponent.defaultProps = { label: "Max file size: 5mb, accepted: jpg|gif|png", labelStyles: {}, labelClass: "", - imgExtension: ['.jpg', '.gif', '.png'], + imgExtension: ['.jpg', '.jpeg', '.gif', '.png'], maxFileSize: 5242880, fileSizeError: " file size is too big", fileTypeError: " is not a supported file extension", diff --git a/src/component/index.js b/src/component/index.js index 0a82a168..ef993acd 100644 --- a/src/component/index.js +++ b/src/component/index.js @@ -222,7 +222,7 @@ ReactImageUploadComponent.defaultProps = { label: "Max file size: 5mb, accepted: jpg|gif|png", labelStyles: {}, labelClass: "", - imgExtension: ['.jpg', '.gif', '.png'], + imgExtension: ['.jpg', '.jpeg', '.gif', '.png'], maxFileSize: 5242880, fileSizeError: " file size is too big", fileTypeError: " is not a supported file extension", From 5b9210b1e497c1cdc586e98c26839d95ea032add Mon Sep 17 00:00:00 2001 From: Oussama Bouthouri Date: Tue, 5 Jun 2018 10:08:49 +0100 Subject: [PATCH 4/5] added defaultImage prop. useful when it's a form to update data not to upload it. --- src/component/compiled.js | 15 +++++++++++++-- src/component/index.js | 15 +++++++++++++-- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/component/compiled.js b/src/component/compiled.js index 897d4e22..96221e42 100644 --- a/src/component/compiled.js +++ b/src/component/compiled.js @@ -26,6 +26,15 @@ class ReactImageUploadComponent extends React.Component { this.triggerFileUpload = this.triggerFileUpload.bind(this); } + /* + Load image at the beggining if defaultImage prop existe + */ + componentWillReceiveProps() { + if (this.props.defaultImage) { + this.setState({ pictures: [this.props.defaultImage] }); + } + } + /* On button click, trigger input file to open */ @@ -252,7 +261,8 @@ ReactImageUploadComponent.defaultProps = { style: {}, errorStyle: {}, singleImage: false, - onChange: () => {} + onChange: () => {}, + defaultImage: "" }; ReactImageUploadComponent.propTypes = { @@ -278,7 +288,8 @@ ReactImageUploadComponent.propTypes = { fileTypeError: PropTypes.string, errorClass: PropTypes.string, errorStyle: PropTypes.object, - singleImage: PropTypes.bool + singleImage: PropTypes.bool, + defaultImage: PropTypes.string }; export default ReactImageUploadComponent; \ No newline at end of file diff --git a/src/component/index.js b/src/component/index.js index ef993acd..b88a1181 100644 --- a/src/component/index.js +++ b/src/component/index.js @@ -26,6 +26,15 @@ class ReactImageUploadComponent extends React.Component { this.triggerFileUpload = this.triggerFileUpload.bind(this); } + /* + Load image at the beggining if defaultImage prop existe + */ + componentWillReceiveProps(){ + if(this.props.defaultImage){ + this.setState({pictures: [this.props.defaultImage]}); + } + } + /* On button click, trigger input file to open */ @@ -230,7 +239,8 @@ ReactImageUploadComponent.defaultProps = { style: {}, errorStyle: {}, singleImage: false, - onChange: () => {} + onChange: () => {}, + defaultImage: "" }; ReactImageUploadComponent.propTypes = { @@ -256,7 +266,8 @@ ReactImageUploadComponent.propTypes = { fileTypeError: PropTypes.string, errorClass: PropTypes.string, errorStyle: PropTypes.object, - singleImage: PropTypes.bool + singleImage: PropTypes.bool, + defaultImage: PropTypes.string }; export default ReactImageUploadComponent; From 0d0a4648725698f00ba7afc07258d7e36f3c2344 Mon Sep 17 00:00:00 2001 From: Oussama Bouthouri Date: Wed, 6 Jun 2018 20:49:45 +0100 Subject: [PATCH 5/5] fixes #47 onDrop is called with component life cycle --- src/component/compiled.js | 53 ++--- src/component/index.js | 439 +++++++++++++++++++------------------- 2 files changed, 251 insertions(+), 241 deletions(-) diff --git a/src/component/compiled.js b/src/component/compiled.js index 96221e42..619393b3 100644 --- a/src/component/compiled.js +++ b/src/component/compiled.js @@ -27,8 +27,8 @@ class ReactImageUploadComponent extends React.Component { } /* - Load image at the beggining if defaultImage prop existe - */ + Load image at the beggining if defaultImage prop existe + */ componentWillReceiveProps() { if (this.props.defaultImage) { this.setState({ pictures: [this.props.defaultImage] }); @@ -36,15 +36,24 @@ class ReactImageUploadComponent extends React.Component { } /* - On button click, trigger input file to open - */ + Load image at the beggining if defaultImage prop existe + */ + componentDidUpdate(prevProps, prevState, snapshot) { + if (prevState.files !== this.state.files) { + this.props.onChange(this.state.files, this.state.pictures); + } + } + + /* + On button click, trigger input file to open + */ triggerFileUpload() { this.inputElement.click(); } /* - Handle file validation - */ + Handle file validation + */ onDropFile(e) { const files = e.target.files; const _this = this; @@ -76,9 +85,7 @@ class ReactImageUploadComponent extends React.Component { dataURL = dataURL.replace(";base64", `;name=${f.name};base64`); if (_this.props.singleImage === true) { - _this.setState({ pictures: [dataURL], files: [f] }, () => { - _this.props.onChange(_this.state.files, _this.state.pictures); - }); + _this.setState({ pictures: [dataURL], files: [f] }); } else if (_this.state.pictures.indexOf(dataURL) === -1) { const newArray = _this.state.pictures.slice(); newArray.push(dataURL); @@ -86,9 +93,7 @@ class ReactImageUploadComponent extends React.Component { const newFiles = _this.state.files.slice(); newFiles.push(f); - _this.setState({ pictures: newArray, files: newFiles }, () => { - _this.props.onChange(_this.state.files, _this.state.pictures); - }); + _this.setState({ pictures: newArray, files: newFiles }); } }; }(f); @@ -97,8 +102,8 @@ class ReactImageUploadComponent extends React.Component { } /* - Render the upload icon - */ + Render the upload icon + */ renderIcon() { if (this.props.withIcon) { return React.createElement('img', { src: UploadIcon, className: 'uploadIcon', alt: 'Upload Icon' }); @@ -106,8 +111,8 @@ class ReactImageUploadComponent extends React.Component { } /* - Render label - */ + Render label + */ renderLabel() { if (this.props.withLabel) { return React.createElement( @@ -119,16 +124,16 @@ class ReactImageUploadComponent extends React.Component { } /* - Check file extension (onDropFile) - */ + Check file extension (onDropFile) + */ hasExtension(fileName) { const pattern = '(' + this.props.imgExtension.join('|').replace(/\./g, '\\.') + ')$'; return new RegExp(pattern, 'i').test(fileName); } /* - Remove the image from state - */ + Remove the image from state + */ removeImage(picture) { const removeIndex = this.state.pictures.findIndex(e => e === picture); const filteredPictures = this.state.pictures.filter((e, index) => index !== removeIndex); @@ -140,8 +145,8 @@ class ReactImageUploadComponent extends React.Component { } /* - Check if any errors && render - */ + Check if any errors && render + */ renderErrors() { let notAccepted = ''; if (this.state.notAcceptedFileType.length > 0) { @@ -172,8 +177,8 @@ class ReactImageUploadComponent extends React.Component { } /* - Render preview images - */ + Render preview images + */ renderPreview() { return React.createElement( 'div', diff --git a/src/component/index.js b/src/component/index.js index b88a1181..b98909cb 100644 --- a/src/component/index.js +++ b/src/component/index.js @@ -5,26 +5,26 @@ import FlipMove from 'react-flip-move'; import UploadIcon from './UploadIcon.svg'; const styles = { - display: "flex", - alignItems: "center", - justifyContent: "center", - flexWrap: "wrap", - width: "100%" + display: "flex", + alignItems: "center", + justifyContent: "center", + flexWrap: "wrap", + width: "100%" }; class ReactImageUploadComponent extends React.Component { - constructor(props) { - super(props); - this.state = { - pictures: [], - files: [], - notAcceptedFileType: [], - notAcceptedFileSize: [] - }; - this.inputElement = ''; - this.onDropFile = this.onDropFile.bind(this); - this.triggerFileUpload = this.triggerFileUpload.bind(this); - } + constructor(props) { + super(props); + this.state = { + pictures: [], + files: [], + notAcceptedFileType: [], + notAcceptedFileSize: [] + }; + this.inputElement = ''; + this.onDropFile = this.onDropFile.bind(this); + this.triggerFileUpload = this.triggerFileUpload.bind(this); + } /* Load image at the beggining if defaultImage prop existe @@ -35,239 +35,244 @@ class ReactImageUploadComponent extends React.Component { } } - /* - On button click, trigger input file to open - */ - triggerFileUpload() { - this.inputElement.click(); - } + /* + Load image at the beggining if defaultImage prop existe + */ + componentDidUpdate(prevProps, prevState, snapshot){ + if(prevState.files !== this.state.files){ + this.props.onChange(this.state.files, this.state.pictures); + } + } - /* - Handle file validation - */ - onDropFile(e) { - const files = e.target.files; - const _this = this; + /* + On button click, trigger input file to open + */ + triggerFileUpload() { + this.inputElement.click(); + } - // Iterate over all uploaded files - for (let i = 0; i < files.length; i++) { + /* + Handle file validation + */ + onDropFile(e) { + const files = e.target.files; + const _this = this; + + // Iterate over all uploaded files + for (let i = 0; i < files.length; i++) { let f = files[i]; - // Check for file extension - if (!this.hasExtension(f.name)) { - const newArray = _this.state.notAcceptedFileType.slice(); - newArray.push(f.name); - _this.setState({notAcceptedFileType: newArray}); - continue; - } - // Check for file size - if(f.size > this.props.maxFileSize) { - const newArray = _this.state.notAcceptedFileSize.slice(); - newArray.push(f.name); - _this.setState({notAcceptedFileSize: newArray}); - continue; - } + // Check for file extension + if (!this.hasExtension(f.name)) { + const newArray = _this.state.notAcceptedFileType.slice(); + newArray.push(f.name); + _this.setState({notAcceptedFileType: newArray}); + continue; + } + // Check for file size + if(f.size > this.props.maxFileSize) { + const newArray = _this.state.notAcceptedFileSize.slice(); + newArray.push(f.name); + _this.setState({notAcceptedFileSize: newArray}); + continue; + } - const reader = new FileReader(); - // Read the image via FileReader API and save image result in state. - reader.onload = (function () { - return function (e) { - // Add the file name to the data URL - let dataURL = e.target.result; - dataURL = dataURL.replace(";base64", `;name=${f.name};base64`); + const reader = new FileReader(); + // Read the image via FileReader API and save image result in state. + reader.onload = (function () { + return function (e) { + // Add the file name to the data URL + let dataURL = e.target.result; + dataURL = dataURL.replace(";base64", `;name=${f.name};base64`); - if (_this.props.singleImage === true) { - _this.setState({pictures: [dataURL], files: [f]}, () => { - _this.props.onChange(_this.state.files, _this.state.pictures); - }); - } else if (_this.state.pictures.indexOf(dataURL) === -1) { - const newArray = _this.state.pictures.slice(); - newArray.push(dataURL); + if (_this.props.singleImage === true) { + _this.setState({pictures: [dataURL], files: [f]}); + } else if (_this.state.pictures.indexOf(dataURL) === -1) { + const newArray = _this.state.pictures.slice(); + newArray.push(dataURL); - const newFiles = _this.state.files.slice(); - newFiles.push(f); + const newFiles = _this.state.files.slice(); + newFiles.push(f); - _this.setState({pictures: newArray, files: newFiles}, () => { - _this.props.onChange(_this.state.files, _this.state.pictures); - }); - } - }; - })(f); - reader.readAsDataURL(f); - } - } + _this.setState({pictures: newArray, files: newFiles}); + } + }; + })(f); + reader.readAsDataURL(f); + } + } /* Render the upload icon */ renderIcon() { - if (this.props.withIcon) { + if (this.props.withIcon) { return Upload Icon; - } - } + } + } - /* - Render label - */ - renderLabel() { - if (this.props.withLabel) { - return

{this.props.label}

- } - } + /* + Render label + */ + renderLabel() { + if (this.props.withLabel) { + return

{this.props.label}

+ } + } /* Check file extension (onDropFile) */ - hasExtension(fileName) { - const pattern = '(' + this.props.imgExtension.join('|').replace(/\./g, '\\.') + ')$'; - return new RegExp(pattern, 'i').test(fileName); - } + hasExtension(fileName) { + const pattern = '(' + this.props.imgExtension.join('|').replace(/\./g, '\\.') + ')$'; + return new RegExp(pattern, 'i').test(fileName); + } - /* - Remove the image from state - */ - removeImage(picture) { - const removeIndex = this.state.pictures.findIndex(e => e === picture); - const filteredPictures = this.state.pictures.filter((e, index) => index !== removeIndex); - const filteredFiles = this.state.files.filter((e, index) => index !== removeIndex); + /* + Remove the image from state + */ + removeImage(picture) { + const removeIndex = this.state.pictures.findIndex(e => e === picture); + const filteredPictures = this.state.pictures.filter((e, index) => index !== removeIndex); + const filteredFiles = this.state.files.filter((e, index) => index !== removeIndex); - this.setState({pictures: filteredPictures, files: filteredFiles}, () => { - this.props.onChange(this.state.files, this.state.pictures); - }); - } + this.setState({pictures: filteredPictures, files: filteredFiles}, () => { + this.props.onChange(this.state.files, this.state.pictures); + }); + } - /* - Check if any errors && render - */ - renderErrors() { - let notAccepted = ''; - if (this.state.notAcceptedFileType.length > 0) { - notAccepted = this.state.notAcceptedFileType.map((error, index) => { - return ( -
- * {error} {this.props.fileTypeError} -
- ) - }); - } - if (this.state.notAcceptedFileSize.length > 0) { - notAccepted = this.state.notAcceptedFileSize.map((error, index) => { - return ( -
- * {error} {this.props.fileSizeError} -
- ) - }); - } - return notAccepted; - } + /* + Check if any errors && render + */ + renderErrors() { + let notAccepted = ''; + if (this.state.notAcceptedFileType.length > 0) { + notAccepted = this.state.notAcceptedFileType.map((error, index) => { + return ( +
+ * {error} {this.props.fileTypeError} +
+ ) + }); + } + if (this.state.notAcceptedFileSize.length > 0) { + notAccepted = this.state.notAcceptedFileSize.map((error, index) => { + return ( +
+ * {error} {this.props.fileSizeError} +
+ ) + }); + } + return notAccepted; + } - /* - Render preview images - */ - renderPreview() { - return ( -
- - {this.renderPreviewPictures()} - -
- ); - } + /* + Render preview images + */ + renderPreview() { + return ( +
+ + {this.renderPreviewPictures()} + +
+ ); + } - renderPreviewPictures() { - return this.state.pictures.map((picture, index) => { - return ( -
-
this.removeImage(picture)}>X
- preview -
- ); - }); - } + renderPreviewPictures() { + return this.state.pictures.map((picture, index) => { + return ( +
+
this.removeImage(picture)}>X
+ preview +
+ ); + }); + } - render() { - return ( -
-
- {this.renderIcon()} - {this.renderLabel()} -
- {this.renderErrors()} -
- - this.inputElement = input} - name={this.props.name} - multiple={!this.props.singleImage} - onChange={this.onDropFile} - accept={this.props.accept} - /> - { this.props.withPreview ? this.renderPreview() : null } -
-
- ) - } + render() { + return ( +
+
+ {this.renderIcon()} + {this.renderLabel()} +
+ {this.renderErrors()} +
+ + this.inputElement = input} + name={this.props.name} + multiple={!this.props.singleImage} + onChange={this.onDropFile} + accept={this.props.accept} + /> + { this.props.withPreview ? this.renderPreview() : null } +
+
+ ) + } } ReactImageUploadComponent.defaultProps = { - className: '', - buttonClassName: "", - buttonStyles: {}, - withPreview: false, - accept: "image/*", - name: "", - withIcon: true, - buttonText: "Choose images", - buttonType: "button", - withLabel: true, - label: "Max file size: 5mb, accepted: jpg|gif|png", - labelStyles: {}, - labelClass: "", - imgExtension: ['.jpg', '.jpeg', '.gif', '.png'], - maxFileSize: 5242880, - fileSizeError: " file size is too big", - fileTypeError: " is not a supported file extension", - errorClass: "", - style: {}, - errorStyle: {}, - singleImage: false, - onChange: () => {}, + className: '', + buttonClassName: "", + buttonStyles: {}, + withPreview: false, + accept: "image/*", + name: "", + withIcon: true, + buttonText: "Choose images", + buttonType: "button", + withLabel: true, + label: "Max file size: 5mb, accepted: jpg|gif|png", + labelStyles: {}, + labelClass: "", + imgExtension: ['.jpg', '.jpeg', '.gif', '.png'], + maxFileSize: 5242880, + fileSizeError: " file size is too big", + fileTypeError: " is not a supported file extension", + errorClass: "", + style: {}, + errorStyle: {}, + singleImage: false, + onChange: () => {}, defaultImage: "" }; ReactImageUploadComponent.propTypes = { - style: PropTypes.object, - className: PropTypes.string, - onChange: PropTypes.func, + style: PropTypes.object, + className: PropTypes.string, + onChange: PropTypes.func, onDelete: PropTypes.func, - buttonClassName: PropTypes.string, - buttonStyles: PropTypes.object, - buttonType: PropTypes.string, - withPreview: PropTypes.bool, - accept: PropTypes.string, - name: PropTypes.string, - withIcon: PropTypes.bool, - buttonText: PropTypes.string, - withLabel: PropTypes.bool, - label: PropTypes.string, - labelStyles: PropTypes.object, - labelClass: PropTypes.string, - imgExtension: PropTypes.array, - maxFileSize: PropTypes.number, - fileSizeError: PropTypes.string, - fileTypeError: PropTypes.string, - errorClass: PropTypes.string, - errorStyle: PropTypes.object, + buttonClassName: PropTypes.string, + buttonStyles: PropTypes.object, + buttonType: PropTypes.string, + withPreview: PropTypes.bool, + accept: PropTypes.string, + name: PropTypes.string, + withIcon: PropTypes.bool, + buttonText: PropTypes.string, + withLabel: PropTypes.bool, + label: PropTypes.string, + labelStyles: PropTypes.object, + labelClass: PropTypes.string, + imgExtension: PropTypes.array, + maxFileSize: PropTypes.number, + fileSizeError: PropTypes.string, + fileTypeError: PropTypes.string, + errorClass: PropTypes.string, + errorStyle: PropTypes.object, singleImage: PropTypes.bool, defaultImage: PropTypes.string }; -export default ReactImageUploadComponent; +export default ReactImageUploadComponent; \ No newline at end of file