Show supported file format and add it to settings

app/app.py

@@ -12,6 +12,7 @@ from app.language import detect_languages, transliterate
 from .api_keys import Database
 from .suggestions import Database as SuggestionsDatabase
 
+from argostranslatefiles import get_supported_formats
 from translatehtml import translate_html
 
 def get_json_dict(request):
@@ -94,6 +95,12 @@ def create_app(args):
         iter([l for l in languages if l.code == args.frontend_language_target]), None
     )
 
+    frontend_argos_supported_files_format = []
+
+    for file_format in get_supported_formats():
+        for ff in file_format.supported_file_extensions:
+            frontend_argos_supported_files_format.append(ff)
+
     # Raise AttributeError to prevent app startup if user input is not valid.
     if frontend_argos_language_source is None:
         raise AttributeError(
@@ -571,6 +578,11 @@ def create_app(args):
                 suggestions:
                   type: boolean
                   description: Whether submitting suggestions is enabled.
+                supportedFilesFormat:
+                  type: array
+                  items:
+                    type: string
+                  description: Supported files format
                 language:
                   type: object
                   properties:
@@ -598,6 +610,7 @@ def create_app(args):
                 "charLimit": args.char_limit,
                 "frontendTimeout": args.frontend_timeout,
                 "suggestions": args.suggestions,
+                "supportedFilesFormat": frontend_argos_supported_files_format,
                 "language": {
                     "source": {
                         "code": frontend_argos_language_source.code,

app/static/js/app.js

@@ -31,6 +31,7 @@ document.addEventListener('DOMContentLoaded', function(){
             suggestions: false,
             isSuggesting: false,
 
+            supportedFilesFormat : [],
             translationType: "text"
         },
         mounted: function(){
@@ -46,6 +47,7 @@ document.addEventListener('DOMContentLoaded', function(){
                     self.targetLang = self.settings.language.target.code;
                     self.charactersLimit = self.settings.charLimit;
                     self.suggestions = self.settings.suggestions;
+                    self.supportedFilesFormat = self.settings.supportedFilesFormat;
                 }else {
                     self.error = "Cannot load /frontend/settings";
                     self.loading = false;
@@ -141,7 +143,9 @@ document.addEventListener('DOMContentLoaded', function(){
                     '',
                     'console.log(await res.json());'].join("\n");
             },
-
+            supportedFilesFormatFormatted: function() {
+                return this.supportedFilesFormat.join(', ');
+            },
             isHtml: function(){
                 return htmlRegex.test(this.inputText);
             },

app/templates/index.html

@@ -175,7 +175,7 @@
                         <div class="row" v-if="translationType === 'files'">
                             <div class="file-dropzone">
                                 <div class="dropzone-content">
-                                    <span>Supported file format: </span>
+                                    <span>Supported file format: [[ supportedFilesFormatFormatted ]]</span>
                                     <form action="#">
                                         <div class="file-field input-field">
                                             <div class="btn">