5

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?

Zagonine
  • 2,213
  • 3
  • 22
  • 29
Alex
  • 711
  • 6
  • 12
  • This sounds like it's by design for security reasons. I'm actually very surprised it works in IE and FF. – Pekka May 11 '11 at 10:58
  • Flash is the normal way to do this - will of course not work on iPad – mplungjan May 11 '11 at 11:21
  • never mind i found the solution in this one: http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e (Romas answer) – Alex May 11 '11 at 12:02

1 Answers1

16

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

Community
  • 1
  • 1
sanbor
  • 1,264
  • 15
  • 20