datasync-dynamic-form 1.3.9 → 1.4.0

package/dist/DsDynamicForm.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { Component, useImperativeHandle, forwardRef } from "react";
 import Multiselect from 'multiselect-react-dropdown';
-import { CTimeStamp, Randomize, SaveDataTierToDatasync, WScrollTo } from "datasync-core";
+import { CTimeStamp, Randomize, SaveDataTierToDatasync, WScrollTo, CGUID } from "datasync-core";
 import { DsBlob } from "datasync-blob";
 import { DsPdf } from "datasync-pdf";
 // reactstrap components
@@ -89,6 +89,93 @@ export class DsDynamicForm extends Component {
             if (this.props.onFormChange)
                 this.props.onFormChange(this.local_data_blob.data_tier);
         };
+        /**
+         * PROTOTYPE : uploadToDatasyncCloud
+         * Purpose : Upload binary data to My Custom Cloud server using Datasync SncPushCloud endpoint and return the accessible URL for the uploaded file.
+         * @param base64Data
+         * @param fileName
+         */
+        this.uploadToDatasyncCloud = async (fileName, base64Data) => {
+            try {
+                const formData = new FormData();
+                formData.append('action', "syncPushCloud");
+                formData.append('filename', fileName);
+                formData.append('binary', base64Data);
+                const response = await fetch('http://localhost:8888/datasync-service/Sync.php', {
+                    method: 'POST',
+                    body: formData,
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const result = await response.json();
+                if (this.debugging) {
+                    console.log('FTP upload response:', result);
+                }
+            }
+            catch (error) {
+                if (this.debugging) {
+                    console.error('FTP upload error details:', error);
+                }
+                throw error;
+            }
+        };
+        this.setBlobData = async (fieldName, value, cloudStorage) => {
+            //let httpBaseUrl = "localhost:8888/datasync-service/cloud"; // Base URL for accessing files in cloud storage
+            let httpBaseUrl = "http://localhost:8888/datasync-service/image_cloud.php?filename"; // Base URL for accessing files in cloud storage
+            try {
+                if (this.debugging)
+                    console.log("setBlobData:fieldName ->", fieldName, " value ->", value, " cloudStorage ->", cloudStorage);
+                let finalValue = value;
+                if (cloudStorage && value) {
+                    // Extract file extension from base64 data or determine from content
+                    const mimeToExt = {
+                        'data:image/jpeg': '.jpg',
+                        'data:image/jpg': '.jpg',
+                        'data:image/png': '.png',
+                        'data:image/gif': '.gif',
+                        'data:application/pdf': '.pdf',
+                        'data:text/plain': '.txt'
+                    };
+                    let extension = '.bin'; // default extension
+                    for (const [mimeType, ext] of Object.entries(mimeToExt)) {
+                        if (value.startsWith(mimeType)) {
+                            extension = ext;
+                            break;
+                        }
+                    }
+                    // Generate unique filename: file + guid + extension
+                    const uniqueFileName = `file_${CGUID()}${extension}`;
+                    // Upload base64ToBinary content to FTP server
+                    try {
+                        await this.uploadToDatasyncCloud(uniqueFileName, value);
+                        if (this.debugging) {
+                            console.log("Cloud Upload completed:", uniqueFileName);
+                        }
+                        // Store HTTP URL + filename as the final value
+                        //finalValue = `${httpBaseUrl.endsWith('/') ? httpBaseUrl : httpBaseUrl + '/'}${uniqueFileName}`;
+                        finalValue = `${httpBaseUrl}=${uniqueFileName}`;
+                        if (this.debugging) {
+                            console.log("Cloud storage URL:", finalValue);
+                        }
+                    }
+                    catch (uploadError) {
+                        console.error("FTP Upload failed:", uploadError);
+                        throw new Error(`Failed to upload file to FTP server: ${uploadError}`);
+                    }
+                }
+                let duplicate_data_tier = JSON.parse(JSON.stringify(this.local_data_blob.data_tier));
+                duplicate_data_tier[fieldName] = finalValue;
+                this.local_data_blob.data_tier = duplicate_data_tier;
+                //this.local_data_blob.data_tier[fieldName] =  finalValue  
+            }
+            catch (error) {
+                alert(error);
+            }
+            //onFormChange handler return current form value to caller - PMAB on 2025-02-03
+            if (this.props.onFormChange)
+                this.props.onFormChange(this.local_data_blob.data_tier);
+        };
         this.setFieldError = (pFieldObject, value) => {
             try {
                 let nextFieldError = this.state.fieldError || {};
@@ -467,7 +554,16 @@ export class DsDynamicForm extends Component {
                         /* Checkbox is override with combobox */
                         return (_jsxs("div", { className: "field-rendering checkbox", children: [this.getFieldLabelTitle(field), _jsx(Multiselect, { showArrow: true, options: ["Oui", "Non"], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, onRemove: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, disable: this.props.read_only, singleSelect: true }), this._error_label(field)] }));
                     case "blob":
-                        return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "col-md-10 blob-fied", children: [_jsx(DsBlob, { item_id: field.name, readOnly: this.props.read_only ? this.props.read_only : false, Caption: `${this.getFieldPrompt(field)} ...`, data: this.getFieldData(field.name), uploadPicture: (UploadFile) => { this.setFieldData(field.name, UploadFile.data); this.checkValidation(field); }, pictureStyle: "pic", buttonStyle: "btn btn-secondary", width: field.width ? field.width : undefined, height: field.height ? field.height : undefined, maxWidth: field.max_width ? field.max_width : undefined, maxHeight: field.max_height ? field.max_height : undefined, maxKBytes: field.max_kbytes ? field.max_kbytes : undefined, reduceImage: field.reduceImage ? field.reduceImage : undefined, onErrorHandler: (errorObject) => { this.onBlobErrorLocalHandler(errorObject); }, debugging: this.debugging }), this._error_label(field)] })] }));
+                        return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "col-md-10 blob-fied", children: [_jsx(DsBlob, { item_id: field.name, readOnly: this.props.read_only ? this.props.read_only : false, Caption: `${this.getFieldPrompt(field)} ...`, data: this.getFieldData(field.name), cloud_storage: field.cloud_storage || false, uploadPicture: async (UploadFile) => {
+                                                try {
+                                                    await this.setBlobData(field.name, UploadFile.data, field.cloud_storage || false);
+                                                    this.checkValidation(field);
+                                                }
+                                                catch (error) {
+                                                    console.error("Upload failed:", error);
+                                                    this.setFieldError(field, "Upload failed");
+                                                }
+                                            }, pictureStyle: "pic", buttonStyle: "btn btn-secondary", width: field.width ? field.width : undefined, height: field.height ? field.height : undefined, maxWidth: field.max_width ? field.max_width : undefined, maxHeight: field.max_height ? field.max_height : undefined, maxKBytes: field.max_kbytes ? field.max_kbytes : undefined, reduceImage: field.reduceImage ? field.reduceImage : undefined, onErrorHandler: (errorObject) => { this.onBlobErrorLocalHandler(errorObject); }, debugging: this.debugging }), this._error_label(field)] })] }));
                     case "pdf":
                         return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "col-md-10", children: [_jsx(DsPdf, { item_id: field.name, readOnly: this.props.read_only ? this.props.read_only : false, Caption: `${this.getFieldPrompt(field)} ...`, data: this.getFieldData(field.name), uploadPdf: (UploadFile) => { this.setFieldData(field.name, UploadFile.data); this.checkValidation(field); }, pictureStyle: "pic", buttonStyle: "btn btn-secondary" }), this._error_label(field)] })] }));
                     case "email":

