FileAPI -> I need file path?

1DMF · May 22, 2014

Hi

I'm trying to work with the HTML5 FileAPI via a shim.

The shim when initiated on non-HTML5 browsers uses a flash fallback, and I can access the details in the normal FileAPI manner.

Code:

    $('#fp_file').on('change',function() {
        fileSelected( $(this) );
    }); 

// File selected
function fileSelected(ele)
{    

    var file = $(ele).prop('files')[0];  
    
    var fileSize = 0;  
    
    if(file)    
    {
       [b] // has input elememnt been populated?
        // need to populate input element with selected file details?[/b]
        
        if(file.size > 1024 * 1024)
        {
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        }
        else
        {
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
        }
        
        $('#fileName').html(file.name);
        $('#fileSize').html(fileSize);
        $('#fileType').html(file.type);
        $('#file_dets').show('slide');
    
    }
    else
    {
        $(ele).val('');
        $('#file_dets').hide('slide');
    }
  
  
}

However, when a file is selected, the underlying input element is not populated with the file details, so the required input element is still blank and so the form won't submit.

How do I get the file name including full path so I can populate the input element with the file details so the form can then be submitted?

Looking at the FileAPI specs, I can't see this as an attribute or method to get file path?

Your help is appreciated.

1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

jpadie · May 23, 2014

@1DMF

i'm not very experienced in this area but I had some time this evening and this code worked for me just fine

Code:

<!DOCTYPE HTML>
	<title>title</title>
	<link rel="stylesheet" href="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"[/URL] />
	<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>[/URL]
	<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>[/URL]
	<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>[/URL]
	<script src="jquery.FileReader.js"></script>
	<script>
var myOptions = {
	id: 'whatever',
	fileReader: 'filereader.swf',
	debugMode:	true
	};
		
$(document).ready(function(){
	$('#myInput').fileReader( myOptions );
	$('#myInput').on('change', function(e){
		for(var i = 0; i < e.target.files.length; i++){
			var f = e.target.files[i];
    		var n = f.name;
			var t = f.type;
			var s = f.size;
			$('#output').val( $('#output').val() +  
				"name: \t " + n + "\n" +
				"type: \t " + t + "\n" +
				"size: \t " + s + "\n" +
				"\n\n"
				);
		}
	});
});

	</script>
</head>
<body>
	<input type="file" name="files" id="myInput" /><br/>
	<textarea id="output" cols="100" rows="20"></textarea>
</body>

note that because the input is no longer a normal dom element it's not easily addressable by jQuery. so you need to use the custom (files) property of the event target object. e.target.files ...

good luck!

ps. I read that this codebase is no longer supported and the suggestion is to use moxie's alternative.

1DMF · May 24, 2014

Hey Justin,

Not sure if you have missed what I was getting at or if you have found this works in IE9, because I can't test myself right now.

I can get the file details , name, size, type, via the FileAPI protocol, but as I understand it, you cannot get the full path.

I have found in IE9 that the flash object polyfilling the missing HTML5 functionality overrides the underlying input element so it doesn't get populated when a file is selected.

I would point out that I am actually using it via the

http://afarkas.github.io/webshim/demos/

framework, which implements the FileReader shim, yes I know the project recommends the other shim, but webshims uses this plugin and I'm using the webshims HTML5 framework for HTML5 forms polyfilling as recommended by HTML5please.com

To be honest, I'm not sure I'm going to bother with it, I still want the form to be submitted via HTTPS POST, the files being uploaded are too small to worry about and the app isn't going to be utilising AJAX for the form submission, it seems the FileAPI has been implemented to assist asynchronous file uploads not multi-part forms, though I don't know it well enough to be sure, should I go down this route.

If the browser supports HTML5, fine show the file details, otherwise just do the standard checking via JQuery and let the form submit so the backend app can do its sanity checks.

As much as I want to embrace HTML5 and modern web, IE9 & M$ are screwing it up and I'm finding perhaps some of the shims are more hassle than how we used to do it with JQuery and X/HTML!

I've found that IE9 in IE8 or IE7 mode, the webshim for the forms & forms-ext aren't working, the whole thing appears to be a bit flaky and a happy medium needs to be found.

Your input is as always very much appreciated.

1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

jpadie · May 24, 2014

I see. No - I don't use windows so have no easy method of testing for IE9.

but for sure the file input element will not have a property that gives you the file name - that is available only in the files property of the event target.

no reason why you would not be able to upload via POST, either over a normal form submit or an ajax event (if the browser supports window.FormData and readDataAsUrl()).

1DMF · May 27, 2014

Hi Justin,

I couldn't get the polyfill to work with your example, then noticed you had a typo in the options JSON.

fileReader: 'filereader.swf',

Should be

Code:

file[b]r[/b]eader: 'filereader.swf',

However, I have exactly the same problem in IE9, the underlying input element doesn't get populated when a file is selected so the form can't be submitted.

It seems this polyfil rather than just adding missing HTML5 functionality, removes existing HTML4/XHTML functionality making it unusable for my purpose.

Perhaps this is why the project recommends you don't use it!

Regards,
1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

FileAPI -> I need file path?

1DMF

Programmer

jpadie

Technical User

1DMF

Programmer

jpadie

Technical User

1DMF

Programmer

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

FileAPI -&gt; I need file path?

1DMF

Programmer

jpadie

Technical User

1DMF

Programmer

jpadie

Technical User

1DMF

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor

FileAPI -> I need file path?