0

Hi,

I have a input that looks like this : 

<input type="file" id="ModelViewAd.Files[0]" name="ModelViewAd.Files[0]" />

The id and name is set in this way to be able to bind to the viewclass (ASP.NET MVC2).

When I try to run the following jquery command to get value :

$('#ModelViewAd.Files[0]').val()

I get undefined?

What am I doing wrong?

BestRegards

Solution : This is solved by changing the name (HTML4 do not suport [ and ]). But If you are using HTML5 then this can be solved by using escape chars like this : $('#ModelViewAd.Files\[0\]').val().

Banshee
  • 15,376
  • 38
  • 128
  • 219

5 Answers5

1

Nothing wrong - this isn't supported. This is a security limitation in the browsers so that you cannot infer anything about the end user's file system.

Paul Alexander
  • 31,970
  • 14
  • 96
  • 151
  • He should be able to select the element though, and get the name of the file at least via `val()`. Another discussion on here show's this was successful (http://stackoverflow.com/questions/1299052/jquery-get-the-file-name-selected-from-input-type-file) so something else is the matter with his setup. – Nathan Anderson Jan 30 '11 at 18:36
  • Yes, I do know about the security part but should I not be able to check if the input is set or not? My thought is to always have a empty file input available for the user and if one is cleared then another (the last visible) will be hidden. – Banshee Jan 30 '11 at 18:44
  • I have seen this done before with some of the ajax upload tools available, but in all cases that I've really dug into, they've resorted to using flash to overcome the security barrier. – Paul Alexander Jan 30 '11 at 19:06
  • Yes falsh was what I first implemented but my site needs to be as complatible as possible, even with smartphones(as long as thay support upload of files) – Banshee Jan 30 '11 at 19:34
1

The . character is not a valid character for the id attribute. MVC uses the .'s in the name field and underscores in the id. That might be part of why you can't grab it with jquery.

Also, in your example you show us the element named ModelViewAd.Files[8] but are trying to select ModelViewAd.Files[3] in your jquery selector. Thats not part of the problem, is it?

Nathan Anderson
  • 6,768
  • 26
  • 29
  • Yes, but I have to use ModelViewAd.Files[x] as id else the default binder will not be able to bind properly to my viewclass. I have tried the replace the . with \\. as Matt Ball sugested but that gives the same problem. – Banshee Jan 30 '11 at 18:51
  • SnowJim, MVC will properly bind your model for you if you use the underscore in the `id`. It the the `name` attribute that is used for model binding (so that needs the dots in it). In fact the value the `id` attribute is never sent to the server. If you use one of the `HtmlHelper` functions you will see they emit `id`'s with underscores in place of dots in them. – Nathan Anderson Jan 30 '11 at 18:54
  • Thanks, but I have tried to switch from . to _ and that gives me the exact same problem? – Banshee Jan 30 '11 at 19:03
  • now escape the `[` and `]` characters like so `'#FileUpload_Files\\\\[1\\\\]'` and it will work! – Nathan Anderson Jan 30 '11 at 19:12
  • The `.` character is certainly a valid character for an ID attribute. – user113716 Jan 30 '11 at 19:26
  • $('#ModelViewAd\\.Files\\\[' + i + '\\\]').val().length seemse to work, but the problem might be HTML4 compability problems? Maby I need to use this : http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx instead of letting the default binder do the work? – Banshee Jan 30 '11 at 19:47
1

You need to escape the period character (.) in the selector. Otherwise, jQuery interprets your selector as looking for an element with ID ModelViewAd and class Files[0]:

$('#ModelViewAd\\.Files[0]')

Once you have actually selected an element (which, I assume, your selector was not properly doing), the .val() method may still return undefined if the user has not actually selected a file.

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • Thanks, but I have tried $('#ModelViewAd\\.Files[0]').val() and that also gives undefined? – Banshee Jan 30 '11 at 18:49
  • @SnowJim: what is the value of `$('#ModelViewAd\\.Files[0]').length`? If it is `0`, then your selector is still not written correctly. It's possible that the brackets are also messing up jQuery. You might try escaping those as well: `$('#ModelViewAd\\.Files\\[0\\]')`, but as Nathan pointed out, brackets are not valid characters in HTML IDs - unless you're using HTML5. – Matt Ball Jan 30 '11 at 19:17
  • Thanks Matt, it does work with $('#ModelViewAd\\.Files\\\[' + i + '\\\]').val().length, but it is vary important for my application to be as complatible as possible. Maby I have to do as descibed here : http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx ? But It would be nice to use the default binder. – Banshee Jan 30 '11 at 19:48
1

If you're targeting browsers that do not support HTML5, then you're using invalid HTML when you use [ and ] in an ID attribute.

As such, you shouldn't expect consistent behavior between browsers.

As others noted the . conflicts with the selector engine, but it is valid HTML4.

user113716
  • 318,772
  • 63
  • 451
  • 440
  • $('#ModelViewAd\\.Files\\\[' + i + '\\\]').val().length do work but I need it to be complatible with HTML4. The problem is that ASP.NET MVC2 demands to name it the way I do, else it will not be bound to the viewclass. So the question is how I can solve this with ASP.NET MVC2? I supose that I could take a IEnumerable files as parameter in my action as described here : http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx, but it would be nice to get it to bind to the viewclass if possible? – Banshee Jan 30 '11 at 19:45
0

I got a simple solution and it perfectly works first change the id as ModelViewAd then using jQuery you can simply get the file object as 

$('#ModelViewAd').get(0).files;
Sumer
  • 93
  • 2
  • 11