From 25c50d53873b8faf117f2dc3e1a958ed355ae0bf Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Mon, 27 Nov 2023 12:48:20 +0530 Subject: [PATCH 1/4] change subscipiton urls --- apps/OpenSign/src/json/plansArr.json | 2 +- apps/OpenSign/src/routes/PlanSubscriptions.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/OpenSign/src/json/plansArr.json b/apps/OpenSign/src/json/plansArr.json index 4a5d51837..d4ae65baa 100644 --- a/apps/OpenSign/src/json/plansArr.json +++ b/apps/OpenSign/src/json/plansArr.json @@ -52,7 +52,7 @@ "subtitle": "Customization available Priority support.", "btnText": "Contact us", "url": "https://www.opensignlabs.com/contact-us", - "target": "_self", + "target": "_blank", "benefits": [ "All features", "Custom domain", diff --git a/apps/OpenSign/src/routes/PlanSubscriptions.js b/apps/OpenSign/src/routes/PlanSubscriptions.js index 6a3851f1f..00ad2fa62 100644 --- a/apps/OpenSign/src/routes/PlanSubscriptions.js +++ b/apps/OpenSign/src/routes/PlanSubscriptions.js @@ -136,8 +136,13 @@ const PlanSubscriptions = () => {

{item.subtitle}

+ From 5ce50db0016b33d6cd8f77bb7a041bb6ef868e27 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 28 Nov 2023 10:14:41 +0530 Subject: [PATCH 2/4] add dropbox in file upload field --- .../src/components/fields/DropboxChoose.js | 59 +++++++++++++++++++ .../src/components/fields/FileUpload.js | 53 ++++++++++++++++- apps/OpenSign/src/hook/useScript.js | 17 ++++++ apps/OpenSign/src/json/FormJson.js | 2 +- 4 files changed, 129 insertions(+), 2 deletions(-) create mode 100644 apps/OpenSign/src/components/fields/DropboxChoose.js diff --git a/apps/OpenSign/src/components/fields/DropboxChoose.js b/apps/OpenSign/src/components/fields/DropboxChoose.js new file mode 100644 index 000000000..0eb00adcf --- /dev/null +++ b/apps/OpenSign/src/components/fields/DropboxChoose.js @@ -0,0 +1,59 @@ +import React, { useCallback, useMemo } from "react"; +import { useDropScript } from "../../hook/useScript"; + +const DROPBOX_APP_KEY = process.env.REACT_APP_DROPBOX_API_KEY; // App key +const DROPBOX_SDK_URL = "https://www.dropbox.com/static/api/2/dropins.js"; +const DROPBOX_SCRIPT_ID = "dropboxjs"; + +export default function DropboxChooser({ children, onSuccess, onCancel }) { + useDropScript(DROPBOX_SDK_URL, { + attrs: { + id: DROPBOX_SCRIPT_ID, + "data-app-key": DROPBOX_APP_KEY + } + }); + + const options = useMemo( + () => ({ + // Required. Called when a user selects an item in the Chooser. + success: (files) => { + // console.log("success", files); + onSuccess && onSuccess(files); + }, + // Optional. Called when the user closes the dialog without selecting a file + // and does not include any parameters. + cancel: () => { + console.log("cancel"); + onCancel && onCancel(); + }, + + // Optional. "preview" (default) is a preview link to the document for sharing, + // "direct" is an expiring link to download the contents of the file. For more + linkType: "direct", // or "preview" + multiselect: false, // 是否支持多选 + extensions: [".pdf"], + + // Optional. A value of false (default) limits selection to files, + // while true allows the user to select both folders and files. + // You cannot specify `linkType: "direct"` when using `folderselect: true`. + folderselect: false // or true + }), + [onSuccess, onCancel] + ); + + const handleChoose = useCallback(() => { + if (window.Dropbox) { + window.Dropbox.choose(options); + } + }, [options]); + + return ( +
+ {children || ( + + )} +
+ ); +} diff --git a/apps/OpenSign/src/components/fields/FileUpload.js b/apps/OpenSign/src/components/fields/FileUpload.js index 226640d44..7902d7a71 100644 --- a/apps/OpenSign/src/components/fields/FileUpload.js +++ b/apps/OpenSign/src/components/fields/FileUpload.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { SaveFileSize } from "../../constant/saveFileSize"; import Parse from "parse"; import sanitizeFileName from "../../primitives/sanitizeFileName"; - +import DropboxChooser from "./DropboxChoose"; const FileUpload = (props) => { const [parseBaseUrl] = useState(localStorage.getItem("baseUrl")); const [parseAppId] = useState(localStorage.getItem("parseAppId")); @@ -106,6 +106,56 @@ const FileUpload = (props) => { console.error("Error uploading file:", error); } }; + + const dropboxSuccess = async (files) => { + // console.log("file ", files); + setfileload(true); + const file = files[0]; + const url = file.link; + const size = file.bytes; + const mb = Math.round(file.bytes / Math.pow(1024, 2)); + + if (mb > 10) { + setTimeout(() => { + alert( + `The selected file size is too large. Please select a file less than 10 MB` + ); + }, 500); + return; + } else { + const name = sanitizeFileName(file.name); + + const parseFile = new Parse.File(name, { uri: url }); + + try { + const response = await parseFile.save({ + progress: (progressValue, loaded, total, { type }) => { + if (type === "upload" && progressValue !== null) { + const percentCompleted = Math.round((loaded * 100) / total); + // console.log("percentCompleted ", percentCompleted); + setpercentage(percentCompleted); + } + } + }); + // console.log("response.url() ", response.url()); + setFileUpload(response.url()); + props.onChange(response.url()); + setfileload(false); + + if (response.url()) { + SaveFileSize(size, response.url()); + return response.url(); + } + } catch (error) { + setfileload(false); + setpercentage(0); + console.error("Error uploading file:", error); + } + } + }; + const dropboxCancel = async () => { + console.log("cancel clicked "); + }; let fileView = props.formData && props.schema.uploadtype === "s3viajw" ? null : props.formData && @@ -258,6 +308,7 @@ const FileUpload = (props) => { /> )} + ); }; diff --git a/apps/OpenSign/src/hook/useScript.js b/apps/OpenSign/src/hook/useScript.js index cb39649f7..354ad1fe1 100644 --- a/apps/OpenSign/src/hook/useScript.js +++ b/apps/OpenSign/src/hook/useScript.js @@ -15,3 +15,20 @@ export const useScript = (url, onload) => { }; }, [url, onload]); }; + +/**`useScript` hook is generated scripte for google sign in button */ +export const useDropScript = (url, onload) => { + useEffect(() => { + const script = document.createElement("script"); + //add url parameter to the script src, for load and it will remove after load in return + script.src = url; + script.async = true; + script.defer = true; + script.id = "dropboxjs"; + script.setAttribute("data-app-key", "8k0thg9r1t7asqg"); + document.head.appendChild(script); + return () => { + document.head.removeChild(script); + }; + }, [url, onload]); +}; diff --git a/apps/OpenSign/src/json/FormJson.js b/apps/OpenSign/src/json/FormJson.js index bf67053a9..7e13e480b 100644 --- a/apps/OpenSign/src/json/FormJson.js +++ b/apps/OpenSign/src/json/FormJson.js @@ -14,7 +14,7 @@ export const formJson = (id) => { type: "string", title: "Select Document", filetypes: [], - maxfilesizeKB: "5000", + maxfilesizeKB: "10000", uploadtype: "regular", helpbody: "", helplink: "" From 45b3e739d7201fc2c718321bf7d3778df1b4401a Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 28 Nov 2023 12:22:13 +0530 Subject: [PATCH 3/4] make changes UI in file upload --- .../src/components/fields/DropboxChoose.js | 4 +- .../src/components/fields/FileUpload.js | 94 +++++++++---------- 2 files changed, 45 insertions(+), 53 deletions(-) diff --git a/apps/OpenSign/src/components/fields/DropboxChoose.js b/apps/OpenSign/src/components/fields/DropboxChoose.js index 0eb00adcf..9ed1bb3f8 100644 --- a/apps/OpenSign/src/components/fields/DropboxChoose.js +++ b/apps/OpenSign/src/components/fields/DropboxChoose.js @@ -50,8 +50,8 @@ export default function DropboxChooser({ children, onSuccess, onCancel }) { return (
{children || ( - )}
diff --git a/apps/OpenSign/src/components/fields/FileUpload.js b/apps/OpenSign/src/components/fields/FileUpload.js index 7902d7a71..71e132878 100644 --- a/apps/OpenSign/src/components/fields/FileUpload.js +++ b/apps/OpenSign/src/components/fields/FileUpload.js @@ -8,8 +8,6 @@ const FileUpload = (props) => { const [parseAppId] = useState(localStorage.getItem("parseAppId")); const [_fileupload, setFileUpload] = useState(""); const [fileload, setfileload] = useState(false); - - const [localValue, setLocalValue] = useState(""); const [Message] = useState(false); const [percentage, setpercentage] = useState(0); @@ -25,7 +23,6 @@ const FileUpload = (props) => { const onChange = (e) => { try { let files = e.target.files; - setLocalValue(e.target.files); if (typeof files[0] !== "undefined") { if (props.schema.filetypes && props.schema.filetypes.length > 0) { var fileName = files[0].name; @@ -257,58 +254,53 @@ const FileUpload = (props) => { <> - {localValue ? ( - - ) : props.formData ? ( -
- file selected : {props.formData.split("/")[3]} + {props.formData ? ( +
+
+
+ file selected : {props.formData.split("/")[3]} +
+
{ + console.log("clicked"); + setFileUpload([]); + props.onChange(undefined); + }} + className="cursor-pointer px-[10px] text-base font-bold bg-white" + > + X +
+
+
) : ( - +
+ + +
)} - ); }; From 26d38f4ca2ba169e8fb0ca6665f7f258a7bc3904 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 28 Nov 2023 15:52:26 +0530 Subject: [PATCH 4/4] change color of cancel btn test in file-upload --- apps/OpenSign/src/components/fields/FileUpload.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/OpenSign/src/components/fields/FileUpload.js b/apps/OpenSign/src/components/fields/FileUpload.js index 71e132878..09a11e8d2 100644 --- a/apps/OpenSign/src/components/fields/FileUpload.js +++ b/apps/OpenSign/src/components/fields/FileUpload.js @@ -256,7 +256,7 @@ const FileUpload = (props) => { <> {props.formData ? (
-
+
file selected : {props.formData.split("/")[3]}
@@ -266,9 +266,9 @@ const FileUpload = (props) => { setFileUpload([]); props.onChange(undefined); }} - className="cursor-pointer px-[10px] text-base font-bold bg-white" + className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500" > - X +