Member Avatar for noamwegner

Does anyone know if i can write a generic javascript function that check the file extension
of the uploaded files and if the extension is incorrect erases the value
because the user upload's more then one file i want to get the ID from the form
something like:

fileselectedchange(obj)
{
   var fileEXT = obj.substring(obj.indexOf('.')+1, obj.length);
		if (fileEXT.toUpperCase() != 'XLS'){
			alert('Please Select Only XLS File');
                        /* erasing the file input text geting the name from "obj" */
                        /* something like document.getelemntbyname(obj.name).value = "";*/
                        
			return;
                     }
}
<input type="file" name="firstXLS" onchange="fileselectedchange(this);" />

sorry if my english is not the best
thank you

  • 2 Contributors
  • 1 Reply
  • 4K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Luckychap

Dani AI

Generated

Good instincts. A couple of points to tighten this up and avoid brittle string parsing:

  • Prefer checking the file name via the File API (input.files[i].name) when available. Fall back to the text value only if files is unavailable. (developer.mozilla.org)
  • You cannot programmatically set a non-empty value for a file input. You can, however, clear it by assigning an empty string or null. If the browser refuses, replace the element with a fresh clone. The HTML spec explicitly allows clearing via empty string. (w3.org)
  • Add accept=".xls" to guide users toward the right type, but still validate in JS and on the server. accept is only a hint, not enforcement. (developer.mozilla.org)

Example that validates multiple selections, clears safely, and replaces the control only if needed:

<script>
  function onlyXls(input) {
    const list = input.files && input.files.length
      ? Array.from(input.files).map(f => f.name)
      : [input.value.split('\\').pop()];

    const bad = list.some(name => !/\.xls$/i.test(name));
    if (!bad) return;

    alert('Please select only .xls files');

    // Try the simple clear first
    input.value = '';
    // If the browser blocks it, replace the node
    if (input.value) {
      const replacement = input.cloneNode();
      replacement.name = input.name;
      replacement.addEventListener('change', () => onlyXls(replacement));
      input.replaceWith(replacement);
    }
  }
</script>

<input type="file" name="firstXLS" accept=".xls" onchange="onlyXls(this)">

Notes:

  • Luckychap’s idea of recreating the control works; cloning just the input (instead of rewriting a container’s innerHTML) is less disruptive to nearby DOM and event handlers.
  • Always re-check on the server: extensions can be spoofed, and accept can be bypassed. (developer.mozilla.org)
Member Avatar for Luckychap

'value' property is read-only. But there a work around you can use:

<html>
	<head>
	</head>
	<script>
		function fileselectedchange(obj)
		{
			var fName = obj.value;
			var fileEXT = fName.substring(fName.indexOf('.') + 1, fName.length);
			if (fileEXT.toUpperCase() != 'XLS'){
				// Reset the innerHTML with the initial one 
				document.getElementById('input1').innerHTML = divInnerHTML;
				return false;
			}
		}
	</script>
	
	<body>
		<div id="input1">
			<input id="fileInput" type="file" name="firstXLS" onchange="fileselectedchange(this);"/>
		</div>	
		<script>
			// Store the initial innerHTML for the div.  
			var divInnerHTML = document.getElementById('input1').innerHTML;
		</script>
	</body>
</html>
Edited by Luckychap because: n/a
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.