1

So far, I can only check if the user has uploaded an xlsx, xls, or csv file. How can I make sure the user is actually uploading a file with those extensions that also is required to have two columns, with 'Example', and 'Label' headers in the frontend, otherwise, keep asking them to upload the correct file?

 <div class="form-group"><input type="file" name="annotatedsamplefile" id="annotatedsamplefile" accept=".xlsx, .xls, .csv" class=""></div>
Mona Jalal
  • 24,172
  • 49
  • 166
  • 311
  • 2
    You can't force the user to do anything they don't want to do. The only thing you can do is validate. So [validate the extension](https://stackoverflow.com/q/4234589/215552), knowing that it is trivial to rename. Parse the file (easier on the backend, but [possible on the frontend](https://stackoverflow.com/q/8238407/215552)) to validate the number of columns. If they don't, show an error. – Heretic Monkey Jul 06 '20 at 18:58
  • @HereticMonkey what I tried to say by forcing is not accepting their csv/xls file when it doesn't have two columns. Like the current browse button doesn't accept the file that are not xls or csv. – Mona Jalal Jul 06 '20 at 20:35
  • Yeah, that's just not how the web works. The browser knows nothing about the files until the user selects them. Imagine if every website could know everything about all of your personal files... – Heretic Monkey Jul 07 '20 at 12:15

1 Answers1

0

It sounds like you need to upload the file to the back-end immediately, which would process the file and return whether the file is of the correct format. Then, if it is valid, that same response would have a way to identify the already uploaded file so it doesn't have to be uploaded again on a possible form submission.

I'll leave it to you to figure out how to accomplish this, since there's multiple ways to do it in JQuery, vanilla JavaScript, and probably Bootstrap. It also depends on your server-side language as well as if you are putting the file into a DB or just a file system.

There may be a client-side way to do this, but do you really want to have a potentially large library loaded when your site loads? Also, relying on client-side information isn't generally a good idea when talking about business logic. Business logic should generally be done server-side, so it can be more reliable. It' much harder to alter a server-side response to user data than client-side results based on user data. I'm not saying server-side results are infallible, but rather that it can be easy to manipulate client-side results, even remotely. And even if you did validate on the client-side, you'd still want to validate the file on the server-side anyway, so why not avoid duplication of effort and just do it server-side?

computercarguy
  • 1,498
  • 9
  • 22
  • I am trying to bypass the checking in the frontend and not to do the check in the backend. I am in need of immediate interactiveness in the frontend. – Mona Jalal Jul 06 '20 at 20:34
  • 1
    @MonaJalal, if you are trying to bypass the check in the front end and not do it on the back end, then you aren't checking the file at all, which spells disaster for whatever process you are doing later. Also, sacrificing reliability for speed comes at a cost, too, which is usually higher than the cost of speed. – computercarguy Jul 06 '20 at 20:38
  • I only want to do this part of the check in the frontend and the rest in backend. – Mona Jalal Jul 06 '20 at 20:39
  • 2
    @MonaJalal, I'm still going to say that you shouldn't trust the client. It's filled with all kinds of problems, including real security issues. I know this isn't the answer you want, but it's still the correct answer, as it'll save you headaches later. https://security.stackexchange.com/questions/105389/dont-trust-the-client – computercarguy Jul 06 '20 at 20:44