From e881690c1bdcde9b5154afb80775553334316556 Mon Sep 17 00:00:00 2001
From: stCarolas <stcarolas@gmail.com>
Date: Wed, 22 May 2024 15:12:55 +0300
Subject: [PATCH] fix uploading file with invalid name

---
 .../settings/PaymentAlertsSettings.tsx        | 20 ++++++++++---------
 .../ReelItemBackgroundProperty.tsx            |  9 +++++----
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
index 372e94f..e2d44ec 100644
--- a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
+++ b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
@@ -257,9 +257,9 @@ export default function PaymentAlertSettings({
     setConfig(new Map(config).set(id, oldConfig));
   }
 
-  function uploadFile(file) {
+  function uploadFile(file: File, name: string) {
     return axios.put(
-      `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${file.name}`,
+      `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${name}`,
       { file: file },
       {
         headers: {
@@ -272,12 +272,13 @@ export default function PaymentAlertSettings({
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target.files[0];
-      uploadFile(file).then((ignore) => {
+      const name = file.name.replace(/[^0-9a-z\.]/gi, '');
+      uploadFile(file, name).then((ignore) => {
         setConfig((oldConfig) => {
           const alertConfig = oldConfig.get(id);
           const alerts = alertConfig?.alerts;
           let updatedAlerts = alerts?.at(selected);
-          updatedAlerts.image = file.name;
+          updatedAlerts.image = name;
           alerts[selected] = updatedAlerts;
           alertConfig.alerts = alerts;
           const newConfig = new Map(oldConfig).set(id, alertConfig);
@@ -291,12 +292,13 @@ export default function PaymentAlertSettings({
   const handleVideoUpload = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target.files[0];
-      uploadFile(file).then((ignore) => {
+      const name = file.name.replace(/[^0-9a-z\.]/gi, '');
+      uploadFile(file, name).then((ignore) => {
         setConfig((oldConfig) => {
           const alertConfig = oldConfig.get(id);
           const alerts = alertConfig?.alerts;
           let updatedAlerts = alerts?.at(selected);
-          updatedAlerts.video = file.name;
+          updatedAlerts.video = name;
           alerts[selected] = updatedAlerts;
           alertConfig.alerts = alerts;
           const newConfig = new Map(oldConfig).set(id, alertConfig);
@@ -310,13 +312,13 @@ export default function PaymentAlertSettings({
   const handleAudioUpload = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target.files[0];
-      console.log(file);
-      uploadFile(file).then((ignore) => {
+      const name = file.name.replace(/[^0-9a-z\.]/gi, '');
+      uploadFile(file, name).then((ignore) => {
         setConfig((oldConfig) => {
           const alertConfig = oldConfig.get(id);
           const alerts = alertConfig?.alerts;
           let updatedAlerts = alerts?.at(selected);
-          updatedAlerts.audio = file.name;
+          updatedAlerts.audio = name;
           alerts[selected] = updatedAlerts;
           alertConfig.alerts = alerts;
           const newConfig = new Map(oldConfig).set(id, alertConfig);
diff --git a/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.tsx b/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.tsx
index 5e21940..0100021 100644
--- a/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.tsx
+++ b/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.tsx
@@ -15,9 +15,9 @@ export class ReelItemBackgroundProperty extends DefaultWidgetProperty {
     );
   }
 
-  uploadFile(file: File) {
+  uploadFile(file: File, name: string) {
     return axios.put(
-      `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${file.name}`,
+      `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${name}`,
       { file: file },
       {
         headers: {
@@ -33,8 +33,9 @@ export class ReelItemBackgroundProperty extends DefaultWidgetProperty {
   ) {
     if (e.target.files) {
       const file = e.target.files[0];
-      this.uploadFile(file).then((ignore) => {
-        updateConfig(this.widgetId, "backgroundImage", file.name);
+      const name = file.name.replace(/[^0-9a-z\.]/gi, '');
+      this.uploadFile(file, name).then((ignore) => {
+        updateConfig(this.widgetId, "backgroundImage", name);
       });
     }
   }