Fix/make file-imput more accessible and use semantic html

[doriengr]

• Fix bug on delete button
• Add check if file is really .csv

Close #46

[Mohammad96Assaf]

As I mentioned in #98, the reason I originally used a custom style was to solve the localization issue, as I couldn't control the text in the default browser input. I also have another question: what about the progress bar that displays the upload status? Why did you remove it? :)

[doriengr]

As I mentioned in #98, the reason I originally used a custom style was to solve the localization issue, as I couldn't control the text in the default browser input. I also have another question: what about the progress bar that displays the upload status? Why did you remove it? :)

I removed it becauce the selection of a file does never take long and its not needed in my eyes for some couple of seconds. We could implement a process bar while the Import is running.

And the localization works in my eyes

[Mohammad96Assaf]

As I mentioned in #98, the reason I originally used a custom style was to solve the localization issue, as I couldn't control the text in the default browser input. I also have another question: what about the progress bar that displays the upload status? Why did you remove it? :)

I removed it becauce the selection of a file does never take long and its not needed in my eyes for some couple of seconds. We could implement a process bar while the Import is running.

And the localization works in my eyes

The progress bar actually demonstrates the import process. It runs until the server returns a response. Here's the code snippet:

const pr = await axios.post(to, formData, {
    headers: {
        'Authorization': authHeader,
        'Content-Type': 'multipart/form-data',
    }, 
    onUploadProgress: (progressEvent) => {
        if (progressEvent.total) {
            const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            setProgress(percentCompleted);
        }
    }
});

Sometimes the process might take more than just a few seconds, so in my opinion, the progress bar helps provide feedback to the user. Also, in the backend, the upload process is not yet separated from the import process, which is why the progress bar reflects the entire operation.

[doriengr]

@Mohammad96Assaf is it a solution if we make a new issue for that? As soon as the backend works, we can find a solution for the progress bar that will be shown as soon as the progress in the backend is started?

[choffmann]

👍