Skip to content
This repository was archived by the owner on Jun 5, 2022. It is now read-only.

Commit e6d656d

Browse files
author
Jake Hartnell
committed
Fixup.
1 parent d1f3baf commit e6d656d

File tree

8 files changed

+16527
-7541
lines changed

8 files changed

+16527
-7541
lines changed

‎package-lock.json

Lines changed: 14847 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,18 @@
1818
"build": "react-scripts build",
1919
"test": "react-scripts test --env=jsdom",
2020
"eject": "react-scripts eject"
21+
},
22+
"devDependencies": {
23+
"babel-cli": "^6.26.0",
24+
"babel-core": "^6.26.3",
25+
"babel-loader": "^7.1.4",
26+
"babel-preset-env": "^1.7.0",
27+
"babel-preset-react": "^6.24.1",
28+
"css-loader": "^0.28.11",
29+
"html-webpack-plugin": "^3.2.0",
30+
"style-loader": "^0.21.0",
31+
"webpack": "^4.8.3",
32+
"webpack-cli": "^2.1.3",
33+
"webpack-dev-server": "^3.1.4"
2134
}
2235
}

‎src/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import SyntaxHighlighter from 'react-syntax-highlighter';
3-
import ImageUploader from './component/index';
3+
import ImageUploader from './component/dist/index.js';
44
import { dark } from 'react-syntax-highlighter/styles/prism';
55

