datasync-blob 1.1.0 → 1.1.2

package/dist/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/index.d.mts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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;
+}
+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(): react_jsx_runtime.JSX.Element;
+}
+
+export { DsBlob };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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;
+}
+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(): react_jsx_runtime.JSX.Element;
+}
+
+export { DsBlob };

package/dist/index.js

@@ -0,0 +1 @@
+export { DsBlob } from './DsBlob';

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/DsBlob.tsx"],"sourcesContent":["export {DsBlob} from './components/DsBlob';","\nimport React, { Component, ChangeEvent, MouseEvent } from \"react\";\n\ninterface DsBlobProps {\n    width?: number;\n    height?: number;\n    maxWidth?: number;\n    maxHeight?: number;\n    reduceImage?: boolean;\n    jpegQuality?: number;\n    removebase64?: boolean;\n    uploadPicture: (data: { data: string; item_id: any }) => void;\n    item_id: any;\n    data?: string;\n    buttonStyle?: string;\n    Caption?: string;\n    pictureStyle?: string;\n    readOnly?: boolean;\n}\n\ninterface DsBlobState {\n    hover_input: boolean;\n    hover_image: boolean;\n}\n\nexport class DsBlob extends Component<DsBlobProps, DsBlobState> {\n    private debugging: boolean;\n\n    constructor(props: DsBlobProps) {\n        super(props);\n        this.state = { hover_input: false, hover_image: false };\n        this.debugging = false;\n    }\n\n    //-----------------------------------------------------------------------------------------------------------------------------------------\n    reduceImage = (e: Event) => {\n        let imageSource = ((e as any).path && (e as any).path[0]) || (e as any).srcElement as HTMLImageElement; //Safari compliancy\n\n        if (this.debugging) console.log(\"imageSource = \", imageSource);\n        var canvas = document.createElement('canvas'),\n            context: CanvasRenderingContext2D | null,\n            width = imageSource.width,\n            height = imageSource.height;\n\n        //Exact size props are set\n        if (this.props.width && this.props.height) {\n            //Check image size\n            if (width > this.props.width || height > this.props.height) {\n                alert(\"L'image est trop grande, le format requis est \" + this.props.width + \"x\" + this.props.height);\n                return\n            }\n\n            //Check image size\n            if (width < this.props.width || height < this.props.height) {\n                alert(\"L'image est trop petite, le format requis est \" + this.props.width + \"x\" + this.props.height);\n                return\n            }\n        }\n\n        //Max size props are set\n        if (this.props.maxWidth && this.props.maxHeight) {\n            if (width > height) {\n                //Check resize is enabled\n                if (!this.props.reduceImage) {\n                    alert(\"L'image est trop large ! la largeur maximale est de \" + this.props.maxWidth);\n                    return\n                }\n                if (width > this.props.maxWidth) {\n                    height *= this.props.maxWidth / width;\n                    width = this.props.maxWidth;\n                }\n            } else {\n                if (height > this.props.maxHeight) {\n                    //Check resize is enabled\n                    if (!this.props.reduceImage) {\n                        alert(\"L'image est trop haute, la hauteur maximale est de \" + this.props.maxHeight);\n                        return\n                    }\n\n                    width *= this.props.maxHeight / height;\n                    height = this.props.maxHeight;\n                }\n            }\n        }\n\n        //Build 2d picture\n        canvas.width = width;\n        canvas.height = height;\n        context = canvas.getContext('2d');\n        context!.drawImage(imageSource, 0, 0, width, height);\n\n\n        //Jpeg conversion\n        let jpegCompressionRatio = (this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1) ? this.props.jpegQuality : 1\n        let canvasData = canvas.toDataURL('image/jpg', jpegCompressionRatio);//Jpeg conversion\n\n        if (this.debugging)\n            console.log(\"jpegCompressionRatio->\", jpegCompressionRatio, \" canvasData.length = \", canvasData.length);\n\n        if (this.props.removebase64) {\n            //remove base64 prefix if property is set\n            this.props.uploadPicture({ data: canvasData ? canvasData.substring(\"data:image/png;base64\".length) : \"\", item_id: this.props.item_id });\n        }\n        else {\n            //Keep base 64 prefix as it is\n            this.props.uploadPicture({ data: canvasData ? canvasData : \"\", item_id: this.props.item_id });\n        }\n    }\n\n    //-----------------------------------------------------------------------------------------------------------------------------------------\n    storeImageToImg = (e: ProgressEvent<FileReader>) => {\n        var image = document.createElement('img');\n        image.onload = this.reduceImage;\n\n        image.src = (e.currentTarget as FileReader).result as string;\n    }\n\n    //-----------------------------------------------------------------------------------------------------------------------------------------\n    readImage = async (aPictureFile: File) => {\n        let _reader = new FileReader();\n\n        _reader.onload = this.storeImageToImg;\n        _reader.readAsDataURL(aPictureFile);\n    }\n\n    //-----------------------------------------------------------------------------------------------------------------------------------------\n    resetUpload = () => {\n        this.props.uploadPicture({ data: \"\", item_id: this.props.item_id });\n    }\n\n    //-----------------------------------------------------------------------------------------------------------------------------------------\n    onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n        const errs: string[] = []\n        const files = Array.from(e.target.files || [])\n        const types = ['image/png', 'image/jpeg', 'image/gif']\n        const _1Mo = 1024 * 1024\n        const SizeLimit = 9\n\n        //Reset input cache value -  to assure trigger if user select the same file again\n        e.target.value = \"\"\n\n        if (this.debugging)\n            console.log(\"onInputChange\")\n\n        if (files.length > 1) {\n            const msg = 'Pas plus d\\'une image à la fois'\n            alert(msg);\n            return;\n        }\n\n        files.forEach((file: File, i: number) => {\n            let errCount = errs.length\n            if (types.every(type => file.type !== type)) {\n                errs.push(`'${file.type}' : format non supporté`)\n            }\n\n            if (file.size > (SizeLimit * _1Mo)) {\n                errs.push(`'${file.name}' image trop volumineuse (max:${SizeLimit}Méga-octets)`)\n            }\n\n            if (this.debugging)\n                console.log(`errCount = ${errCount} vs errs.length = ${errs.length}`)\n\n            if (errCount == errs.length) { //None new error occurs\n                if (this.debugging)\n                    console.log(\"readImage::\", file.name);\n                this.readImage(file);\n            }\n        })\n\n        if (errs.length) {\n            return errs.forEach(err => alert(err))\n        }\n    }\n\n    render() {\n\n        const upload_picture_label: React.CSSProperties = {\n            cursor: \"pointer\"\n        }\n\n        const upload_picture_label_input: React.CSSProperties = {\n            opacity: \"0\",\n            width: \"0px\",\n            height: \"0px\"\n        }\n\n        const div_show_image_hover: React.CSSProperties = {\n            position: \"relative\",\n            margin: \"0px\",\n            opacity: \"0.5\"\n        }\n\n        const div_show_image: React.CSSProperties = {\n            position: \"relative\",\n            margin: \"0px\"\n        }\n\n        const div_show_image_hover_input: React.CSSProperties = {\n            display: \"block\",\n            top: \"0px\",\n            left: \"0px\",\n            position: \"absolute\"\n        }\n\n        const div_show_image_input: React.CSSProperties = {\n            position: \"absolute\",\n            display: \"none\",\n            cursor: \"pointer\"\n        }\n\n        return (\n            <div>\n                {(!this.props.data) &&\n                    <label\n                        id=\"upload-picture-label\"\n                        className={this.props.buttonStyle} style={upload_picture_label}>{this.props.Caption}\n                        <input style={upload_picture_label_input} id=\"nested-input\" type=\"file\" accept=\"image/*\" onChange={this.onInputChange} multiple />\n                    </label>}\n\n                {(this.props.data && this.props.data.length > 0) &&\n                    <div className=\"show-image\"\n                        style={div_show_image}\n\n                        onMouseOver={() => { this.setState({ hover_input: true, hover_image: true }, () => { if (this.debugging) console.log(\"onMouseOver\") }) }}\n                        onMouseLeave={() => { this.setState({ hover_input: false, hover_image: false }, () => { if (this.debugging) console.log(\"onMouseLeave\") }) }}>\n\n                        <img\n                            style={this.state.hover_image ? div_show_image_hover : div_show_image}\n                            src={(this.props.removebase64) ? \"data:image/png;base64\" : \"\" + this.props.data}\n                            className={this.props.pictureStyle}\n                        />\n                        {!this.props.readOnly &&\n                            <input\n                                style={this.state.hover_input ? div_show_image_hover_input : div_show_image_input}\n                                className=\"btn btn-primary delete\" type=\"button\" value=\"Effacer\"\n                                onClick={this.resetUpload} />}\n                    </div>\n                }\n            </div>);\n    }\n}\n\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,217 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/components/DsBlob.tsx
+import { Component } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DsBlob = class extends Component {
+  constructor(props) {
+    super(props);
+    //-----------------------------------------------------------------------------------------------------------------------------------------
+    this.reduceImage = (e) => {
+      let imageSource = e.path && e.path[0] || e.srcElement;
+      if (this.debugging) console.log("imageSource = ", imageSource);
+      var canvas = document.createElement("canvas"), context, width = imageSource.width, height = imageSource.height;
+      if (this.props.width && this.props.height) {
+        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;
+        }
+        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;
+        }
+      }
+      if (this.props.maxWidth && this.props.maxHeight) {
+        if (width > height) {
+          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) {
+            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;
+          }
+        }
+      }
+      canvas.width = width;
+      canvas.height = height;
+      context = canvas.getContext("2d");
+      context.drawImage(imageSource, 0, 0, width, height);
+      let jpegCompressionRatio = this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1 ? this.props.jpegQuality : 1;
+      let canvasData = canvas.toDataURL("image/jpg", jpegCompressionRatio);
+      if (this.debugging)
+        console.log("jpegCompressionRatio->", jpegCompressionRatio, " canvasData.length = ", canvasData.length);
+      if (this.props.removebase64) {
+        this.props.uploadPicture({ data: canvasData ? canvasData.substring("data:image/png;base64".length) : "", item_id: this.props.item_id });
+      } else {
+        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) => __async(this, null, 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;
+      e.target.value = "";
+      if (this.debugging)
+        console.log("onInputChange");
+      if (files.length > 1) {
+        const msg = "Pas plus d'une image \xE0 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\xE9`);
+        }
+        if (file.size > SizeLimit * _1Mo) {
+          errs.push(`'${file.name}' image trop volumineuse (max:${SizeLimit}M\xE9ga-octets)`);
+        }
+        if (this.debugging)
+          console.log(`errCount = ${errCount} vs errs.length = ${errs.length}`);
+        if (errCount == errs.length) {
+          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 /* @__PURE__ */ jsxs("div", { children: [
+      !this.props.data && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          id: "upload-picture-label",
+          className: this.props.buttonStyle,
+          style: upload_picture_label,
+          children: [
+            this.props.Caption,
+            /* @__PURE__ */ 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 && /* @__PURE__ */ 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: [
+            /* @__PURE__ */ 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 && /* @__PURE__ */ 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
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+};
+export {
+  DsBlob
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DsBlob.tsx"],"sourcesContent":["\nimport React, { Component, ChangeEvent, MouseEvent } from \"react\";\n\ninterface DsBlobProps {\n    width?: number;\n    height?: number;\n    maxWidth?: number;\n    maxHeight?: number;\n    reduceImage?: boolean;\n    jpegQuality?: number;\n    removebase64?: boolean;\n    uploadPicture: (data: { data: string; item_id: any }) => void;\n    item_id: any;\n    data?: string;\n    buttonStyle?: string;\n    Caption?: string;\n    pictureStyle?: string;\n    readOnly?: boolean;\n}\n\ninterface DsBlobState {\n    hover_input: boolean;\n    hover_image: boolean;\n}\n\nexport class DsBlob extends Component<DsBlobProps, DsBlobState> {\n    private debugging: boolean;\n\n    constructor(props: DsBlobProps) {\n        super(props);\n        this.state = { hover_input: false, hover_image: false };\n        this.debugging = false;\n    }\n\n    //-----------------------------------------------------------------------------------------------------------------------------------------\n    reduceImage = (e: Event) => {\n        let imageSource = ((e as any).path && (e as any).path[0]) || (e as any).srcElement as HTMLImageElement; //Safari compliancy\n\n        if (this.debugging) console.log(\"imageSource = \", imageSource);\n        var canvas = document.createElement('canvas'),\n            context: CanvasRenderingContext2D | null,\n            width = imageSource.width,\n            height = imageSource.height;\n\n        //Exact size props are set\n        if (this.props.width && this.props.height) {\n            //Check image size\n            if (width > this.props.width || height > this.props.height) {\n                alert(\"L'image est trop grande, le format requis est \" + this.props.width + \"x\" + this.props.height);\n                return\n            }\n\n            //Check image size\n            if (width < this.props.width || height < this.props.height) {\n                alert(\"L'image est trop petite, le format requis est \" + this.props.width + \"x\" + this.props.height);\n                return\n            }\n        }\n\n        //Max size props are set\n        if (this.props.maxWidth && this.props.maxHeight) {\n            if (width > height) {\n                //Check resize is enabled\n                if (!this.props.reduceImage) {\n                    alert(\"L'image est trop large ! la largeur maximale est de \" + this.props.maxWidth);\n                    return\n                }\n                if (width > this.props.maxWidth) {\n                    height *= this.props.maxWidth / width;\n                    width = this.props.maxWidth;\n                }\n            } else {\n                if (height > this.props.maxHeight) {\n                    //Check resize is enabled\n                    if (!this.props.reduceImage) {\n                        alert(\"L'image est trop haute, la hauteur maximale est de \" + this.props.maxHeight);\n                        return\n                    }\n\n                    width *= this.props.maxHeight / height;\n                    height = this.props.maxHeight;\n                }\n            }\n        }\n\n        //Build 2d picture\n        canvas.width = width;\n        canvas.height = height;\n        context = canvas.getContext('2d');\n        context!.drawImage(imageSource, 0, 0, width, height);\n\n\n        //Jpeg conversion\n        let jpegCompressionRatio = (this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1) ? this.props.jpegQuality : 1\n        let canvasData = canvas.toDataURL('image/jpg', jpegCompressionRatio);//Jpeg conversion\n\n        if (this.debugging)\n            console.log(\"jpegCompressionRatio->\", jpegCompressionRatio, \" canvasData.length = \", canvasData.length);\n\n        if (this.props.removebase64) {\n            //remove base64 prefix if property is set\n            this.props.uploadPicture({ data: canvasData ? canvasData.substring(\"data:image/png;base64\".length) : \"\", item_id: this.props.item_id });\n        }\n        else {\n            //Keep base 64 prefix as it is\n            this.props.uploadPicture({ data: canvasData ? canvasData : \"\", item_id: this.props.item_id });\n        }\n    }\n\n    //-----------------------------------------------------------------------------------------------------------------------------------------\n    storeImageToImg = (e: ProgressEvent<FileReader>) => {\n        var image = document.createElement('img');\n        image.onload = this.reduceImage;\n\n        image.src = (e.currentTarget as FileReader).result as string;\n    }\n\n    //-----------------------------------------------------------------------------------------------------------------------------------------\n    readImage = async (aPictureFile: File) => {\n        let _reader = new FileReader();\n\n        _reader.onload = this.storeImageToImg;\n        _reader.readAsDataURL(aPictureFile);\n    }\n\n    //-----------------------------------------------------------------------------------------------------------------------------------------\n    resetUpload = () => {\n        this.props.uploadPicture({ data: \"\", item_id: this.props.item_id });\n    }\n\n    //-----------------------------------------------------------------------------------------------------------------------------------------\n    onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n        const errs: string[] = []\n        const files = Array.from(e.target.files || [])\n        const types = ['image/png', 'image/jpeg', 'image/gif']\n        const _1Mo = 1024 * 1024\n        const SizeLimit = 9\n\n        //Reset input cache value -  to assure trigger if user select the same file again\n        e.target.value = \"\"\n\n        if (this.debugging)\n            console.log(\"onInputChange\")\n\n        if (files.length > 1) {\n            const msg = 'Pas plus d\\'une image à la fois'\n            alert(msg);\n            return;\n        }\n\n        files.forEach((file: File, i: number) => {\n            let errCount = errs.length\n            if (types.every(type => file.type !== type)) {\n                errs.push(`'${file.type}' : format non supporté`)\n            }\n\n            if (file.size > (SizeLimit * _1Mo)) {\n                errs.push(`'${file.name}' image trop volumineuse (max:${SizeLimit}Méga-octets)`)\n            }\n\n            if (this.debugging)\n                console.log(`errCount = ${errCount} vs errs.length = ${errs.length}`)\n\n            if (errCount == errs.length) { //None new error occurs\n                if (this.debugging)\n                    console.log(\"readImage::\", file.name);\n                this.readImage(file);\n            }\n        })\n\n        if (errs.length) {\n            return errs.forEach(err => alert(err))\n        }\n    }\n\n    render() {\n\n        const upload_picture_label: React.CSSProperties = {\n            cursor: \"pointer\"\n        }\n\n        const upload_picture_label_input: React.CSSProperties = {\n            opacity: \"0\",\n            width: \"0px\",\n            height: \"0px\"\n        }\n\n        const div_show_image_hover: React.CSSProperties = {\n            position: \"relative\",\n            margin: \"0px\",\n            opacity: \"0.5\"\n        }\n\n        const div_show_image: React.CSSProperties = {\n            position: \"relative\",\n            margin: \"0px\"\n        }\n\n        const div_show_image_hover_input: React.CSSProperties = {\n            display: \"block\",\n            top: \"0px\",\n            left: \"0px\",\n            position: \"absolute\"\n        }\n\n        const div_show_image_input: React.CSSProperties = {\n            position: \"absolute\",\n            display: \"none\",\n            cursor: \"pointer\"\n        }\n\n        return (\n            <div>\n                {(!this.props.data) &&\n                    <label\n                        id=\"upload-picture-label\"\n                        className={this.props.buttonStyle} style={upload_picture_label}>{this.props.Caption}\n                        <input style={upload_picture_label_input} id=\"nested-input\" type=\"file\" accept=\"image/*\" onChange={this.onInputChange} multiple />\n                    </label>}\n\n                {(this.props.data && this.props.data.length > 0) &&\n                    <div className=\"show-image\"\n                        style={div_show_image}\n\n                        onMouseOver={() => { this.setState({ hover_input: true, hover_image: true }, () => { if (this.debugging) console.log(\"onMouseOver\") }) }}\n                        onMouseLeave={() => { this.setState({ hover_input: false, hover_image: false }, () => { if (this.debugging) console.log(\"onMouseLeave\") }) }}>\n\n                        <img\n                            style={this.state.hover_image ? div_show_image_hover : div_show_image}\n                            src={(this.props.removebase64) ? \"data:image/png;base64\" : \"\" + this.props.data}\n                            className={this.props.pictureStyle}\n                        />\n                        {!this.props.readOnly &&\n                            <input\n                                style={this.state.hover_input ? div_show_image_hover_input : div_show_image_input}\n                                className=\"btn btn-primary delete\" type=\"button\" value=\"Effacer\"\n                                onClick={this.resetUpload} />}\n                    </div>\n                }\n            </div>);\n    }\n}\n\n"],"mappings":"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","names":[]}

package/dist/types/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/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { DsBlob } from './DsBlob';

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "datasync-blob",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Datasync Blob component",
-  "main": "./dist/components/DsBlob.js",
-  "files": [
-    "./dist"
-  ],
+  "main": "./dist/DsBlob.js",
+  "module": "./dist/DsBlob.js",
+  "types": "./types/DsBlob.d.ts",
+  "files": ["./dist"],
   "repository": {
     "type": "git",
     "url": "https://github.com/pmabiala/datasync-blob.git"
@@ -25,7 +25,8 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-transform-css": "^6.0.1",
     "react": "^18.2.0",
-    "react-pdf": "^7.7.1",
+    "react-pdf": "^10.0.1",
+    "tsup": "^8.5.0",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1",
     "webpack-node-externals": "^3.0.0",
@@ -35,6 +36,8 @@
     "react": "^ 18.2.0"
   },
   "scripts": {
+    "hybrid":"tsc",
+    "tsup": "tsup",
     "build_old": "rm -r dist && babel src -d dist --ignore src/**/*.test.jsx && npm run copy-files",
     "build": "rm -r dist && babel src -d dist --ignore src/**/*.test.jsx && npm run copy-files && webpack --config webpack.config.js",
     "copy-files": "cp ./src/*.css dist/",

package/dist/components/DsBlob.js

@@ -1,224 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DsBlob = void 0;
-var _react = _interopRequireWildcard(require("react"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-class DsBlob extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hover_input: false,
-      hover_image: false
-    };
-    this.debugging = false;
-  }
-
-  //-----------------------------------------------------------------------------------------------------------------------------------------
-  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
-      });
-    }
-  };
-
-  //-----------------------------------------------------------------------------------------------------------------------------------------
-  storeImageToImg = e => {
-    var image = document.createElement('img');
-    image.onload = this.reduceImage;
-    image.src = e.currentTarget.result;
-  };
-
-  //-----------------------------------------------------------------------------------------------------------------------------------------
-  readImage = async aPictureFile => {
-    let _reader = new FileReader();
-    _reader.onload = this.storeImageToImg;
-    _reader.readAsDataURL(aPictureFile);
-  };
-
-  //-----------------------------------------------------------------------------------------------------------------------------------------
-  resetUpload = () => {
-    this.props.uploadPicture({
-      data: "",
-      item_id: this.props.item_id
-    });
-  };
-
-  //-----------------------------------------------------------------------------------------------------------------------------------------
-  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 = null;
-    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));
-    }
-  };
-  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 /*#__PURE__*/_react.default.createElement("div", null, !this.props.data && /*#__PURE__*/_react.default.createElement("label", {
-      id: "upload-picture-label",
-      className: this.props.buttonStyle,
-      style: upload_picture_label
-    }, this.props.Caption, /*#__PURE__*/_react.default.createElement("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 && /*#__PURE__*/_react.default.createElement("div", {
-      class: "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");
-        });
-      }
-    }, /*#__PURE__*/_react.default.createElement("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 && /*#__PURE__*/_react.default.createElement("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
-    })));
-  }
-}
-exports.DsBlob = DsBlob;