Skip to content
This repository has been archived by the owner on Jan 5, 2024. It is now read-only.

Commit

Permalink
unsupported file format
Browse files Browse the repository at this point in the history
  • Loading branch information
MusabShakeel576 committed Nov 19, 2022
1 parent e43d2a5 commit c8abd25
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 34 deletions.
4 changes: 4 additions & 0 deletions src/components/file-step/FileSelector.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
color: $textColor;
cursor: pointer;

&--error {
color: $errorTextColor;
}

&[data-active='true'] {
background: darken($fillColor, 10%);
transition: background 0.1s ease-out;
Expand Down
93 changes: 59 additions & 34 deletions src/components/file-step/FileSelector.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
7 changes: 7 additions & 0 deletions src/locale/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface ImporterLocale {

getImportError: (message: string) => string;
getDataFormatError: (message: string) => string;
unsupportedFileFormatError: string;
goBackButton: string;
nextButton: string;

Expand Down Expand Up @@ -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',

Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',

Expand Down Expand Up @@ -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',

Expand Down Expand Up @@ -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",

Expand Down Expand Up @@ -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ç",

Expand Down
15 changes: 15 additions & 0 deletions test/basics.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Binary file added test/fixtures/img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c8abd25

Please sign in to comment.