66
const steps = {

‎src/component/compiled.js

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
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; }; }();
8+
9+
var _react = require('react');
10+
11+
var _react2 = _interopRequireDefault(_react);
12+
13+
var _propTypes = require('prop-types');
14+
15+
var _propTypes2 = _interopRequireDefault(_propTypes);
16+
17+
require('./index.css');
18+
19+
var _reactFlipMove = require('react-flip-move');
20+
21+
var _reactFlipMove2 = _interopRequireDefault(_reactFlipMove);
22+
23+
var _UploadIcon = require('./UploadIcon.svg');
24+
25+
var _UploadIcon2 = _interopRequireDefault(_UploadIcon);
26+
27+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
28+
29+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
30+
31+
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; }
32+
33+
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; }
34+
35+
var styles = {
36+
display: "flex",
37+
alignItems: "center",
38+
justifyContent: "center",
39+
flexWrap: "wrap",
40+
width: "100%"
41+
};
42+
43+
var ReactImageUploadComponent = function (_React$Component) {
44+
_inherits(ReactImageUploadComponent, _React$Component);
45+
46+
function ReactImageUploadComponent(props) {
47+
_classCallCheck(this, ReactImageUploadComponent);
48+
49+
var _this2 = _possibleConstructorReturn(this, (ReactImageUploadComponent.__proto__ || Object.getPrototypeOf(ReactImageUploadComponent)).call(this, props));
50+
51+
_this2.state = {
52+
pictures: [],
53+
notAcceptedFileType: [],
54+
notAcceptedFileSize: []
55+
};
56+
_this2.inputElement = '';
57+
_this2.onDropFile = _this2.onDropFile.bind(_this2);
58+
_this2.triggerFileUpload = _this2.triggerFileUpload.bind(_this2);
59+
return _this2;
60+
}
61+
62+
/*
63+
On button click, trigger input file to open
64+
*/
65+
66+
67+
_createClass(ReactImageUploadComponent, [{
68+
key: 'triggerFileUpload',
69+
value: function triggerFileUpload() {
70+
this.inputElement.click();
71+
}
72+
73+
/*
74+
Handle file validation
75+
*/
76+
77+
}, {
78+
key: 'onDropFile',
79+
value: function onDropFile(e) {
80+
var files = e.target.files;
81+
var _this = this;
82+
// If callback giving, fire.
83+
if (typeof this.props.onChange === "function") {
84+
this.props.onChange(files);
85+
}
86+
// Iterate over all uploaded files
87+
for (var i = 0; i < files.length; i++) {
88+
var f = files[i];
89+
// Check for file extension
90+
if (!this.hasExtension(f.name)) {
91+
var newArray = _this.state.notAcceptedFileType.slice();
92+
newArray.push(f.name);
93+
_this.setState({ notAcceptedFileType: newArray });
94+
continue;
95+
}
96+
// Check for file size
97+
if (f.size > this.props.maxFileSize) {
98+
var _newArray = _this.state.notAcceptedFileSize.slice();
99+
_newArray.push(f.name);
100+
_this.setState({ notAcceptedFileSize: _newArray });
101+
continue;
102+
}
103+
104+
var reader = new FileReader();
105+
// Read the image via FileReader API and save image result in state.
106+
reader.onload = function () {
107+
return function (e) {
108+
if (_this.props.singleImage === true) {
109+
_this.setState({ pictures: [e.target.result] });
110+
} else if (_this.state.pictures.indexOf(e.target.result) === -1) {
111+
var _newArray2 = _this.state.pictures.slice();
112+
_newArray2.push(e.target.result);
113+
_this.setState({ pictures: _newArray2 });
114+
}
115+
};
116+
}(f);
117+
reader.readAsDataURL(f);
118+
}
119+
}
120+
121+
/*
122+
Render the upload icon
123+
*/
124+
125+
}, {
126+
key: 'renderIcon',
127+
value: function renderIcon() {
128+
if (this.props.withIcon) {
129+
return _react2.default.createElement('img', { src: _UploadIcon2.default, className: 'uploadIcon', alt: 'Upload Icon' });
130+
}
131+
}
132+
133+
/*
134+
Render label
135+
*/
136+
137+
}, {
138+
key: 'renderLabel',
139+
value: function renderLabel() {
140+
if (this.props.withLabel) {
141+
return _react2.default.createElement(
142+
'p',
143+
{ className: this.props.labelClass, style: this.props.labelStyles },
144+
this.props.label
145+
);
146+
}
147+
}
148+
149+
/*
150+
Check file extension (onDropFile)
151+
*/
152+
153+
}, {
154+
key: 'hasExtension',
155+
value: function hasExtension(fileName) {
156+
return new RegExp('(' + this.props.imgExtension.join('|').replace(/\./g, '\\.') + ')$').test(fileName);
157+
}
158+
159+
/*
160+
Remove the image from state
161+
*/
162+
163+
}, {
164+
key: 'removeImage',
165+
value: function removeImage(picture) {
166+
var filteredAry = this.state.pictures.filter(function (e) {
167+
return e !== picture;
168+
});
169+
this.setState({ pictures: filteredAry });
170+
}
171+
172+
/*
173+
Check if any errors && render
174+
*/
175+
176+
}, {
177+
key: 'renderErrors',
178+
value: function renderErrors() {
179+
var _this3 = this;
180+
181+
var notAccepted = '';
182+
if (this.state.notAcceptedFileType.length > 0) {
183+
notAccepted = this.state.notAcceptedFileType.map(function (error, index) {
184+
return _react2.default.createElement(
185+
'div',
186+
{ className: 'errorMessage' + _this3.props.errorClass, key: index, style: _this3.props.errorStyle },
187+
'* ',
188+
error,
189+
' ',
190+
_this3.props.fileTypeError
191+
);
192+
});
193+
}
194+
if (this.state.notAcceptedFileSize.length > 0) {
195+
notAccepted = this.state.notAcceptedFileSize.map(function (error, index) {
196+
return _react2.default.createElement(
197+
'div',
198+
{ className: 'errorMessage' + _this3.props.errorClass, key: index, style: _this3.props.errorStyle },
199+
'* ',
200+
error,
201+
' ',
202+
_this3.props.fileSizeError
203+
);
204+
});
205+
}
206+
return notAccepted;
207+
}
208+
209+
/*
210+
Render preview images
211+
*/
212+
213+
}, {
214+
key: 'renderPreview',
215+
value: function renderPreview() {
216+
return _react2.default.createElement(
217+
'div',
218+
{ className: 'uploadPicturesWrapper' },
219+
_react2.default.createElement(
220+
_reactFlipMove2.default,
221+
{ enterAnimation: 'fade', leaveAnimation: 'fade', style: styles },
222+
this.renderPreviewPictures()
223+
)
224+
);
225+
}
226+
}, {
227+
key: 'renderPreviewPictures',
228+
value: function renderPreviewPictures() {
229+
var _this4 = this;
230+
231+
return this.state.pictures.map(function (picture, index) {
232+
return _react2.default.createElement(
233+
'div',
234+
{ key: index, className: 'uploadPictureContainer' },
235+
_react2.default.createElement(
236+
'div',
237+
{ className: 'deleteImage', onClick: function onClick() {
238+
return _this4.removeImage(picture);
239+
} },
240+
'X'
241+
),
242+
_react2.default.createElement('img', { src: picture, className: 'uploadPicture', alt: 'preview' })
243+
);
244+
});
245+
}
246+
}, {
247+
key: 'render',
248+
value: function render() {
249+
var _this5 = this;
250+
251+
return _react2.default.createElement(
252+
'div',
253+
{ className: "fileUploader " + this.props.className, style: this.props.style },
254+
_react2.default.createElement(
255+
'div',
256+
{ className: 'fileContainer' },
257+
this.renderIcon(),
258+
this.renderLabel(),
259+
_react2.default.createElement(
260+
'div',
261+
{ className: 'errorsContainer' },
262+
this.renderErrors()
263+
),
264+
_react2.default.createElement(
265+
'button',
266+
{
267+
className: "chooseFileButton " + this.props.buttonClassName,
268+
style: this.props.buttonStyles,
269+
onClick: this.triggerFileUpload
270+
},
271+
this.props.buttonText
272+
),
273+
_react2.default.createElement('input', {
274+
type: 'file',
275+
ref: function ref(input) {
276+
return _this5.inputElement = input;
277+
},
278+
name: this.props.name,
279+
multiple: 'multiple',
280+
onChange: this.onDropFile,
281+
accept: this.props.accept
282+
}),
283+
this.props.withPreview ? this.renderPreview() : null
284+
)
285+
);
286+
}
287+
}]);
288+
289+
return ReactImageUploadComponent;
290+
}(_react2.default.Component);
291+
292+
ReactImageUploadComponent.defaultProps = {
293+
className: '',
294+
buttonClassName: {},
295+
buttonStyles: {},
296+
withPreview: false,
297+
accept: "accept=image/*",
298+
name: "",
299+
withIcon: true,
300+
buttonText: "Choose images",
301+
withLabel: true,
302+
label: "Max file size: 5mb, accepted: jpg|gif|png",
303+
labelStyles: {},
304+
labelClass: "",
305+
imgExtension: ['.jpg', '.gif', '.png'],
306+
maxFileSize: 5242880,
307+
fileSizeError: " file size is too big",
308+
fileTypeError: " is not supported file extension",
309+
errorClass: "",
310+
style: {},
311+
errorStyle: {},
312+
singleImage: false
313+
};
314+
315+
ReactImageUploadComponent.propTypes = {
316+
style: _propTypes2.default.object,
317+
className: _propTypes2.default.string,
318+
onChange: _propTypes2.default.func,
319+
onDelete: _propTypes2.default.func,
320+
buttonClassName: _propTypes2.default.object,
321+
buttonStyles: _propTypes2.default.object,
322+
withPreview: _propTypes2.default.bool,
323+
accept: _propTypes2.default.string,
324+
name: _propTypes2.default.string,
325+
withIcon: _propTypes2.default.bool,
326+
buttonText: _propTypes2.default.string,
327+
withLabel: _propTypes2.default.bool,
328+
label: _propTypes2.default.string,
329+
labelStyles: _propTypes2.default.object,
330+
labelClass: _propTypes2.default.string,
331+
imgExtension: _propTypes2.default.array,
332+
maxFileSize: _propTypes2.default.number,
333+
fileSizeError: _propTypes2.default.string,
334+
fileTypeError: _propTypes2.default.string,
335+
errorClass: _propTypes2.default.string,
336+
errorStyle: _propTypes2.default.object,
337+
singleImage: _propTypes2.default.bool
338+
};
339+
340+
exports.default = ReactImageUploadComponent;

0 commit comments

Comments
 (0)