react-dropit/dist/index.js

Uploading files is now easier :))

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.DropIt = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

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 _nanoid = require('nanoid');

var _nanoid2 = _interopRequireDefault(_nanoid);

var _thumb = require('./thumb');

var _thumb2 = _interopRequireDefault(_thumb);

require('babel-polyfill');

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

require('../sass');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

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 Error = function (_React$Component) {
	_inherits(Error, _React$Component);

	function Error() {
		_classCallCheck(this, Error);

		return _possibleConstructorReturn(this, (Error.__proto__ || Object.getPrototypeOf(Error)).apply(this, arguments));
	}

	_createClass(Error, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			var _this2 = this;

			(0, _jquery2.default)('.react-dropit-error').fadeIn();

			setTimeout(function () {

				(0, _jquery2.default)('.react-dropit-error').fadeOut(function () {

					_this2.props.removeError();
				});
			}, 10000);
		}
	}, {
		key: 'render',
		value: function render() {

			return React.createElement(
				'span',
				{ style: { display: 'none' }, className: 'react-dropit-error' },
				this.props.err
			);
		}
	}]);

	return Error;
}(React.Component);

var DropIt = exports.DropIt = function (_React$Component2) {
	_inherits(DropIt, _React$Component2);

	function DropIt() {
		var _ref,
		    _this4 = this;

		var _temp, _this3, _ret;

		_classCallCheck(this, DropIt);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this3 = _possibleConstructorReturn(this, (_ref = DropIt.__proto__ || Object.getPrototypeOf(DropIt)).call.apply(_ref, [this].concat(args))), _this3), _this3.state = {

			id: (0, _nanoid2.default)(5),
			files: [],
			className: '',
			err: ''
		}, _this3.initValue = function () {
			var _this3$props = _this3.props,
			    value = _this3$props.value,
			    multiple = _this3$props.multiple;


			var files = [];

			if (multiple) {

				if (Array.isArray(value)) files = value;
			} else {

				files = [value];
			}

			files = files.filter(function (file) {
				return file;
			}).map(function (value) {
				return { id: (0, _nanoid2.default)(5), value: value };
			});

			_this3.setState({ files: files });
		}, _this3.getFiles = function (files) {

			var newFiles = [];

			var _iteratorNormalCompletion = true;
			var _didIteratorError = false;
			var _iteratorError = undefined;

			try {
				for (var _iterator = files[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
					var file = _step.value;


					if ((typeof file === 'undefined' ? 'undefined' : _typeof(file)) == 'object') newFiles.push(file);
				}
			} catch (err) {
				_didIteratorError = true;
				_iteratorError = err;
			} finally {
				try {
					if (!_iteratorNormalCompletion && _iterator.return) {
						_iterator.return();
					}
				} finally {
					if (_didIteratorError) {
						throw _iteratorError;
					}
				}
			}

			return newFiles;
		}, _this3.checkType = function (fileType) {
			var type = _this3.props.type;


			if (type) {

				if (type.constructor.name === 'RegExp') return type.test(fileType);

				if (type === 'image') return fileType.indexOf('image/') === 0;
			}

			return true;
		}, _this3.filterFiles = function () {
			var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(files) {
				var _this3$props2, size, errorSizeMsg, errorTypeMsg, multiple, sizeInByte;

				return regeneratorRuntime.wrap(function _callee$(_context) {
					while (1) {
						switch (_context.prev = _context.next) {
							case 0:
								_this3$props2 = _this3.props, size = _this3$props2.size, errorSizeMsg = _this3$props2.errorSizeMsg, errorTypeMsg = _this3$props2.errorTypeMsg, multiple = _this3$props2.multiple;

								if (multiple) {
									_context.next = 5;
									break;
								}

								_context.next = 4;
								return _this3.setState({ files: [] });

							case 4:
								files = files.splice(0, 1);

							case 5:
								;

								if (isNaN(size) || size < 1) size = 1024;

								sizeInByte = size * 1024;


								files = files.filter(function (file) {

									if (file.size > sizeInByte) {
										_this3.setState({ err: errorSizeMsg || 'Max file size: 1MB' });
										return false;
									}

									if (!_this3.checkType(file.type)) {
										_this3.setState({ err: errorTypeMsg || 'File format is incorrect.' });
										return false;
									}

									return true;
								});

								return _context.abrupt('return', files);

							case 10:
							case 'end':
								return _context.stop();
						}
					}
				}, _callee, _this4);
			}));

			return function (_x) {
				return _ref2.apply(this, arguments);
			};
		}(), _this3.allowAddMore = function () {
			var _this3$props3 = _this3.props,
			    maxFiles = _this3$props3.maxFiles,
			    errorMaxFilesMsg = _this3$props3.errorMaxFilesMsg;


			if (isNaN(maxFiles) || maxFiles > 100 || maxFiles < 1) maxFiles = 10;

			if (maxFiles > _this3.state.files.length) return true;

			_this3.setState({ err: errorMaxFilesMsg || 'Max files: ' + maxFiles });
		}, _this3.onDrop = function (e) {

			e.preventDefault();
			_this3.setState({ onDragEnterClassName: '' });

			var newFiles = _this3.getFiles(e.dataTransfer.files);

			_this3.process(newFiles);
		}, _this3.process = function () {
			var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(newFiles) {
				return regeneratorRuntime.wrap(function _callee2$(_context2) {
					while (1) {
						switch (_context2.prev = _context2.next) {
							case 0:
								if (_this3.allowAddMore()) {
									_context2.next = 2;
									break;
								}

								return _context2.abrupt('return');

							case 2:
								_context2.next = 4;
								return _this3.filterFiles(newFiles);

							case 4:
								newFiles = _context2.sent;


								_this3.updateState(newFiles);

							case 6:
							case 'end':
								return _context2.stop();
						}
					}
				}, _callee2, _this4);
			}));

			return function (_x2) {
				return _ref3.apply(this, arguments);
			};
		}(), _this3.updateState = function (newFiles) {

			var files = [].concat(_toConsumableArray(_this3.state.files));

			newFiles = newFiles.map(function (file) {

				file = { id: (0, _nanoid2.default)(5), value: file };

				files.unshift(file);

				return file;
			});

			_this3.setState({ files: files }, function () {

				if (_this3.props.autoUpload) _this3.upload(newFiles);else _this3.callExternalOnchange();
			});
		}, _this3.progressHandlingFunction = function (_ref4) {
			var loaded = _ref4.loaded,
			    total = _ref4.total,
			    id = _ref4.id;


			_this3.setState(_defineProperty({}, id, Math.ceil(loaded / total) * 100));
		}, _this3.uploadFiles = function (newFiles, cb) {

			var length = newFiles.length,
			    uploadedFiles = [];

			var finish = function finish(_ref5) {
				var id = _ref5.id,
				    url = _ref5.url;


				uploadedFiles.push({ id: id, value: url });

				if (uploadedFiles.length == length && typeof cb == 'function') cb(uploadedFiles);
			};

			var uploadUrl = _this3.props.uploadUrl;

			var _loop = function _loop(file) {
				var id = file.id,
				    value = file.value;


				var form = new FormData();
				form.append('file', value);

				_jquery2.default.ajax({
					url: uploadUrl || '/upload',
					type: 'post',
					processData: false,
					contentType: false,
					success: function success(res) {

						finish({ id: id, url: res.url });
					},
					error: function error() {

						finish({ id: id, url: '' });
					},
					data: form,
					xhr: function xhr() {

						var xhr = _jquery2.default.ajaxSettings.xhr();

						if (xhr.upload) {
							// check if upload property exists
							xhr.upload.addEventListener('progress', function (_ref6) {
								var loaded = _ref6.loaded,
								    total = _ref6.total;
								return _this3.progressHandlingFunction({ loaded: loaded, total: total, id: id });
							}, false); // for handling the progress of the upload
						}

						return xhr;
					}
				});
			};

			var _iteratorNormalCompletion2 = true;
			var _didIteratorError2 = false;
			var _iteratorError2 = undefined;

			try {

				for (var _iterator2 = newFiles[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
					var file = _step2.value;

					_loop(file);
				}
			} catch (err) {
				_didIteratorError2 = true;
				_iteratorError2 = err;
			} finally {
				try {
					if (!_iteratorNormalCompletion2 && _iterator2.return) {
						_iterator2.return();
					}
				} finally {
					if (_didIteratorError2) {
						throw _iteratorError2;
					}
				}
			}
		}, _this3.upload = function (newFiles) {
			var upload = _this3.props.upload;


			var uploadFiles = _this3.uploadFiles;

			if (typeof upload === 'function') uploadFiles = upload;

			uploadFiles(newFiles, function (result) {

				if (!Array.isArray(result)) return;

				// update files' url
				var files = [].concat(_toConsumableArray(_this3.state.files));

				var _iteratorNormalCompletion3 = true;
				var _didIteratorError3 = false;
				var _iteratorError3 = undefined;

				try {
					for (var _iterator3 = result[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
						var file = _step3.value;


						for (var key in files) {

							if (files[key].id === file.id) {

								files[key].value = file.value;
							}
						}
					}
				} catch (err) {
					_didIteratorError3 = true;
					_iteratorError3 = err;
				} finally {
					try {
						if (!_iteratorNormalCompletion3 && _iterator3.return) {
							_iterator3.return();
						}
					} finally {
						if (_didIteratorError3) {
							throw _iteratorError3;
						}
					}
				}

				_this3.setState({ files: files }, _this3.callExternalOnchange);
			});
		}, _this3.onDragOver = function (e) {

			e.preventDefault();
			e.stopPropagation();
		}, _this3.removeFile = function (id) {

			var files = _this3.state.files.filter(function (file) {
				return file.id !== id;
			});

			_this3.setState({ files: files }, _this3.callExternalOnchange);
		}, _this3.callExternalOnchange = function () {
			var _this3$props4 = _this3.props,
			    onChange = _this3$props4.onChange,
			    multiple = _this3$props4.multiple;


			if (typeof onChange === 'function') {

				if (multiple) onChange(_this3.state.files.map(function (file) {
					return file.value;
				}));else onChange(_this3.state.files[0].value);
			}
		}, _this3.renderThumbs = function () {
			var files = _this3.state.files,
			    _this3$props5 = _this3.props,
			    type = _this3$props5.type,
			    thumbnailClassName = _this3$props5.thumbnailClassName,
			    Thumbnail = _this3$props5.thumbnail;


			return Array.isArray(files) && files.map(function (file) {

				var ThumbComponent = _thumb2.default,
				    percent = _this3.state[file.id];

				if (Thumbnail) ThumbComponent = Thumbnail;

				return React.createElement(ThumbComponent, _extends({ percent: percent, className: thumbnailClassName, removeFile: _this3.removeFile, key: file.id }, file));
			});
		}, _this3.onChange = function (evt) {

			var newFiles = _this3.getFiles(evt.target.files);
			_this3.process(newFiles);
		}, _this3.onDragEnter = function (e) {

			e.preventDefault();

			_this3.setState({
				onDragEnterClassName: 'react-dropit'
			});
		}, _this3.onDragLeave = function (e) {

			e.preventDefault();

			_this3.setState({
				onDragEnterClassName: ''
			});
		}, _temp), _possibleConstructorReturn(_this3, _ret);
	}

	_createClass(DropIt, [{
		key: 'componentDidMount',
		value: function componentDidMount() {

			this.initValue();
		}
	}, {
		key: 'render',
		value: function render() {
			var _this5 = this;

			var _state = this.state,
			    err = _state.err,
			    onDragEnterClassName = _state.onDragEnterClassName,
			    _state$files = _state.files,
			    files = _state$files === undefined ? [] : _state$files,
			    _props = this.props,
			    multiple = _props.multiple,
			    placeholder = _props.placeholder,
			    thumbnailContainerClassName = _props.thumbnailContainerClassName,
			    className = _props.className,
			    dropzoneClassName = _props.dropzoneClassName;


			return React.createElement(
				'div',
				{ className: '' + (className || 'react-dropit') },
				err && React.createElement(Error, { err: err, removeError: function removeError() {
						return _this5.setState({ err: '' });
					} }),
				React.createElement(
					'div',
					{
						onDragLeave: this.onDragLeave,
						onDragEnter: this.onDragEnter,
						className: (dropzoneClassName || 'react-dropit-dropzone') + ' ' + (onDragEnterClassName || ''),
						onDrop: this.onDrop,
						onDragOver: this.onDragOver },
					React.createElement('input', { multiple: true, onChange: this.onChange, style: { display: 'none' }, id: this.state.id, type: 'file', name: 'files[]' }),
					React.createElement(
						'label',
						{ htmlFor: this.state.id },
						(!multiple && (!files || !files.length) || multiple) && (placeholder || 'Drop or click here')
					),
					!multiple && this.renderThumbs()
				),
				multiple && React.createElement(
					'div',
					{ className: thumbnailContainerClassName || 'react-dropit-tn-conatiner' },
					this.renderThumbs()
				)
			);
		}
	}]);

	return DropIt;
}(React.Component);

exports.default = DropIt;