react-images-uploading - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

dist/index.d.ts

@@ -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;

dist/index.es.js

@@ -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 @@

dist/index.js

@@ -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 @@

package.json

 {
   "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",

README.md

@@ -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

No alert changes

Improved metrics

Total package byte prevSize

80240

12.63%

Number of package files

11

37.5%

Lines of code

489

21.04%

Number of lines in readme file

93

13.41%

No dependency changes