Feat: file validation

src/components/file-step/FileSelector.scss

@@ -9,6 +9,10 @@
   color: $textColor;
   cursor: pointer;
 
+  &--error {
+    color: $errorTextColor;
+  }
+
   &[data-active='true'] {
     background: darken($fillColor, 10%);
     transition: background 0.1s ease-out;

src/components/file-step/FileSelector.tsx

@@ -1,44 +1,69 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useLocale } from '../../locale/LocaleContext';
 
 import './FileSelector.scss';
 
-export const FileSelector: React.FC<{ onSelected: (file: File) => void }> = ({
+export const FileSelector: React.FC<{
+  onSelected: (file: File) => void
+}> = ({
   onSelected
 }) => {
-  const onSelectedRef = useRef(onSelected);
-  onSelectedRef.current = onSelected;
+    const onSelectedRef = useRef(onSelected);
+    onSelectedRef.current = onSelected;
+    const [unsupportedFileFormat, setUnsupportedFileFormat] = useState(false)
+    const supportedFileFormats = ["text/csv", "text/plain"]
 
-  const dropHandler = useCallback((acceptedFiles: File[]) => {
-    // silently ignore if nothing to do
-    if (acceptedFiles.length < 1) {
-      return;
+    const dropHandler = useCallback((acceptedFiles: File[]) => {
+      // silently ignore if nothing to do
+      if (acceptedFiles.length < 1) {
+        return;
+      }
+
+      const file = acceptedFiles[0];
+      if (!supportedFileFormats.includes(file.type)) return setUnsupportedFileFormat(true)
+      onSelectedRef.current(file);
+    }, []);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+      onDrop: dropHandler
+    });
+
+    const l10n = useLocale('fileStep');
+
+    const errorBlock = () => {
+      return (
+        <div className="CSVImporter_FileSelector--error">
+          {l10n.unsupportedFileFormatError}. {l10n.activeDragDropPrompt}
+        </div>
+      )
     }
 
-    const file = acceptedFiles[0];
-    onSelectedRef.current(file);
-  }, []);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: dropHandler
-  });
-
-  const l10n = useLocale('fileStep');
-
-  return (
-    <div
-      className="CSVImporter_FileSelector"
-      data-active={!!isDragActive}
-      {...getRootProps()}
-    >
-      <input {...getInputProps()} />
-
-      {isDragActive ? (
-        <span>{l10n.activeDragDropPrompt}</span>
-      ) : (
-        <span>{l10n.initialDragDropPrompt}</span>
-      )}
-    </div>
-  );
-};
+    return (
+      <div
+        className="CSVImporter_FileSelector"
+        data-active={!!isDragActive}
+        {...getRootProps()}
+      >
+        <input {...getInputProps()} />
+
+        {isDragActive ? (
+          <span>
+            {
+              unsupportedFileFormat ?
+                errorBlock() :
+                l10n.activeDragDropPrompt
+            }
+          </span>
+        ) : (
+          <span>
+            {
+              unsupportedFileFormat ?
+                errorBlock() :
+                l10n.initialDragDropPrompt
+            }
+          </span>
+        )}
+      </div>
+    );
+  };

src/locale/index.ts

@@ -11,6 +11,7 @@ export interface ImporterLocale {
 
     getImportError: (message: string) => string;
     getDataFormatError: (message: string) => string;
+    unsupportedFileFormatError: string;
     goBackButton: string;
     nextButton: string;
 
@@ -71,6 +72,7 @@ export const enUS: ImporterLocale = {
 
     getImportError: (message) => `Import error: ${message}`,
     getDataFormatError: (message) => `Please check data formatting: ${message}`,
+    unsupportedFileFormatError: 'File format not supported',
     goBackButton: 'Go Back',
     nextButton: 'Choose columns',
 
@@ -133,6 +135,7 @@ export const deDE: ImporterLocale = {
     getImportError: (message) => `Fehler beim Import: ${message}`,
     getDataFormatError: (message: string) =>
       `Bitte Datenformat überprüfen: ${message}`,
+    unsupportedFileFormatError  : 'Dateiformat nicht unterstützt',
     goBackButton: 'Zurück',
 
     rawFileContentsHeading: 'Originaler Datei-Inhalt',
@@ -193,6 +196,7 @@ export const itIT: ImporterLocale = {
 
     getImportError: (message) => `Errore durante l'importazione: ${message}`,
     getDataFormatError: (message) => `Si prega di controllare il formato dei dati: ${message}`,
+    unsupportedFileFormatError  : 'Formato file non supportato',
     goBackButton: 'Torna indietro',
     nextButton: 'Seleziona le colonne',
 
@@ -253,6 +257,7 @@ export const ptBR: ImporterLocale = {
 
     getImportError: (message) => `Erro ao importar: ${message}`,
     getDataFormatError: (message) => `Por favor confira a formatação dos dados: ${message}`,
+    unsupportedFileFormatError  : 'Formato de arquivo não suportado',
     goBackButton: 'Voltar',
     nextButton: 'Escolher Colunas',
 
@@ -314,6 +319,7 @@ export const daDK: ImporterLocale = {
     getImportError: (message) => `Import-fejl: ${message}`,
     getDataFormatError: (message) =>
       `Kontrollér venligst data-formatering: ${message}`,
+    unsupportedFileFormatError  : 'Filformat understøttes ikke',
     goBackButton: "Gå tilbage",
     nextButton: "Vælg kolonner",
 
@@ -375,6 +381,7 @@ export const trTR: ImporterLocale = {
     getImportError: (message) => `Import hatası: ${message}`,
     getDataFormatError: (message) =>
       `Lütfen veri formatını kontrol edin: ${message}`,
+    unsupportedFileFormatError  : 'Dosya formatı desteklenmiyor',
     goBackButton: "Geri",
     nextButton: "Kolonları Seç",
 

test/basics.test.ts

@@ -62,6 +62,21 @@ describe('importer basics', () => {
     expect(await fileInput.getAttribute('type')).to.equal('file');
   });
 
+  it('with unsupported file selected', async () => {
+    const filePath = path.resolve(__dirname, './fixtures/img.png');
+
+    const fileInput = await getDriver().findElement(By.xpath('//input'));
+    await fileInput.sendKeys(filePath);
+
+    await getDriver().wait(
+      until.elementLocated(By.xpath('//*[contains(., "File format not supported")]')),
+      300 // extra time
+    );
+
+    const errorBlock = await getDriver().findElement(By.xpath('//*[contains(., "File format not supported")]'))
+    expect(await errorBlock.getText()).to.include("File format not supported")
+  })
+
   describe('with file selected', () => {
     beforeEach(async () => {
       const filePath = path.resolve(__dirname, './fixtures/simple.csv');