Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-images-uploading
Advanced tools
react-images-uploading - npm Package Compare versions
Comparing version 2.2.2 to 3.0.0
@@ -33,14 +33,2 @@ 'use strict'; | ||
| function __rest(s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
| t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
| for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
| t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| } | ||
| function __awaiter(thisArg, _arguments, P, generator) { | ||
@@ -146,23 +134,9 @@ return new (P || (P = Promise))(function (resolve, reject) { | ||
| }; | ||
| var defaultNullIndex = -1; | ||
| var ImageUploading = function (_a) { | ||
| var multiple = _a.multiple, onChange = _a.onChange, maxNumber = _a.maxNumber, children = _a.children, defaultValue = _a.defaultValue, acceptType = _a.acceptType, maxFileSize = _a.maxFileSize, resolutionWidth = _a.resolutionWidth, resolutionHeight = _a.resolutionHeight, resolutionType = _a.resolutionType, onError = _a.onError; | ||
| var _b = _a.multiple, multiple = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.maxNumber, maxNumber = _c === void 0 ? 1000 : _c, children = _a.children, _d = _a.value, value = _d === void 0 ? [] : _d, acceptType = _a.acceptType, maxFileSize = _a.maxFileSize, resolutionWidth = _a.resolutionWidth, resolutionHeight = _a.resolutionHeight, resolutionType = _a.resolutionType, onError = _a.onError, _e = _a.dataURLKey, dataURLKey = _e === void 0 ? "dataURL" : _e; | ||
| var inputRef = useRef(null); | ||
| var _b = useState(function () { | ||
| var initImageList = []; | ||
| if (defaultValue) { | ||
| initImageList = defaultValue.map(function (item) { return (__assign(__assign({}, item), { key: item.dataURL, onUpdate: function () { return onImageUpdate(item.dataURL); }, onRemove: function () { return onImageRemove(item.dataURL); } })); }); | ||
| } | ||
| return initImageList; | ||
| }), imageList = _b[0], setImageList = _b[1]; | ||
| var _c = useState(""), keyUpdate = _c[0], setKeyUpdate = _c[1]; | ||
| var _d = useState(__assign({}, defaultErrors)), errors = _d[0], setErrors = _d[1]; | ||
| var onStandardizeDataChange = function (list) { | ||
| if (onChange) { | ||
| var sData = list.map(function (_a) { | ||
| var key = _a.key, onUpdate = _a.onUpdate, onRemove = _a.onRemove, restOfItem = __rest(_a, ["key", "onUpdate", "onRemove"]); | ||
| return (__assign({}, restOfItem)); | ||
| }); | ||
| onChange(sData); | ||
| } | ||
| }; | ||
| var _f = useState(defaultNullIndex), keyUpdate = _f[0], setKeyUpdate = _f[1]; | ||
| var _g = useState(__assign({}, defaultErrors)), errors = _g[0], setErrors = _g[1]; | ||
| var _h = useState(false), isDragging = _h[0], setIsDragging = _h[1]; | ||
| var handleClickInput = useCallback(function () { | ||
@@ -173,4 +147,4 @@ inputRef.current && inputRef.current.click(); | ||
| setKeyUpdate(function (prevKey) { | ||
| if (prevKey) { | ||
| return ""; | ||
| if (prevKey >= 0) { | ||
| return defaultNullIndex; | ||
| } | ||
@@ -182,14 +156,18 @@ return prevKey; | ||
| var onImageRemoveAll = useCallback(function () { | ||
| setImageList([]); | ||
| onStandardizeDataChange([]); | ||
| }, []); | ||
| var onImageRemove = function (key) { | ||
| setImageList(function (previousList) { | ||
| var updatedList = previousList.filter(function (item) { return item.key !== key; }); | ||
| onStandardizeDataChange(updatedList); | ||
| return updatedList; | ||
| }); | ||
| onChange && onChange([]); | ||
| }, [onChange]); | ||
| var onImageRemove = function (index) { | ||
| var updatedList = __spreadArrays(value); | ||
| if (Array.isArray(index)) { | ||
| index.forEach(function (i) { | ||
| updatedList.splice(i, 1); | ||
| }); | ||
| } | ||
| else { | ||
| updatedList.splice(index, 1); | ||
| } | ||
| onChange && onChange(updatedList); | ||
| }; | ||
| var onImageUpdate = function (key) { | ||
| setKeyUpdate(key); | ||
| var onImageUpdate = function (index) { | ||
| setKeyUpdate(index); | ||
| handleClickInput(); | ||
@@ -204,10 +182,7 @@ }; | ||
| var fileList = fileListBase64.map(function (base64, index) { | ||
| var key = new Date().getTime().toString() + "-" + files[index].name; | ||
| return { | ||
| dataURL: base64, | ||
| file: files[index], | ||
| key: key, | ||
| onUpdate: function () { return onImageUpdate(key); }, | ||
| onRemove: function () { return onImageRemove(key); }, | ||
| }; | ||
| var _a; | ||
| return (_a = {}, | ||
| _a[dataURLKey] = base64, | ||
| _a.file = files[index], | ||
| _a); | ||
| }); | ||
@@ -224,4 +199,4 @@ return fileList; | ||
| if (!(maxNumber && | ||
| !keyUpdate && | ||
| fileList.length + imageList.length > maxNumber)) return [3 /*break*/, 1]; | ||
| keyUpdate === defaultNullIndex && | ||
| fileList.length + value.length > maxNumber)) return [3 /*break*/, 1]; | ||
| newErrors.maxNumber = true; | ||
@@ -277,14 +252,13 @@ return [3 /*break*/, 5]; | ||
| }); }; | ||
| var onInputChange = function (e) { return __awaiter(void 0, void 0, void 0, function () { | ||
| var files, fileList_1, checkValidate, updatedFileList; | ||
| var handleChange = function (files) { return __awaiter(void 0, void 0, void 0, function () { | ||
| var fileList, checkValidate, updatedFileList, addUpdateIndex, i; | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: | ||
| files = e.target.files; | ||
| if (!files) return [3 /*break*/, 3]; | ||
| return [4 /*yield*/, getListFile(files)]; | ||
| case 1: | ||
| fileList_1 = _a.sent(); | ||
| if (!(fileList_1.length > 0)) return [3 /*break*/, 3]; | ||
| return [4 /*yield*/, validate(fileList_1)]; | ||
| fileList = _a.sent(); | ||
| if (!(fileList.length > 0)) return [3 /*break*/, 3]; | ||
| return [4 /*yield*/, validate(fileList)]; | ||
| case 2: | ||
@@ -294,26 +268,35 @@ checkValidate = _a.sent(); | ||
| updatedFileList = void 0; | ||
| if (keyUpdate) { | ||
| updatedFileList = imageList.map(function (item) { | ||
| if (item.key === keyUpdate) | ||
| return __assign({}, fileList_1[0]); | ||
| return item; | ||
| }); | ||
| addUpdateIndex = []; | ||
| if (keyUpdate > defaultNullIndex) { | ||
| updatedFileList = __spreadArrays(value); | ||
| updatedFileList[keyUpdate] = fileList[0]; | ||
| addUpdateIndex.push(keyUpdate); | ||
| } | ||
| else { | ||
| if (multiple) { | ||
| updatedFileList = __spreadArrays(imageList, fileList_1); | ||
| if (maxNumber && updatedFileList.length > maxNumber) { | ||
| updatedFileList = imageList; | ||
| updatedFileList = __spreadArrays(value, fileList); | ||
| for (i = value.length; i < updatedFileList.length; i++) { | ||
| addUpdateIndex.push(i); | ||
| } | ||
| } | ||
| else { | ||
| updatedFileList = [fileList_1[0]]; | ||
| updatedFileList = [fileList[0]]; | ||
| addUpdateIndex.push(0); | ||
| } | ||
| } | ||
| setImageList(updatedFileList); | ||
| onStandardizeDataChange(updatedFileList); | ||
| onChange && onChange(updatedFileList, addUpdateIndex); | ||
| } | ||
| _a.label = 3; | ||
| case 3: | ||
| keyUpdate && setKeyUpdate(""); | ||
| keyUpdate > defaultNullIndex && setKeyUpdate(defaultNullIndex); | ||
| return [2 /*return*/]; | ||
| } | ||
| }); | ||
| }); }; | ||
| var onInputChange = function (e) { return __awaiter(void 0, void 0, void 0, function () { | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: return [4 /*yield*/, handleChange(e.target.files)]; | ||
| case 1: | ||
| _a.sent(); | ||
| if (inputRef.current) | ||
@@ -328,19 +311,48 @@ inputRef.current.value = ""; | ||
| : "image/*"; | ||
| var handleDrag = function (ev) { | ||
| ev.preventDefault(); | ||
| ev.stopPropagation(); | ||
| }; | ||
| var handleDragIn = function (e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (e.dataTransfer.items && e.dataTransfer.items.length > 0) { | ||
| setIsDragging(true); | ||
| } | ||
| }; | ||
| var handleDragOut = function (e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| setIsDragging(false); | ||
| }; | ||
| var handleDrop = function (e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| setIsDragging(false); | ||
| if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { | ||
| handleChange(e.dataTransfer.files); | ||
| e.dataTransfer.clearData(); | ||
| } | ||
| }; | ||
| return (React.createElement(React.Fragment, null, | ||
| React.createElement("input", { type: "file", accept: acceptString, ref: inputRef, multiple: multiple && !keyUpdate, onChange: onInputChange, style: { display: "none" } }), | ||
| React.createElement("input", { type: "file", accept: acceptString, ref: inputRef, multiple: multiple && keyUpdate === defaultNullIndex, onChange: onInputChange, style: { display: "none" } }), | ||
| children && | ||
| children({ | ||
| imageList: imageList, | ||
| imageList: value, | ||
| onImageUpload: onImageUpload, | ||
| onImageRemoveAll: onImageRemoveAll, | ||
| onImageUpdate: onImageUpdate, | ||
| onImageRemove: onImageRemove, | ||
| errors: errors, | ||
| dragProps: { | ||
| onDrop: handleDrop, | ||
| onDragEnter: handleDragIn, | ||
| onDragLeave: handleDragOut, | ||
| onDragOver: handleDrag, | ||
| }, | ||
| isDragging: isDragging, | ||
| }))); | ||
| }; | ||
| ImageUploading.defaultProps = { | ||
| maxNumber: 1000, | ||
| multiple: false, | ||
| acceptType: [], | ||
| }; | ||
| exports.default = ImageUploading; | ||
| //# sourceMappingURL=index.js.map |
| /// <reference types="react" /> | ||
| export interface ImageType { | ||
| dataURL: string; | ||
| dataURL?: string; | ||
| file?: File; | ||
| key?: string; | ||
| onUpdate?: () => void; | ||
| onRemove?: () => void; | ||
| } | ||
| export declare type ImageListType = Array<ImageType>; | ||
| export interface ImageUploadingPropsType { | ||
| value: ImageListType; | ||
| onChange: (value: ImageListType, addUpdatedIndex?: Array<number>) => void; | ||
| children?: (props: ExportInterface) => React.ReactNode; | ||
| defaultValue?: ImageListType; | ||
| onChange?: (value: ImageListType) => void; | ||
| multiple?: boolean; | ||
@@ -22,2 +19,3 @@ maxNumber?: number; | ||
| onError?: (errors: ErrorsType, files?: ImageListType) => void; | ||
| dataURLKey?: string; | ||
| } | ||
@@ -29,2 +27,11 @@ export interface ExportInterface { | ||
| errors: Record<string, any>; | ||
| onImageUpdate: (index: number) => void; | ||
| onImageRemove: (index: number) => void; | ||
| isDragging: Boolean; | ||
| dragProps: { | ||
| onDrop: (e: any) => void; | ||
| onDragEnter: (e: any) => void; | ||
| onDragLeave: (e: any) => void; | ||
| onDragOver: (e: any) => void; | ||
| }; | ||
| } | ||
@@ -31,0 +38,0 @@ export declare type ErrorsType = { |
| { | ||
| "name": "react-images-uploading", | ||
| "version": "2.2.2", | ||
| "version": "3.0.0", | ||
| "description": "A simple images uploader without UI. Building by yourself", | ||
@@ -27,4 +27,4 @@ "author": "imvutoan", | ||
| "prop-types": "^15.5.4", | ||
| "react": "^15.0.0 || ^16.0.0", | ||
| "react-dom": "^15.0.0 || ^16.0.0" | ||
| "react": "^16.8.0", | ||
| "react-dom": "^16.8.0" | ||
| }, | ||
@@ -61,4 +61,7 @@ "devDependencies": { | ||
| "react image upload", | ||
| "react images uploading" | ||
| "react images uploading", | ||
| "drag", | ||
| "drag and drop", | ||
| "image drag and drop" | ||
| ] | ||
| } |
@@ -15,2 +15,6 @@ # react-images-uploading | ||
| ## Docs for old version 2.x.x | ||
| There are some breaking changes from version 3, so if you are using the old version, please follow [this](https://github.com/vutoan266/react-images-uploading/tree/backup_v2x) | ||
| ## Install | ||
@@ -30,3 +34,3 @@ | ||
| ## Usage | ||
| ## Basic Usage | ||
@@ -43,5 +47,8 @@ ```tsx | ||
| class Example extends React.Component { | ||
| onChange = (imageList) => { | ||
| const [images, setImages] = useState([]); | ||
| onChange = (imageList, addUpdateIndex) => { | ||
| // data for submit | ||
| console.log(imageList); | ||
| setImages(imageList); | ||
| console.log('index of new chosen images: ', addUpdateIndex) | ||
| }; | ||
@@ -55,2 +62,3 @@ onError = (errors, files) => { | ||
| <ImageUploading | ||
| value={images} | ||
| onChange={this.onChange} | ||
@@ -62,4 +70,5 @@ maxNumber={maxNumber} | ||
| onError={this.onError} | ||
| dataURLKey="data_url" | ||
| > | ||
| {({ imageList, onImageUpload, onImageRemoveAll }) => ( | ||
| {({ imageList, onImageUpload, onImageRemoveAll, onImageUpdate, onImageRemove }) => ( | ||
| // write your building UI | ||
@@ -70,7 +79,7 @@ <div> | ||
| {imageList.map((image) => ( | ||
| <div key={image.key}> | ||
| <img src={image.dataURL} /> | ||
| <button onClick={image.onUpdate}>Update</button> | ||
| <button onClick={image.onRemove}>Remove</button> | ||
| {imageList.map((image, index) => ( | ||
| <div key={index}> | ||
| <img src={image.data_url} /> | ||
| <button onClick={() => onImageUpdate(index)}>Update</button> | ||
| <button onClick={() => onImageRemove(index)}>Remove</button> | ||
| </div> | ||
@@ -108,29 +117,49 @@ ))} | ||
| ### Drag and Drop | ||
| There are two props for this feature is `dragProps` and `isDragging`. | ||
| Usage is very simple. Follow this: | ||
| ```tsx | ||
| <ImageUploading value={images} onChange={this.onChange} dataURLKey="data_url"> | ||
| {({ imageList, dragProps, isDragging }) => ( | ||
| // write your building UI | ||
| <div {...dragProps}> | ||
| {isDragging ? "Drop here please" : "Upload space"} | ||
| {imageList.map((image, index) => ( | ||
| <img key={index} src={image.data_url} /> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </ImageUploading> | ||
| ``` | ||
| ## Props | ||
| | parameter | type | options | default | description | | ||
| | ---------------- | -------- | ----------------------------------------- | ------- | ------------------------------------------------------------------------------ | | ||
| | multiple | boolean | | false | Set true for multiple choose | | ||
| | maxNumber | number | | 1000 | Number of images user can select if mode = "multiple" | | ||
| | onChange | function | | | Called every update | | ||
| | onError | function | (errors, files) => void | | Called if have error on validate each update | | ||
| | defaultValue | array | \[\{dataURL: \.\.\. \}, \.\.\.\] | | Init data | | ||
| | acceptType | array | \['jpg', 'gif', 'png'\] | \[\] | Supported image extension | | ||
| | maxFileSize | number | | | Max image size\(Byte\) \(will use in the image validation\) | | ||
| | resolutionType | string | "absolute" \| "less" \| "more" \| "ratio" | | Using for validate image with your width \- height resolution that you provide | | ||
| | resolutionWidth | number | > 0 | | | | ||
| | resolutionHeight | number | > 0 | | | | ||
| | parameter | type | options | default | description | | ||
| | ---------------- | -------- | ----------------------------------------- | --------- | -------------------------------------------------------------------------------- | | ||
| | value | array | | \[\] | Array of image list | | ||
| | onChange | function | \(imageList, addUpdateindex\) => void | | Called every add, update or delete action | | ||
| | dataURLKey | string | | "dataURL" | Field name that base64 of selected image is assign to | | ||
| | multiple | boolean | | false | Set true for multiple choose | | ||
| | maxNumber | number | | 1000 | Number of images user can select if mode = "multiple" | | ||
| | onError | function | \(errors, files\) => void | | Called if have error on validate each update | | ||
| | acceptType | array | \['jpg', 'gif', 'png'\] | \[\] | Supported image extension | | ||
| | maxFileSize | number | | | Max image size\(Byte\) \(will use in the image validation\) | | ||
| | resolutionType | string | "absolute" \| "less" \| "more" \| "ratio" | | Using for validate image with your width \\\- height resolution that you provide | | ||
| | resolutionWidth | number | > 0 | | | | ||
| | resolutionHeight | number | > 0 | | | | ||
| ## Exported options | ||
| | parameter | type | description | | ||
| | ------------------------- | -------- | ------------------------------------------------------------------------- | | ||
| | imageList | array | List of images for render. Each item in imageList has some options below. | | ||
| | imageList[index].key | string | Generate filename | | ||
| | imageList[index].dataURL | string | Url image or base64 | | ||
| | imageList[index].onUpdate | function | Call function for replace a new image on current position | | ||
| | imageList[index].onRemove | function | Call function for remove current image | | ||
| | onImageUpload | function | Call for upload new image(s) | | ||
| | onImageRemoveAll | function | Call for remove all image(s) | | ||
| | errors | object | Export type of validation | | ||
| | parameter | type | description | | ||
| | ---------------- | ------------------------------------------------ | ----------------------------------------------------- | | ||
| | imageList | array | List of images for render\. | | ||
| | onImageUpload | function | Call for upload new image\(s\) | | ||
| | onImageRemoveAll | function | Call for remove all image\(s\) | | ||
| | onImageUpdate | \(updateIndex: number\) => void | Call for update at updateIndex\. | | ||
| | onImageRemove | \(deleteIndex: number \| Array<number>\) => void | Call for remove one/list image\. | | ||
| | errors | object | Export list of validation | | ||
| | dragProps | object | Native element props for drag and drop feature | | ||
| | isDragging | boolean | "true" if image\(s\) is dragged into drag and space\. | | ||
@@ -137,0 +166,0 @@ ## License |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.43%
58972
- Lines of code
- increased by5.43%
388
- Number of lines in readme file
- increased by21.8%
162
No dependency changes