4

Well, i am pretty stuck so i am opening another question about styling the file-fileupload form element.

After some tryings i'll finally (thought) i had it working, but then as usual IE will start protesting ones again. The thing is, i'll have the following form, it hides the real file-input with css and so it replaces it with a fake one, using the fileHiddenInput div.

html:

<form enctype="multipart/form-data" method="post" name="uploadform" action = "">                    
  <div class="input-append">
    <input type="text" id = "appendedInputButtons" class="span2" name="fileuploadtext"><input type="button" id="upbutton" class="btn" value="Select"><input type="submit" name="upload" value="uploaden" class="btn">
  </div>
  **<div class="fileHiddenInput"><input id="upfile" type="file" name="file" value="upload" /></div>**
</form>

css:

/** file input **/
.fileHiddenInput {
    height: 0px;
    width: 0px; 
    overflow:hidden;
}

I'll use some jquery to send the form, i could place that code also here. But after many trial and error, i'll found out that IE9 won't send the file-input as long if keep hiding the file-input with css using the fileHiddenInput div. When make i'll make the file-input visible by removing the fileHiddenInput div or making it visible using css, then the form just get send as it should do.

Does anyone know or does anyone has found a workaround?

Esocoder
  • 1,032
  • 1
  • 19
  • 40

2 Answers2

2

A few strategy of hiding you may try, one is by putting the element off the screena by setting style like

position: absolute; z-index: 19999; top: -1000px; left: -1000px;

Another way would be covering the file input element with an opaque control.

Tianzhen Lin
  • 2,404
  • 1
  • 19
  • 19
  • The css you give doesn't seem to do the trick... I'll also tried other ways to hide it, like using jquery. But it seems IE9 won't want anyone to hide the file-input... Btw, What exactly do you mean with opaque control? – Esocoder Jul 10 '12 at 15:07
  • By saying opaque control I mean a layer with no transparent background. I have a feeling that IE9 may have strict enforcement to ensure user knows what files are uploaded. – Tianzhen Lin Jul 10 '12 at 15:14
  • 1
    As an alternative, have you considered using SWFUpload which would achieve what you need without the hassle of hacking. – Tianzhen Lin Jul 10 '12 at 15:15
  • 1
    I just wen't through a bunch of techniques to hide the file input(http://stackoverflow.com/questions/793014/jquery-trigger-file-input) but none seem to work. Guess IE just wants to prevent anyway to do it... Guess then there is no other option left then using SWFupload. Thanks for your for your time and help, i really do appreciate it ;) – Esocoder Jul 10 '12 at 15:31
0

Opacity 0 for element caused it to count as hidden.

Hopefully this could help someone - I was having a problem getting file_field.set to work with IE and selenium/watir. The problem was that the (:input => "upload") was under an anchor tag. When looking at it through the inspector we saw that the opacity of the file_field underneath was set to 0.. which was causing an Element not visible error.

Setting the opacity to > 0 (0.01 worked in our case) allowed the web driver to interact with it and spawn the upload window and set the file path.

This was testing on Win7 with IE11

Jordan
  • 1