fix uploading file with invalid name

OpenDonationAssistant · May 22, 2024 · e881690 · e881690
1 parent e055224
commit e881690
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git 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
@@ -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);
       });
     }
   }