safari and fileupload form doesnt work

Question

I'm trying to add attachment upload for my typo3 extension, and since the normal file-input doesn't work with the design. I decided to add a text-input, to display the value, and a button-input, to fire up the file-inputs click event. This works FF and IE without any Problems, but when I try this on Safari the file-inputs click event doesn't work (others do!!!).

<form action=""  
      name="attachmentPostForm"
      method="post" 
      onSubmit="createAttachmentPostAction(${uid});"
      enctype="multipart/form-data" 
      target="attachementupload_target">
  <input type=file 
         name="leadimagefile" 
         accept="image/gif,image/jpeg" 
         onChange="document.getElementById('ImageFakeFile').value = this.value" 
         id=imageTrueFile style="display:none">
  <input type=text id=ImageFakeFile  readonly>
  <input type = button value="browse" onClick="document.getElementById('imageTrueFile').click()">
  <input type="submit" value="upload" />
</form> 

Is there another way to achieve the effect, or do i have to use the "normal" file-input on this case?

Answer 1

It's doesn't work because your input has style="display:none", change it to visibility: hidden and it will work. I also recommend to check https://stackoverflow.com/a/3030174/967358