resolve file upload not working properly and convert forgotpassword in function component

apps/OpenSign/src/components/fields/FileUpload.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { SaveFileSize } from "../../constant/saveFileSize";
 import Parse from "parse";
+import sanitizeFileName from "../../primitives/sanitizeFileName";
 
 const FileUpload = (props) => {
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
@@ -70,10 +71,11 @@ const FileUpload = (props) => {
     Parse.serverURL = parseBaseUrl;
     Parse.initialize(parseAppId);
     const size = file.size;
-    // console.log("file ", file)
+    const fileName = file.name;
+    const name = sanitizeFileName(fileName);
     setfileload(true);
     const pdfFile = file;
-    const parseFile = new Parse.File(pdfFile.name, pdfFile);
+    const parseFile = new Parse.File(name, pdfFile);
 
     try {
       const response = await parseFile.save();

apps/OpenSign/src/primitives/sanitizeFileName.js

@@ -0,0 +1,5 @@
+function sanitizeFileName(fileName) {
+  // Remove spaces and invalid characters
+  return fileName.replace(/[^a-zA-Z0-9._-]/g, "");
+}
+export default sanitizeFileName;

apps/OpenSign/src/routes/ForgetPassword.js

@@ -1,120 +1,114 @@
-import React, { Component } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { fetchAppInfo, forgetPassword } from "../redux/actions";
 import Title from "../components/Title";
 import { NavLink } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 
-class forgotPassword extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      email: "",
-      password: "",
-      hideNav: ""
-    };
-  }
-
-  handleChange = (event) => {
+function ForgotPassword(props) {
+  const [state, setState] = useState({
+    email: "",
+    password: "",
+    hideNav: ""
+  });
+  const handleChange = (event) => {
     const { name, value } = event.target;
-    this.setState({ [name]: value });
+    setState({ ...state, [name]: value });
   };
 
-  resize = () => {
+  const resize = () => {
     let currentHideNav = window.innerWidth <= 760;
-    if (currentHideNav !== this.state.hideNav) {
-      this.setState({ hideNav: currentHideNav });
+    if (currentHideNav !== state.hideNav) {
+      setState({ ...state, hideNav: currentHideNav });
     }
   };
 
-  handleSubmit = (event) => {
+  const handleSubmit = (event) => {
     event.preventDefault();
-
-    localStorage.setItem("appLogo", this.props.appInfo.applogo);
-    localStorage.setItem("appName", this.props.appInfo.appname);
-    localStorage.setItem("defaultmenuid", this.props.appInfo.defaultmenuid);
-    localStorage.setItem("PageLanding", this.props.appInfo.LandingPageId);
+    localStorage.setItem("appLogo", props.appInfo.applogo);
+    localStorage.setItem("appName", props.appInfo.appname);
+    localStorage.setItem("defaultmenuid", props.appInfo.defaultmenuid);
+    localStorage.setItem("PageLanding", props.appInfo.LandingPageId);
     localStorage.setItem(
       "userSettings",
-      JSON.stringify(this.props.appInfo.settings)
+      JSON.stringify(props.appInfo.settings)
     );
-    const { email } = this.state;
-    if (email) {
-      this.props.forgetPassword(email);
+
+    if (state.email) {
+      props.forgetPassword(state.email);
     }
   };
 
-  componentDidMount() {
-    this.props.fetchAppInfo(localStorage.getItem("domain"));
-    window.addEventListener("resize", this.resize.bind(this));
-    this.resize();
-  }
+  useEffect(() => {
+    props.fetchAppInfo(localStorage.getItem("domain"));
+    resize();
+    window.addEventListener("resize", resize);
+    return () => window.removeEventListener("resize", resize);
+    // eslint-disable-next-line
+  }, []);
 
-  render() {
-    const { email } = this.state;
-    let image = this.props.appInfo.applogo;
-    return (
-      <div className="bg-white">
-        <Title title="Forgot password page" />
-        <div>
-          <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
-            <div className="w-[250px] h-[66px] inline-block">
-              {this.state.hideNav ? (
-                <img src={image} width="100%" alt="" />
-              ) : (
-                <img src={image} width="100%" alt="" />
-              )}
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-              <div className="">
-                <form onSubmit={this.handleSubmit}>
-                  <h2 className="text-[30px] mt-6">Welcome Back !</h2>
-                  <span className="text-[12px] text-[#878787]">
-                    Reset Your Password
-                  </span>
-                  <div className="shadow-md rounded my-4">
-                    <div className="px-6 py-4">
-                      <label className="block text-xs">Email</label>
-                      <input
-                        type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-                        name="email"
-                        value={email}
-                        onChange={this.handleChange}
-                        required
-                      />
-                      <hr className="my-2 border-none" />
-                    </div>
-                  </div>
-                  <div className="flex justify-between items-center px-4">
-                    <button
-                      type="submit"
-                      className="rounded-sm bg-[#3ac9d6] text-white px-4 py-3 text-xs font-semibold shadow uppercase"
-                    >
-                      Submit
-                    </button>
-                    <NavLink
-                      to="/"
-                      className="rounded-sm bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] px-4 py-3 text-xs font-semibold shadow uppercase"
-                    >
-                      Login
-                    </NavLink>
-                  </div>
-                </form>
-              </div>
-              {!this.state.hideNav && (
-                <div className="self-center">
-                  <div className="mx-auto md:w-[300px] lg:w-[500px]">
-                    <img src={login_img} alt="bisec" width="100%" />
+  let image = props.appInfo.applogo;
+  return (
+    <div className="bg-white">
+      <Title title="Forgot password page" />
+      <div>
+        <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
+          <div className="w-[250px] h-[66px] inline-block">
+            {state.hideNav ? (
+              <img src={image} width="100%" alt="" />
+            ) : (
+              <img src={image} width="100%" alt="" />
+            )}
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
+            <div className="">
+              <form onSubmit={handleSubmit}>
+                <h2 className="text-[30px] mt-6">Welcome Back !</h2>
+                <span className="text-[12px] text-[#878787]">
+                  Reset Your Password
+                </span>
+                <div className="shadow-md rounded my-4">
+                  <div className="px-6 py-4">
+                    <label className="block text-xs">Email</label>
+                    <input
+                      type="text"
+                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                      name="email"
+                      value={state.email}
+                      onChange={handleChange}
+                      required
+                    />
+                    <hr className="my-2 border-none" />
                   </div>
                 </div>
-              )}
+                <div className="flex justify-between items-center px-4">
+                  <button
+                    type="submit"
+                    className="rounded-sm bg-[#3ac9d6] text-white px-4 py-3 text-xs font-semibold shadow uppercase"
+                  >
+                    Submit
+                  </button>
+                  <NavLink
+                    to="/"
+                    className="rounded-sm bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] px-4 py-3 text-xs font-semibold shadow uppercase"
+                  >
+                    Login
+                  </NavLink>
+                </div>
+              </form>
             </div>
+            {!state.hideNav && (
+              <div className="self-center">
+                <div className="mx-auto md:w-[300px] lg:w-[500px]">
+                  <img src={login_img} alt="bisec" width="100%" />
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 const mapStateToProps = (state) => {
@@ -122,5 +116,5 @@ const mapStateToProps = (state) => {
 };
 
 export default connect(mapStateToProps, { fetchAppInfo, forgetPassword })(
-  forgotPassword
+  ForgotPassword
 );

apps/OpenSign/src/routes/UserProfile.js

@@ -4,6 +4,7 @@ import Parse from "parse";
 import { SaveFileSize } from "../constant/saveFileSize";
 import dp from "../assets/images/dp.png";
 import Title from "../components/Title";
+import sanitizeFileName from "../primitives/sanitizeFileName";
 
 function UserProfile() {
   const navigate = useNavigate();
@@ -90,7 +91,9 @@ function UserProfile() {
   const handleFileUpload = async (file) => {
     const size = file.size;
     const pdfFile = file;
-    const parseFile = new Parse.File(pdfFile.name, pdfFile);
+    const fileName = file.name;
+    const name = sanitizeFileName(fileName);
+    const parseFile = new Parse.File(name, pdfFile);
 
     try {
       const response = await parseFile.save();