react-images-uploading
Advanced tools
Comparing version
@@ -14,4 +14,6 @@ import * as React from "react"; | ||
onChange?: (value: ImageListType) => void; | ||
mode?: "single" | "multiple"; | ||
multiple?: boolean; | ||
maxNumber?: number; | ||
acceptType?: Array<string>; | ||
maxFileSize?: number; | ||
} | ||
@@ -22,4 +24,5 @@ export interface ExportInterface { | ||
onImageRemoveAll: () => void; | ||
errors: Record<string, any>; | ||
} | ||
declare const ImageUploading: React.FC<ImageUploadingPropsType>; | ||
export default ImageUploading; |
@@ -83,8 +83,18 @@ import { useRef, useState, useEffect, createElement, Fragment } from 'react'; | ||
var useRef$1 = useRef, useState$1 = useState, useEffect$1 = useEffect; | ||
var defaultErrors = { | ||
maxFileSize: false | ||
}; | ||
var ImageUploading = function (_a) { | ||
var mode = _a.mode, onChange = _a.onChange, maxNumber = _a.maxNumber, children = _a.children, defaultValue = _a.defaultValue; | ||
var multiple = _a.multiple, onChange = _a.onChange, maxNumber = _a.maxNumber, children = _a.children, defaultValue = _a.defaultValue, acceptType = _a.acceptType, maxFileSize = _a.maxFileSize; | ||
var inputRef = useRef$1(null); | ||
var _b = useState$1(defaultValue || []), imageList = _b[0], setImageList = _b[1]; | ||
var _b = useState$1(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]; | ||
// the "id unique" of the image that need update by new image upload | ||
var _c = useState$1(""), keyUpdate = _c[0], setKeyUpdate = _c[1]; | ||
var _d = useState$1(__assign({}, defaultErrors)), errors = _d[0], setErrors = _d[1]; | ||
// for getting the latest imageList state | ||
@@ -147,2 +157,19 @@ var imageListRef = useRef$1(imageList); | ||
}; | ||
var validate = function (fileList) { | ||
setErrors(__assign({}, defaultErrors)); | ||
if (maxFileSize) { | ||
for (var i = 0; i < fileList.length; i++) { | ||
// check size | ||
var file = fileList[i].file; | ||
if (file) { | ||
var size = Math.round(file.size / 1024 / 1024); | ||
if (maxFileSize && size > maxFileSize) { | ||
setErrors(__assign(__assign({}, errors), { maxFileSize: true })); | ||
return false; | ||
} | ||
} | ||
} | ||
} | ||
return true; | ||
}; | ||
var onInputChange = function (e) { return __awaiter(void 0, void 0, void 0, function () { | ||
@@ -159,24 +186,26 @@ var files, fileList_1, updatedFileList; | ||
if (fileList_1.length > 0) { | ||
updatedFileList = void 0; | ||
if (keyUpdate) { | ||
updatedFileList = imageList.map(function (item) { | ||
if (item.key === keyUpdate) | ||
return __assign({}, fileList_1[0]); | ||
return item; | ||
}); | ||
setKeyUpdate(""); | ||
} | ||
else { | ||
if (mode === "multiple") { | ||
updatedFileList = __spreadArrays(imageList, fileList_1); | ||
if (maxNumber && updatedFileList.length > maxNumber) { | ||
updatedFileList = imageList; | ||
} | ||
if (validate(fileList_1)) { | ||
updatedFileList = void 0; | ||
if (keyUpdate) { | ||
updatedFileList = imageList.map(function (item) { | ||
if (item.key === keyUpdate) | ||
return __assign({}, fileList_1[0]); | ||
return item; | ||
}); | ||
setKeyUpdate(""); | ||
} | ||
else { | ||
updatedFileList = [fileList_1[0]]; | ||
if (multiple) { | ||
updatedFileList = __spreadArrays(imageList, fileList_1); | ||
if (maxNumber && updatedFileList.length > maxNumber) { | ||
updatedFileList = imageList; | ||
} | ||
} | ||
else { | ||
updatedFileList = [fileList_1[0]]; | ||
} | ||
} | ||
setImageList(updatedFileList); | ||
onStandardizeDataChange(updatedFileList); | ||
} | ||
setImageList(updatedFileList); | ||
onStandardizeDataChange(updatedFileList); | ||
} | ||
@@ -191,10 +220,21 @@ else { | ||
}); }; | ||
var acceptString = acceptType && acceptType.length > 0 | ||
? acceptType | ||
.reduce(function (acceptStr, item) { return acceptStr.concat(", image/" + item); }, "") | ||
.slice(2) | ||
: "image/*"; | ||
return (createElement(Fragment, null, | ||
createElement("input", { type: "file", accept: "image/*", ref: inputRef, multiple: mode === "multiple" && !keyUpdate, onChange: onInputChange, style: { display: "none" } }), | ||
createElement("input", { type: "file", accept: acceptString, ref: inputRef, multiple: multiple && !keyUpdate, onChange: onInputChange, style: { display: "none" } }), | ||
children && | ||
children({ imageList: imageList, onImageUpload: onImageUpload, onImageRemoveAll: onImageRemoveAll }))); | ||
children({ | ||
imageList: imageList, | ||
onImageUpload: onImageUpload, | ||
onImageRemoveAll: onImageRemoveAll, | ||
errors: errors | ||
}))); | ||
}; | ||
ImageUploading.defaultProps = { | ||
maxNumber: 100, | ||
mode: "single" | ||
maxNumber: 1000, | ||
multiple: false, | ||
acceptType: [] | ||
}; | ||
@@ -201,0 +241,0 @@ |
@@ -87,8 +87,18 @@ 'use strict'; | ||
var useRef = React.useRef, useState = React.useState, useEffect = React.useEffect; | ||
var defaultErrors = { | ||
maxFileSize: false | ||
}; | ||
var ImageUploading = function (_a) { | ||
var mode = _a.mode, onChange = _a.onChange, maxNumber = _a.maxNumber, children = _a.children, defaultValue = _a.defaultValue; | ||
var multiple = _a.multiple, onChange = _a.onChange, maxNumber = _a.maxNumber, children = _a.children, defaultValue = _a.defaultValue, acceptType = _a.acceptType, maxFileSize = _a.maxFileSize; | ||
var inputRef = useRef(null); | ||
var _b = useState(defaultValue || []), imageList = _b[0], setImageList = _b[1]; | ||
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]; | ||
// the "id unique" of the image that need update by new image upload | ||
var _c = useState(""), keyUpdate = _c[0], setKeyUpdate = _c[1]; | ||
var _d = useState(__assign({}, defaultErrors)), errors = _d[0], setErrors = _d[1]; | ||
// for getting the latest imageList state | ||
@@ -151,2 +161,19 @@ var imageListRef = useRef(imageList); | ||
}; | ||
var validate = function (fileList) { | ||
setErrors(__assign({}, defaultErrors)); | ||
if (maxFileSize) { | ||
for (var i = 0; i < fileList.length; i++) { | ||
// check size | ||
var file = fileList[i].file; | ||
if (file) { | ||
var size = Math.round(file.size / 1024 / 1024); | ||
if (maxFileSize && size > maxFileSize) { | ||
setErrors(__assign(__assign({}, errors), { maxFileSize: true })); | ||
return false; | ||
} | ||
} | ||
} | ||
} | ||
return true; | ||
}; | ||
var onInputChange = function (e) { return __awaiter(void 0, void 0, void 0, function () { | ||
@@ -163,24 +190,26 @@ var files, fileList_1, updatedFileList; | ||
if (fileList_1.length > 0) { | ||
updatedFileList = void 0; | ||
if (keyUpdate) { | ||
updatedFileList = imageList.map(function (item) { | ||
if (item.key === keyUpdate) | ||
return __assign({}, fileList_1[0]); | ||
return item; | ||
}); | ||
setKeyUpdate(""); | ||
} | ||
else { | ||
if (mode === "multiple") { | ||
updatedFileList = __spreadArrays(imageList, fileList_1); | ||
if (maxNumber && updatedFileList.length > maxNumber) { | ||
updatedFileList = imageList; | ||
} | ||
if (validate(fileList_1)) { | ||
updatedFileList = void 0; | ||
if (keyUpdate) { | ||
updatedFileList = imageList.map(function (item) { | ||
if (item.key === keyUpdate) | ||
return __assign({}, fileList_1[0]); | ||
return item; | ||
}); | ||
setKeyUpdate(""); | ||
} | ||
else { | ||
updatedFileList = [fileList_1[0]]; | ||
if (multiple) { | ||
updatedFileList = __spreadArrays(imageList, fileList_1); | ||
if (maxNumber && updatedFileList.length > maxNumber) { | ||
updatedFileList = imageList; | ||
} | ||
} | ||
else { | ||
updatedFileList = [fileList_1[0]]; | ||
} | ||
} | ||
setImageList(updatedFileList); | ||
onStandardizeDataChange(updatedFileList); | ||
} | ||
setImageList(updatedFileList); | ||
onStandardizeDataChange(updatedFileList); | ||
} | ||
@@ -195,10 +224,21 @@ else { | ||
}); }; | ||
var acceptString = acceptType && acceptType.length > 0 | ||
? acceptType | ||
.reduce(function (acceptStr, item) { return acceptStr.concat(", image/" + item); }, "") | ||
.slice(2) | ||
: "image/*"; | ||
return (React.createElement(React.Fragment, null, | ||
React.createElement("input", { type: "file", accept: "image/*", ref: inputRef, multiple: mode === "multiple" && !keyUpdate, onChange: onInputChange, style: { display: "none" } }), | ||
React.createElement("input", { type: "file", accept: acceptString, ref: inputRef, multiple: multiple && !keyUpdate, onChange: onInputChange, style: { display: "none" } }), | ||
children && | ||
children({ imageList: imageList, onImageUpload: onImageUpload, onImageRemoveAll: onImageRemoveAll }))); | ||
children({ | ||
imageList: imageList, | ||
onImageUpload: onImageUpload, | ||
onImageRemoveAll: onImageRemoveAll, | ||
errors: errors | ||
}))); | ||
}; | ||
ImageUploading.defaultProps = { | ||
maxNumber: 100, | ||
mode: "single" | ||
maxNumber: 1000, | ||
multiple: false, | ||
acceptType: [] | ||
}; | ||
@@ -205,0 +245,0 @@ |
{ | ||
"name": "react-images-uploading", | ||
"version": "1.0.3", | ||
"version": "2.0.0", | ||
"description": "A simple images uploader without UI. Building by yourself", | ||
@@ -5,0 +5,0 @@ "author": "imvutoan", |
@@ -13,2 +13,4 @@ # react-images-uploading | ||
## [Article Medium](https://medium.com/@imvutoan/make-image-upload-in-react-easier-with-react-images-uploading-and-your-ui-983fed029ee2) | ||
## Install | ||
@@ -20,2 +22,8 @@ | ||
## Break change in version 2.0.0 | ||
- Replace "mode" by "multiple" props. | ||
- Fix bug images in defaultValue cannot update or delete. | ||
- Add some more utilities props : acceptType, maxFileSize | ||
## Usage | ||
@@ -29,3 +37,2 @@ | ||
const mode = "single"; | ||
const maxNumber = 10; | ||
@@ -35,2 +42,3 @@ class Example extends React.Component { | ||
// data for submit | ||
console.log(imageList); | ||
}; | ||
@@ -40,3 +48,3 @@ | ||
return ( | ||
<ImageUploading mode={mode} onChange={onChange} maxNumber={maxNumber}> | ||
<ImageUploading onChange={this.onChange} maxNumber={maxNumber} multiple> | ||
{({ imageList, onImageUpload, onImageRemoveAll }) => ( | ||
@@ -67,6 +75,8 @@ // write your building UI | ||
| ------------ | -------- | ---------------------- | ------- | ----------------------------------------------------- | | ||
| mode | string | single/multiple | single | Select just one or multiple images | | ||
| maxNumber | number | | 100 | Number of images user can select if mode = "multiple" | | ||
| 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 | | ||
| defaultValue | array | [{dataURL: ... }, ...] | | Init data | | ||
| acceptType | array | ['jpg', 'gif', 'png'] | [] | Supported image extension | | ||
| maxFileSize | number | | | Max image size(Mb) (will use in the image validation) | | ||
@@ -84,2 +94,3 @@ ## Exported options | ||
| onImageRemoveAll | function | Call for remove all image(s) | | ||
| errors | object | Export type of validation | | ||
@@ -86,0 +97,0 @@ ## License |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
80240
12.63%11
37.5%489
21.04%93
13.41%