datasync-blob 1.1.2 → 1.1.4

package/dist/components/DsBlob.js

@@ -0,0 +1,169 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+export class DsBlob extends Component {
+    constructor(props) {
+        super(props);
+        //-----------------------------------------------------------------------------------------------------------------------------------------
+        this.reduceImage = (e) => {
+            let imageSource = (e.path && e.path[0]) || e.srcElement; //Safari compliancy
+            if (this.debugging)
+                console.log("imageSource = ", imageSource);
+            var canvas = document.createElement('canvas'), context, width = imageSource.width, height = imageSource.height;
+            //Exact size props are set
+            if (this.props.width && this.props.height) {
+                //Check image size
+                if (width > this.props.width || height > this.props.height) {
+                    alert("L'image est trop grande, le format requis est " + this.props.width + "x" + this.props.height);
+                    return;
+                }
+                //Check image size
+                if (width < this.props.width || height < this.props.height) {
+                    alert("L'image est trop petite, le format requis est " + this.props.width + "x" + this.props.height);
+                    return;
+                }
+            }
+            //Max size props are set
+            if (this.props.maxWidth && this.props.maxHeight) {
+                if (width > height) {
+                    //Check resize is enabled
+                    if (!this.props.reduceImage) {
+                        alert("L'image est trop large ! la largeur maximale est de " + this.props.maxWidth);
+                        return;
+                    }
+                    if (width > this.props.maxWidth) {
+                        height *= this.props.maxWidth / width;
+                        width = this.props.maxWidth;
+                    }
+                }
+                else {
+                    if (height > this.props.maxHeight) {
+                        //Check resize is enabled
+                        if (!this.props.reduceImage) {
+                            alert("L'image est trop haute, la hauteur maximale est de " + this.props.maxHeight);
+                            return;
+                        }
+                        width *= this.props.maxHeight / height;
+                        height = this.props.maxHeight;
+                    }
+                }
+            }
+            //Build 2d picture
+            canvas.width = width;
+            canvas.height = height;
+            context = canvas.getContext('2d');
+            context.drawImage(imageSource, 0, 0, width, height);
+            //Jpeg conversion
+            let jpegCompressionRatio = (this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1) ? this.props.jpegQuality : 1;
+            let canvasData = canvas.toDataURL('image/jpg', jpegCompressionRatio); //Jpeg conversion
+            if (this.debugging)
+                console.log("jpegCompressionRatio->", jpegCompressionRatio, " canvasData.length = ", canvasData.length);
+            if (this.props.removebase64) {
+                //remove base64 prefix if property is set
+                this.props.uploadPicture({ data: canvasData ? canvasData.substring("data:image/png;base64".length) : "", item_id: this.props.item_id });
+            }
+            else {
+                //Keep base 64 prefix as it is
+                this.props.uploadPicture({ data: canvasData ? canvasData : "", item_id: this.props.item_id });
+            }
+        };
+        //-----------------------------------------------------------------------------------------------------------------------------------------
+        this.storeImageToImg = (e) => {
+            var image = document.createElement('img');
+            image.onload = this.reduceImage;
+            image.src = e.currentTarget.result;
+        };
+        //-----------------------------------------------------------------------------------------------------------------------------------------
+        this.readImage = (aPictureFile) => __awaiter(this, void 0, void 0, function* () {
+            let _reader = new FileReader();
+            _reader.onload = this.storeImageToImg;
+            _reader.readAsDataURL(aPictureFile);
+        });
+        //-----------------------------------------------------------------------------------------------------------------------------------------
+        this.resetUpload = () => {
+            this.props.uploadPicture({ data: "", item_id: this.props.item_id });
+        };
+        //-----------------------------------------------------------------------------------------------------------------------------------------
+        this.onInputChange = (e) => {
+            const errs = [];
+            const files = Array.from(e.target.files || []);
+            const types = ['image/png', 'image/jpeg', 'image/gif'];
+            const _1Mo = 1024 * 1024;
+            const SizeLimit = 9;
+            //Reset input cache value -  to assure trigger if user select the same file again
+            e.target.value = "";
+            if (this.debugging)
+                console.log("onInputChange");
+            if (files.length > 1) {
+                const msg = 'Pas plus d\'une image à la fois';
+                alert(msg);
+                return;
+            }
+            files.forEach((file, i) => {
+                let errCount = errs.length;
+                if (types.every(type => file.type !== type)) {
+                    errs.push(`'${file.type}' : format non supporté`);
+                }
+                if (file.size > (SizeLimit * _1Mo)) {
+                    errs.push(`'${file.name}' image trop volumineuse (max:${SizeLimit}Méga-octets)`);
+                }
+                if (this.debugging)
+                    console.log(`errCount = ${errCount} vs errs.length = ${errs.length}`);
+                if (errCount == errs.length) { //None new error occurs
+                    if (this.debugging)
+                        console.log("readImage::", file.name);
+                    this.readImage(file);
+                }
+            });
+            if (errs.length) {
+                return errs.forEach(err => alert(err));
+            }
+        };
+        this.state = { hover_input: false, hover_image: false };
+        this.debugging = false;
+    }
+    render() {
+        const upload_picture_label = {
+            cursor: "pointer"
+        };
+        const upload_picture_label_input = {
+            opacity: "0",
+            width: "0px",
+            height: "0px"
+        };
+        const div_show_image_hover = {
+            position: "relative",
+            margin: "0px",
+            opacity: "0.5"
+        };
+        const div_show_image = {
+            position: "relative",
+            margin: "0px"
+        };
+        const div_show_image_hover_input = {
+            display: "block",
+            top: "0px",
+            left: "0px",
+            position: "absolute"
+        };
+        const div_show_image_input = {
+            position: "absolute",
+            display: "none",
+            cursor: "pointer"
+        };
+        return (_jsxs("div", { children: [(!this.props.data) &&
+                    _jsxs("label", { id: "upload-picture-label", className: this.props.buttonStyle, style: upload_picture_label, children: [this.props.Caption, _jsx("input", { style: upload_picture_label_input, id: "nested-input", type: "file", accept: "image/*", onChange: this.onInputChange, multiple: true })] }), (this.props.data && this.props.data.length > 0) &&
+                    _jsxs("div", { className: "show-image", style: div_show_image, onMouseOver: () => { this.setState({ hover_input: true, hover_image: true }, () => { if (this.debugging)
+                            console.log("onMouseOver"); }); }, onMouseLeave: () => { this.setState({ hover_input: false, hover_image: false }, () => { if (this.debugging)
+                            console.log("onMouseLeave"); }); }, children: [_jsx("img", { style: this.state.hover_image ? div_show_image_hover : div_show_image, src: (this.props.removebase64) ? "data:image/png;base64" : "" + this.props.data, className: this.props.pictureStyle }), !this.props.readOnly &&
+                                _jsx("input", { style: this.state.hover_input ? div_show_image_hover_input : div_show_image_input, className: "btn btn-primary delete", type: "button", value: "Effacer", onClick: this.resetUpload })] })] }));
+    }
+}

package/dist/types/components/DsBlob.d.ts

@@ -0,0 +1,35 @@
+import { Component, ChangeEvent } from "react";
+interface DsBlobProps {
+    width?: number;
+    height?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    reduceImage?: boolean;
+    jpegQuality?: number;
+    removebase64?: boolean;
+    uploadPicture: (data: {
+        data: string;
+        item_id: any;
+    }) => void;
+    item_id: any;
+    data?: string;
+    buttonStyle?: string;
+    Caption?: string;
+    pictureStyle?: string;
+    readOnly?: boolean;
+}
+interface DsBlobState {
+    hover_input: boolean;
+    hover_image: boolean;
+}
+export declare class DsBlob extends Component<DsBlobProps, DsBlobState> {
+    private debugging;
+    constructor(props: DsBlobProps);
+    reduceImage: (e: Event) => void;
+    storeImageToImg: (e: ProgressEvent<FileReader>) => void;
+    readImage: (aPictureFile: File) => Promise<void>;
+    resetUpload: () => void;
+    onInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datasync-blob",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Datasync Blob component",
   "main": "./dist/DsBlob.js",
   "module": "./dist/DsBlob.js",