We have an issue tracking system on our intranet where we need to add effected files to the issue, including the path of the file.
We have been using an asp.net FileUpload control and using FileUpload1.PostedFile.FileName to get the path of the file that the user selects and uploads. The files are usually not on the users local machine, but on network drives that are on a separate server than the issue tracking system. We use the upload as an easy way to add files to the issue tracker.
This does not work in any recent browsers for security reasons, only on Internet Explorer which is on its way out.
Is there any way to get this to work? At least for intranet sites? Or is there a better way to go about this? We do absolutely need the file path, and if we had to copy and paste it would make this process take much longer as it would make it a two step process and many files often need to be added.
Here is a snippet of the asp.net page:
<asp:FileUpload ID="FileUpload1" runat="server" />
And here is how I was getting the file path:
Dim sFileLocation As String = ""
Dim sFileName As String = ""
Dim sExtension As String = ""
sFileName = GetFileName(Me.FileUpload1.FileName)
sExtension = GetExtension(Me.FileUpload1.FileName)
sFileLocation = Me.FileUpload1.PostedFile.FileName
sFileLocation = sFileLocation.Replace(sFileName, "")
This is only works for IE 11, did not test IE edge.
Chrome does not work.
Due to intranet, we only allow use IE internally.
Here is the logic I am using to check the file size and name, validateFile function can get the file path without problem
<asp:FileUpload ID="fuAFS" runat="server" CssClass="cssAFS cssFu" AllowMultiple="false" Width="550px" /> <asp:Button ID="btnAFS" runat="server" Text="Upload AFS" OnClientClick="return ValidateFile('cssAFS');" />
function ValidateFile(cssName) {
var fu = $('.' + cssName);
//Empty upload control file.length == 1
if (fu.length > 0) { //Upload control exists
var pathName = fu.val();
if (pathName == '') {
alert('Missing file. Please click the Browse button to select a file with extension pdf.');
return false;
}
}
return true;
}
$('.cssFu').on('change', function (e) {
var maxFileSize = $('#<%=hdnMaxFileSize.ClientID%>').val();
if (e.target.files.length == 1) {
if (e.target.files[0] != null) {
var size = e.target.files[0].size; //IE
var fileSize = e.target.files[0].fileSize; //Firefox
var pathName = $(this).val();
var ext = pathName.substring(pathName.lastIndexOf(".") + 1, pathName.length).toLowerCase();
if (size > maxFileSize * 1024 * 1024 || fileSize > maxFileSize * 1024 * 1024) {
alert('File size exceeds limit. Maximum file size permitted is ' + maxFileSize + ' MB.');
$(this).val('');
// Prevent form Upload
e.stopPropagation();
e.preventDefault();
} else if (ext != 'pdf') {
alert('Invalid File. Please upload a File with extension: PDF');
$(this).val('');
// Prevent form Upload
e.stopPropagation();
e.preventDefault();
}
var fileName = pathName.substring(pathName.lastIndexOf("\\") + 1, pathName.length);
if (fileName != '' && fileName.length > 100) {
alert('File name length over 100 characters, please rename the file and upload again.');
$(this).val('');
// Prevent form Upload
e.stopPropagation();
e.preventDefault();
}
}
}
#rgorr - FileUpload will never give you the full path for security reasons.
Server.MapPath(FileUpload1.FileName);
I am running a Symfony 2.8 based web app which sends some form data back to a controller using Ajax.
So far everything worked fine, but since the latest macOS update to version 10.13.4 users start to report, that submitting the form does not work anymore in Safari. Other macOS Versions and other browsers on 10.13.4 still work fine, so it seems to be a problem in Safari. Of course I filed a bug report to Apple, but I do not think, that I will ever get feedback from there...
I was able to isolate the source of the problem: Submitting data which includes an empty file input fails:
// safri_bug.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form name="app_booking" method="post" action="/test/submit.php">
<div><input type="text" id="someValue" name="value"></div>
<div><input id="thefile" type="file" name="file"></div>
</form>
<button id="bSubmit" type="button">Submit</button>
<script>
$(document).ready(function() {
$('#bSubmit').click(function() {
var form = $('form');
var data = new FormData(form[0]);
$.ajax({
url : '/submit.php',
type : 'POST',
data : data,
contentType: false,
processData: false,
context : this,
success : function(response) {
alert('success: ' + response);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('error: ' + xhr.responseText + ' - ' + thrownError);
}
});
});
});
</script>
</body>
</html>
// submit.php
<?php
echo "OK";
Result
Submitting the form works fine on all tested browsers and platforms but in Safari in macOS 10.13.4
In Safari on macOS 10.13.4:
If not file is selected: The Ajax request runs for about 20 seconds (build in timeout?) and than returns with an empty sucess response. The submit.php does NOT get called.
If a file was selected: Everything works fine...
So, this seems to be a bug in the latest Safari update? Or is there anything wrong with my code?
Any idea how to prevent this bug?
Andrei Herford's solution will crash other browsers that do not support the entries() method of FormData - using try/catch will only find execution errors, not syntax errors.
Our solution was to use plain JavaScript to remove the empty file input element before creating the FormData object, thus:
for (i = 0; i < form.elements.length; i++) {
if (form.elements[i].type == 'file') {
if (form.elements[i].value == '') {
form.elements[i].parentNode.removeChild(form.elements[i]);
}
}
}
I use FormData throughout my site and can verify that this is a problem with the latest version of Safari. Removing the empty file fixes the problem. Here's the code that worked for me:
var form = $('#formID');
var data = new FormData(form[0])
//hack to fix safari bug where upload fails if file input is empty
if (document.getElementById("fileID").files.length == 0 ) { //if the file is empty
data.delete('fileID'); //remove it from the upload data
}
I used this solution and works for me.
var $form = $('#website_settings_form');
var $inputs = $('input[type="file"]:not([disabled])', $form); //select input files
$inputs.each(function(_, input) {
if (input.files.length > 0) return
$(input).prop('disabled', true) //if the input doesn't have uploaded files will be disable
})
var formData = new FormData($form[0]);// create the form data
$inputs.prop('disabled', false);//enable fields again.
Meanwhile I found this quick and dirty solution. But actually I am looking for a real workaround. Any ideas?
// Filter out empty file just before the Ajax request
// Use try/catch since Safari < 10.13.4 does not support FormData.entries()
try {
for (var pair of data.entries()) {
if (pair[1] instanceof File && pair[1].name == '' && pair[1].size == 0)
data.delete(pair[0]);
}
} catch(e) {}
I used Andrei's suggestion, which worked for safari, but broke IE.
The only solution I could find that would work in both browsers was to use eval().
Since this appears to be a bug only affecting safari 11 I also added a check on browser version.
if(dataObj instanceof FormData && navigator.userAgent.match(/version\/11((\.[0-9]*)*)? .*safari/i)) {
try {
eval('for (var pair of dataObj.entries()) {\
if (pair[1] instanceof File && pair[1].name === \'\' && pair[1].size === 0) {\
dataObj.delete(pair[0]);\
}\
}');
} catch(e) {}
}
Is there any way to find out the file size before uploading the file using AJAX / PHP in change event of input file?
For the HTML bellow
<input type="file" id="myFile" />
try the following:
//binds to onchange event of your input field
$('#myFile').bind('change', function() {
//this.files[0].size gets the size of your file.
alert(this.files[0].size);
});
See following thread:
How to check file input size with jQuery?
<script type="text/javascript">
function AlertFilesize(){
if(window.ActiveXObject){
var fso = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.getElementById('fileInput').value;
var thefile = fso.getFile(filepath);
var sizeinbytes = thefile.size;
}else{
var sizeinbytes = document.getElementById('fileInput').files[0].size;
}
var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
fSize = sizeinbytes; i=0;while(fSize>900){fSize/=1024;i++;}
alert((Math.round(fSize*100)/100)+' '+fSExt[i]);
}
</script>
<input id="fileInput" type="file" onchange="AlertFilesize();" />
Work on IE and FF
Here's a simple example of getting the size of a file before uploading. It's using jQuery to detect whenever the contents are added or changed, but you can still get files[0].size without using jQuery.
$(document).ready(function() {
$('#openFile').on('change', function(evt) {
console.log(this.files[0].size);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
<input id="openFile" name="img" type="file" />
</form>
Here's a more complete example, some proof of concept code to Drag and Drop files into FormData and upload via POST to a server. It includes a simple check for file size.
I had the same problem and seems like we haven't had an accurate solution. Hope this can help other people.
After take time exploring around, I finally found the answer. This is my code to get file attach with jQuery:
var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);
This is just the example code for getting the file size. If you want do other stuffs, feel free to change the code to satisfy your needs.
Best solution working on all browsers ;)
function GetFileSize(fileid) {
try {
var fileSize = 0;
// for IE
if(checkIE()) { //we could use this $.browser.msie but since it's deprecated, we'll use this function
// before making an object of ActiveXObject,
// please make sure ActiveX is enabled in your IE browser
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
var filePath = $("#" + fileid)[0].value;
var objFile = objFSO.getFile(filePath);
var fileSize = objFile.size; //size in b
fileSize = fileSize / 1048576; //size in mb
}
// for FF, Safari, Opeara and Others
else {
fileSize = $("#" + fileid)[0].files[0].size //size in b
fileSize = fileSize / 1048576; //size in mb
}
alert("Uploaded File Size is" + fileSize + "MB");
}
catch (e) {
alert("Error is :" + e);
}
}
from http://www.dotnet-tricks.com/Tutorial/jquery/HHLN180712-Get-file-size-before-upload-using-jquery.html
UPDATE :
We'll use this function to check if it's IE browser or not
function checkIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
// If Internet Explorer, return version number
alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
} else {
// If another browser, return 0
alert('otherbrowser');
}
return false;
}
$(document).ready(function() {
$('#openFile').on('change', function(evt) {
console.log(this.files[0].size);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
<input id="openFile" name="img" type="file" />
</form>
Browsers with HTML5 support has files property for input type.
This will of course not work in older IE versions.
var inpFiles = document.getElementById('#fileID');
for (var i = 0; i < inpFiles.files.length; ++i) {
var size = inpFiles.files.item(i).size;
alert("File Size : " + size);
}
Please do not use ActiveX as chances are that it will display a scary warning message in Internet Explorer and scare your users away.
If anyone wants to implement this check, they should only rely on the FileList object available in modern browsers and rely on server side checks only for older browsers (progressive enhancement).
function getFileSize(fileInputElement){
if (!fileInputElement.value ||
typeof fileInputElement.files === 'undefined' ||
typeof fileInputElement.files[0] === 'undefined' ||
typeof fileInputElement.files[0].size !== 'number'
) {
// File size is undefined.
return undefined;
}
return fileInputElement.files[0].size;
}
ucefkh's solution worked best, but because $.browser was deprecated in jQuery 1.91, had to change to use navigator.userAgent:
function IsFileSizeOk(fileid) {
try {
var fileSize = 0;
//for IE
if (navigator.userAgent.match(/msie/i)) {
//before making an object of ActiveXObject,
//please make sure ActiveX is enabled in your IE browser
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
var filePath = $("#" + fileid)[0].value;
var objFile = objFSO.getFile(filePath);
var fileSize = objFile.size; //size in b
fileSize = fileSize / 1048576; //size in mb
}
//for FF, Safari, Opeara and Others
else {
fileSize = $("#" + fileid)[0].files[0].size //size in b
fileSize = fileSize / 1048576; //size in mb
}
return (fileSize < 2.0);
}
catch (e) {
alert("Error is :" + e);
}
}
you need to do an ajax HEAD request to get the filesize. with jquery it's something like this
var req = $.ajax({
type: "HEAD",
url: yoururl,
success: function () {
alert("Size is " + request.getResponseHeader("Content-Length"));
}
});
Get the size of the file by files.item(i).size.
You should try this.
https://www.geeksforgeeks.org/validation-of-file-size-while-uploading-using-javascript-jquery/
You can use PHP filesize function. During upload using ajax, please check the filesize first by making a request an ajax request to php script that checks the filesize and return the value.
You can by using HTML5 File API: http://www.html5rocks.com/en/tutorials/file/dndfiles/
However you should always have a fallback for PHP (or any other backend language you use) for older browsers.
Personally, I would say Web World's answer is the best today, given HTML standards. If you need to support IE < 10, you will need to use some form of ActiveX. I would avoid the recommendations that involve coding against Scripting.FileSystemObject, or instantiating ActiveX directly.
In this case, I have had success using 3rd party JS libraries such as plupload which can be configured to use HTML5 apis or Flash/Silverlight controls to backfill browsers that don't support those. Plupload has a client side API for checking file size that works in IE < 10.
I have input with id case_attachment and I have tried get file size like this
($('#case_attachment'))[0].files[0].size
but it does not work on IE9
IE doesn't support this feature :(
I had found a great plugin for file upload jQuery-File-Upload
or you better use an ActiveX control to perform this action
function getSize()
{
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
alert(size + " bytes");
}
source: http://www.sencha.com/forum/showthread.php?196859-File-Upload-Field-IE-Safari-Opera-fileInput-error.&s=b124834725ae363759158268d91ac32c
Hi all, the question Title may be duplicated but the idea is different.
I need to validate file size in html using attribute
like:
<input type="file" id="file" multiple="" data-my-size="123456">
When the user selects file it checks the size with this data-my-size value.
and then it creates a div inside a div with id "file-list" with file name and if it is allowed or not.
for example:
<div id="file-list">
<div> File 123.png is allowed </div>
<div> File 321.png is Not allowed </div>
</div>
and it works with more than One input in the same page
Try this function....
function GetFileSize(fileid) {
try
{
var fileSize = 0;
//for IE
if ($.browser.msie) {
//before making an object of ActiveXObject,
//please make sure ActiveX is enabled in your IE browser
var objFSO = new ActiveXObject("Scripting.FileSystemObject"); var filePath = $("#" + fileid)[0].value;
var objFile = objFSO.getFile(filePath);
var fileSize = objFile.size; //size in kb
fileSize = fileSize / 1048576; //size in mb
}
//for FF, Safari, Opeara and Others
else {
fileSize = $("#" + fileid)[0].files[0].size //size in kb
fileSize = fileSize / 1048576; //size in mb
}
alert("Uploaded File Size is" + fileSize + "MB");
}
catch (e) {
alert("Error is :" + e);
}