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) => { 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) => { 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) => { 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); }); } }