package/dist/types/DsDynamicForm.d.ts

@@ -1,6 +1,7 @@
 import React, { Component, ChangeEvent } from "react";
 import "./flex-grid.css";
 interface Field {
+    cloud_storage?: boolean;
     name: string;
     input_type: string;
     placeholder?: string;
@@ -142,6 +143,14 @@ export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynam
     clearForm: () => void;
     getFieldData: (fieldName: string) => string;
     setFieldData: (fieldName: string, value: string) => void;
+    /**
+     * PROTOTYPE : uploadToDatasyncCloud
+     * Purpose : Upload binary data to My Custom Cloud server using Datasync SncPushCloud endpoint and return the accessible URL for the uploaded file.
+     * @param base64Data
+     * @param fileName
+     */
+    private uploadToDatasyncCloud;
+    setBlobData: (fieldName: string, value: string, cloudStorage: boolean) => Promise<void>;
     setFieldError: (pFieldObject: Field, value: string) => void;
     getFieldError: (pFieldObject: Field) => string;
     _error_label: (field: Field) => JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "datasync-dynamic-form",
   "description": "Datasync Dynamic Form component",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "main": "dist/DsDynamicForm.js",
   "module": "dist/DsDynamicForm.js",
   "types": "dist/types/DsDynamicForm.d.ts",