diff --git a/apps/OpenSign/src/components/fields/DropboxChoose.js b/apps/OpenSign/src/components/fields/DropboxChoose.js new file mode 100644 index 000000000..9ed1bb3f8 --- /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..09a11e8d2 100644 --- a/apps/OpenSign/src/components/fields/FileUpload.js +++ b/apps/OpenSign/src/components/fields/FileUpload.js @@ -2,14 +2,12 @@ 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")); 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; @@ -106,6 +103,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 && @@ -207,55 +254,51 @@ 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-[20px] font-bold bg-white text-red-500" + > + +
+
+
) : ( - +
+ + +
)} 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 8867ec956..8ea3b7195 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: "" 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}

+