Html Input="file" Accept Attribute File Type (CSV)

Nailing file types with accept

In your journey to create an all-powerful file uploader, you want to accept different types of spreadsheet files. No problem! Use commas to add them:

<input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">


This way, you've opened the gate for .csv, .xlsx, and .xls files! It's like a party where the only invitees are Spreadsheet files; others have to stay outside.

Ensuring cross-browser compatibility

There's a catch - some browsers, like the niche but beloved Opera, may not recognize the .csv MIME type. Fret not, because wielding a repertoire of alternate MIME types has you covered:

<input type="file" accept=".csv, text/csv, application/csv, application/excel, application/vnd.ms-excel, application/vnd.msexcel, text/anytext">


Verifying file types with JavaScript

Relying on the accept attribute alone feels like letting the gatekeeper go on a break. Let JavaScript keep a watchful eye on file types for that extra trust.

function checkFile(input) {
  var validExts = ['.csv', '.xlsx', '.xls']; // The 'guest list'
  if (validExts.indexOf(input.value.substr(input.value.lastIndexOf('.'))) == -1) {
    alert(`Nope, wrong party pal! We only accept ${validExts.toString()}. Better luck next time!`); // Busting gate crashers
    return false;
  }
  return true; // Welcoming guests
}


And how about using the onchange event for instant gatekeeping?

<input type="file" onchange="checkFile(this);">


Now, that's called keeping it real!

Beware of older or less popular browsers

The accept attribute is not infallible - it can trip over older browsers or those less run-of-the-mill. You don't want any nasty surprises, so make sure to cross-check or provide clear instructions for users.

Deeper dive into accept

Elevating User Experience

The accept attribute is not just a stickler for rules but a close friend of UX too. It filters out unfit files, paves a smooth selection process, reduces errors, and saves time.

Pick your battles

Every application has a unique set of needs. By prioritizing particular file types, you can guide your users more intuitively

Ensure browser compatibility

Before laying your accept cards on the table, have a round of browser compatibility checks. Avoid unexpected behavior by having a peek into MDN or Can I Use.

File types facts and foibles

Friendly with Images

Say you are into pictures and need to upload them:

<input type="file" accept="image/*">


It's as easy as pie (and much more appealing).

Particular about PDFs

For accepting only PDF documents, use:

<input type="file" accept=".pdf">


Because when you want a PDF, you want a PDF!

Beware of Edge Cases

Remember that tech savvy users can tinker and bypass the accept attribute. Make sure to stand tall with server-side checks to authenticate file types before processing.