Member Avatar for Deepika_7

Hi, I am a newbie to web application and I am facing a problem in uploading a csv file.
This is the input tag that I am using to select a file,
<input id="imprtUpldFileInpt" name="file" type="file"/>

And this is how I process the file details with jQuery,

var file = $("#imprtUpldFileInpt")[0].files[0];
var f_name = file.name;
var f_size = file.size;
var f_type = file.type;
var fileMimeTypeArr = ["text/comma-separated-values", "text/csv", "application/csv", "application/vnd.ms-excel"];
var fileTypePos = $.inArray(f_type, fileMimeTypeArr);

I am checking whether the selected file is a csv or not with the value of fileTypePos. If the value is greater than or equal to 0, then I conform that it is a csv file. But I am facing a problem in getting the file type.

If a csv is selected, the file name and size are obtained correctly. But I am not getting the file type.

This screenshot shows the file details of a csv file.

I have added the possible mime types in fileMimeTypeArr for checking whether the file is a csv file or not. The problem is with getting the file type.

This problem does not occur if the machine has MS Excel installed. But if a csv file is created/saved in a machine that does not have MS Excel, then this problem occurs.

Why the file type has an empty string? Any help would be appreciated.

  • 2 Contributors
  • 1 Reply
  • 935 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by rproffitt

Dani AI

Generated

Short answer: the browser supplies file.type and it is often just a best-guess (or blank) for local files, so an empty string is normal and you should not rely on it alone.

Use a layered approach for reliable detection:

  • add an accept hint on the file input to help the picker (e.g. text/csv, .csv) but treat it as UI help only;
  • fall back to checking the file extension if file.type is empty (as suggested);
  • for stronger client-side checks, read a small chunk with the File API and sniff the contents for common CSV features (commas, semicolons, tabs, and optional BOM/encoding). Always validate on the server too, because client-side checks are only convenience and can be bypassed.

Example client-side sniff (vanilla JS):

async function fileLooksLikeCsv(file) {
  if (file.type && /csv|comma-separated-values|excel/i.test(file.type)) return true;
  if ((file.name || '').toLowerCase().endsWith('.csv')) return true;

  const sample = await file.slice(0, 4096).text();
  const head = sample.split(/\r?\n/).slice(0, 5).join('\n');
  const counts = {
    comma: (head.match(/,/g) || []).length,
    semicolon: (head.match(/;/g) || []).length,
    tab: (head.match(/\t/g) || []).length
  };
  return Math.max(counts.comma, counts.semicolon, counts.tab) > 0;
}

Notes and cautions: CSVs vary by locale and can use different delimiters and encodings (UTF-8 with BOM, semicolon, etc.), so sniffing should be permissive. Implement full validation server-side (check extension, parse a few rows, reject if malformed) to be safe. This approach addresses the empty file.type issue seen by while keeping uploads robust.

Member Avatar for rproffitt

Since the filename has the .CSV why bother with filetype. Just grab the last 3 letters of the filename if filetype is ""

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.