CODEWITHSUNDEEP
htmlinternet-explorermicrosoft-edge
dataviews
dataviews

Reputation: 3120

file upload html in edge / internet explorer

Is there not a working method to upload a file from edge / internet explorer? I am using the following on my site for html input tag:

<label for="userfile"><a>add</a><input id="userfile" name="userfile" type="file" style="display:none"/></label>

When you click on "add", the open file box pops up, but nothing is returned in console (see javascript code below). This code runs fine in Chrome, and displays results in console with no issue.

$('#userfile').on('input', function() {
    var test_test = $('#userfile')[0].files[0];
    console.log($('#userfile')[0].files[0]);
}

Upvotes: 0

Views: 2338

Answers (2)

dataviews
dataviews

Reputation: 3120

Anyone looking to use a custom button so that the input file works across most browsers, please take a look at this JS fiddle. This is exactly what I needed.

JS FIDDLE

<div class="file-input-wrapper">
  <button class="btn-file-input">Mah Custom Uploadz Button</button>
  <input type="file" name="file" />
</div>

I ended up changing the width and height and I made the button very small so that it wasn't taking up to much space on my site. Hope this helps someone.

Upvotes: 0

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

Based on my testing result, I find that on input is not working in IE and Edge.

enter image description here

you can try to replace on input with on change. It can work with IE and Edge.

Note that chnage event will only execute when there is change in file input. If user select the same file than it will not fire it.

Other thing I noticed that Label For is not working for IE. So in IE, You need to make HTML file input visible and click on it to execute the code.

Modified code:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	 $(document).ready(function(){
	
		$("#userfile").on("change", function() {
    			var test_test = $('#userfile')[0].files[0];
    			console.log($('#userfile')[0].files[0]);
		});

	});
	</script>
</head>
<body>
<label for="userfile"><a>add</a></label>

<input id="userfile" name="userfile" type="file" />

</body>
</html>

Output in IE 11:

enter image description here

Output in MS Edge:

enter image description here

you can try to find any work around for Label for or you can simply add a extra button and try to execute a code on click of that button may help you to solve the issue.

Upvotes: 1

Related Questions