Fix #14: Add translatable error messages

Author: JelteMX

src/FileDropper.tsx

@@ -321,8 +321,12 @@ class FileDropperContainer extends Component<FileDropperContainerProps, {}> {
                     | undefined;
 
                 if (typeof verifyError !== "undefined" && verifyError !== "" && verifyError !== null) {
+                    const errorText = this.store.texts.FILESREJECTEDBYSERVER
+                        .replace(/%%FILENAME%%/g, file.name)
+                        .replace(/%%ERROR%%/g, verifyError);
+
                     this.store.addValidationMessage(
-                        new ValidationMessage(`File: '${file.name}' rejected: ${verifyError}`, "warning")
+                        new ValidationMessage(errorText, "warning")
                     );
                     this.store.deleteFile(file);
                     return false;

src/FileDropper.xml

@@ -294,6 +294,33 @@ Note 3: To avoid any other problem, make sure this helper object is detached fro
                     <translation lang="nl_NL">Are you sure you want to delete this file? This cannot be undone.</translation>
                 </translations>
             </property>
+            <property key="textFilesRejectedByServer" type="translatableString" required="false">
+                <caption>Rejected by server</caption>
+                <description>The %%FILENAME%% and %%ERROR%% are replaced by the widget</description>
+                <translations>
+                    <translation lang="en_US">File: '%%FILENAME%%' rejected: %%ERROR%%</translation>
+                    <translation lang="en_GB">File: '%%FILENAME%%' rejected: %%ERROR%%</translation>
+                    <translation lang="nl_NL">File: '%%FILENAME%%' rejected: %%ERROR%%</translation>
+                </translations>
+            </property>
+            <property key="textFilesRejected" type="translatableString" required="false">
+                <caption>Rejected</caption>
+                <description>Rejected files string</description>
+                <translations>
+                    <translation lang="en_US">The following files are rejected:</translation>
+                    <translation lang="en_GB">The following files are rejected:</translation>
+                    <translation lang="nl_NL">The following files are rejected:</translation>
+                </translations>
+            </property>
+            <property key="textFileRejectedSize" type="translatableString" required="false">
+                <caption>File size rejected</caption>
+                <description>String for when a file is rejected because of filesize. The %%FILENAME%% and %%MAXSIZE%% are replaced by the widget</description>
+                <translations>
+                    <translation lang="en_US">File: '%%FILENAME%%' is rejected, file size exceeds %%MAXIZE%%</translation>
+                    <translation lang="en_GB">File: '%%FILENAME%%' is rejected, file size exceeds %%MAXIZE%%</translation>
+                    <translation lang="nl_NL">File: '%%FILENAME%%' is rejected, file size exceeds %%MAXIZE%%</translation>
+                </translations>
+            </property>
         </propertyGroup>
 
     </properties>

src/components/FileDropper.tsx

@@ -58,6 +58,7 @@ export class FileDropper extends Component<FileDropperProps, {}> {
 
     private onDrop(acceptedFiles: File[], fileRejections: FileRejection[]): void {
         const { store } = this.props;
+        const { FILERECTEDSIZE, FILESREJECTED } = store.texts;
         const maxSize = store.maxSize || null;
         let maxReached = false;
 
@@ -71,8 +72,12 @@ export class FileDropper extends Component<FileDropperProps, {}> {
             const otherRejected: File[] = [];
             fileRejections.forEach(reject => {
                 if (maxSize !== null && reject && reject.file.size && reject.file.size > maxSize) {
+                    const text = FILERECTEDSIZE
+                        .replace(/%%FILENAME%%/g, reject.file.name)
+                        .replace(/%%MAXSIZE%%/g, fileSize(maxSize));
+
                     const message = new ValidationMessage(
-                        `File: '${reject.file.name}' is rejected, file size exceeds ${fileSize(maxSize)}`,
+                        text,
                         "warning"
                     );
                     store.addValidationMessage(message);
@@ -83,7 +88,7 @@ export class FileDropper extends Component<FileDropperProps, {}> {
 
             if (otherRejected.length > 0) {
                 mx.ui.info(
-                    ["The following files are rejected:", "", ...otherRejected.map(file => file.name)].join("\n"),
+                    [FILESREJECTED, "", ...otherRejected.map(file => file.name)].join("\n"),
                     true
                 );
             }

src/store/fileDropperFile.ts

@@ -56,7 +56,8 @@ export class FileDropperFile implements IFileDropperFile {
                 this.error = "File not saved, check logs";
                 this.status = "error";
             }
-        } catch (error) {
+            // @ts-ignore
+        } catch (error: any) {
             this.error = error;
             this.status = error;
         }
@@ -80,7 +81,8 @@ export class FileDropperFile implements IFileDropperFile {
                 }
                 this.hash = md5(base64);
             }
-        } catch (error) {
+            // @ts-ignore
+        } catch (error: any) {
             this.status = "error";
             this.error = error.message || "unknown error";
             this.data = this.base64 = null;

src/util/texts.ts

@@ -3,11 +3,17 @@ import { FileDropperContainerProps } from "../../typings/FileDropperProps";
 export interface FileDropperTexts {
     DROPZONE: string;
     DROPZONEMAXIMUM: string;
+    FILESREJECTED: string;
+    FILESREJECTEDBYSERVER: string;
+    FILERECTEDSIZE: string;
 }
 
 const defaultTexts: FileDropperTexts = {
     DROPZONE: "Click me to add a file!",
-    DROPZONEMAXIMUM: "Maximum amount for files reached, please consider removing files"
+    DROPZONEMAXIMUM: "Maximum amount for files reached, please consider removing files",
+    FILESREJECTED: "The following files are rejected:",
+    FILESREJECTEDBYSERVER: "File: '%%FILENAME%%' rejected: %%ERROR%%",
+    FILERECTEDSIZE: "File: '%%FILENAME%%' is rejected, file size exceeds %%MAXIZE%%"
 };
 
 export const getTexts = (props: FileDropperContainerProps): FileDropperTexts => {
@@ -21,5 +27,17 @@ export const getTexts = (props: FileDropperContainerProps): FileDropperTexts =>
         texts.DROPZONEMAXIMUM = props.textDropZoneMaximum;
     }
 
+    if (props.textFilesRejected) {
+        texts.FILESREJECTED = props.textFilesRejected;
+    }
+
+    if (props.textFilesRejectedByServer) {
+        texts.FILESREJECTEDBYSERVER = props.textFilesRejectedByServer;
+    }
+
+    if (props.textFileRejectedSize) {
+        texts.FILERECTEDSIZE = props.textFileRejectedSize;
+    }
+
     return texts;
 };

typings/FileDropperProps.d.ts

@@ -75,4 +75,7 @@ export interface FileDropperContainerProps extends CommonProps {
     textDropZone: string;
     textDropZoneMaximum: string;
     textDeleteFileConfirm: string;
+    textFilesRejectedByServer: string;
+    textFilesRejected: string;
+    textFileRejectedSize: string;
 }