INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

FileAPI -> I need file path?

FileAPI -> I need file path?

(OP)
Hi

I'm trying to work with the HTML5 FileAPI via a shim. https://github.com/Jahdrien/FileReader

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)    
    {
        // has input elememnt been populated?
        // need to populate input element with selected file details?
        
        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

RE: FileAPI -> I need file path?

@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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
	<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.

RE: FileAPI -> I need file path?

(OP)
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

RE: FileAPI -> I need file path?

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()).

RE: FileAPI -> I need file path?

(OP)
Hi Justin,

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

Quote:

fileReader: 'filereader.swf',

Should be

CODE

filereader: '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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close