datasync-blob 1.0.1

package/dist/DsBlob.css

@@ -0,0 +1,33 @@
+#upload-picture-label{
+    cursor: pointer;
+}
+
+#upload-picture-label input{
+    opacity: 0;
+    width: 0px;
+    height: 0px;
+}
+
+div.show-image {
+    position: relative;
+    /*float:left;*/
+    margin:5px;
+}
+div.show-image:hover img{
+    opacity:0.5;
+}
+div.show-image:hover input {
+    display: block;
+}
+div.show-image input {
+    position:absolute;
+    display:none;
+}
+div.show-image input.update {
+    top:0;
+    left:0;
+}
+div.show-image input.delete {
+    top:0;
+    left:0px;
+}

package/dist/components/DsBlob.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DsBlob = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("../DsBlob.css");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class DsBlob extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  reduceImage = e => {
+    let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
+    //console.log("imageSource = ",imageSource);
+    var canvas = document.createElement('canvas'),
+      context,
+      maxWidth = 800,
+      maxHeight = 800,
+      width = imageSource.width,
+      height = imageSource.height;
+    if (width > height) {
+      if (width > maxWidth) {
+        height *= maxWidth / width;
+        width = maxWidth;
+      }
+    } else {
+      if (height > maxHeight) {
+        width *= maxHeight / height;
+        height = maxHeight;
+      }
+    }
+    canvas.width = width;
+    canvas.height = height;
+    context = canvas.getContext('2d');
+    context.drawImage(imageSource, 0, 0, width, height);
+    let canvasData = canvas.toDataURL('image/jpg', 0.6); //Jpeg quality reduced from 0.8 down to 0.6
+    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'];
+    const _1Mo = 1024 * 1024;
+    const SizeLimit = 9;
+    console.clear();
+    //Reset input cache value -  to assure trigger if user select the same file again
+    e.target.value = null;
+    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)`);
+      }
+      console.log(`errCount = ${errCount} vs errs.length = ${errs.length}`);
+      if (errCount == errs.length) {
+        //None new error occurs
+        console.log("readImage:", file.name);
+        this.readImage(file);
+      }
+    });
+    if (errs.length) {
+      return errs.forEach(err => alert(err));
+    }
+  };
+  render() {
+    return /*#__PURE__*/_react.default.createElement("div", null, !this.props.data && /*#__PURE__*/_react.default.createElement("label", {
+      id: "upload-picture-label",
+      className: this.props.buttonStyle
+    }, this.props.Caption, /*#__PURE__*/_react.default.createElement("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"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: this.props.removebase64 ? "data:image/png;base64" : "" + this.props.data,
+      className: this.props.pictureStyle
+    }), !this.props.readOnly && /*#__PURE__*/_react.default.createElement("input", {
+      className: "btn btn-primary delete",
+      type: "button",
+      value: "Effacer",
+      onClick: this.resetUpload
+    })));
+  }
+}
+exports.DsBlob = DsBlob;

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "datasync-blob",
+  "version": "1.0.1",
+  "description": "Datasync Blob component",
+  "main": "./dist/components/DsBlob.js",
+  "files": ["./dist"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pmabiala/datasync-blob.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pmabiala/datasync-blob.git/issues",
+    "email": "pmabiala@me.com"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@testing-library/react": "^14.2.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-css": "^6.0.1",
+    "react": "^18.2.0",
+    "react-pdf": "^7.7.1"
+  },
+  "peerDependencies": {
+    "react": "^ 18.2.0"
+  },
+  "scripts": {
+    "build": "rm -r dist && babel src -d dist --ignore src/**/*.test.jsx && npm run copy-files",
+    "copy-files": "cp ./src/*.css dist/",
+    "test": "jest --config jest.config.json"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}