0

I have an input field generated by Cloudinary that looks like this. I shortened it, but it generated a fairly generic looking drop zone and "Browse" button inside. I don't need the dropzone - ideally I could just abstract all of this away to an HTML button - where the button on click does will prompt using the input field.

<input id="id_picture" class="cloudinary-fileupload " type="file" name="file">

Is it possible to override the above input field with a button? Can I just simply style the file input field to look like a button rather than a dropzone + "Browse" button?

Sorry if this doesn't make any sense - I'm normally a back end coder. Please let me know if you need any more information. Thanks!

Joker
  • 2,119
  • 4
  • 27
  • 38
  • It is not possible to *override* it, however you can create a button and put the file input on top with a very small opacity like `.01` or make it `visibility: hidden`, that way the users will see the button but will click the file input. – SeinopSys Aug 09 '13 at 00:18
  • This question has been asked and answered several times: http://stackoverflow.com/questions/108149/what-is-the-best-way-to-replace-the-file-browse-button-in-html/108157#108157 – 3dgoo Aug 09 '13 at 00:19
  • And here: http://stackoverflow.com/questions/3226167/how-to-style-input-file-with-css3-javascript – 3dgoo Aug 09 '13 at 00:20
  • And here: http://stackoverflow.com/questions/4909228/style-input-type-file/4909242 – 3dgoo Aug 09 '13 at 00:21
  • See https://github.com/cloudinary/cloudinary_gem/blob/master/samples/photo_album/app/views/photos/new_direct.html.erb – Tal Lev-Ami Aug 11 '13 at 09:22

1 Answers1

1

You can't really re-style a file input, but you can trigger a click on it from another control.

Quick and dirty example:

<button onclick="document.getElementById('id_picture').click();">File Upload</button>

You can then position the real file input offscreen using css (unfortunately display:none will prevent the click from firing).

SimonR
  • 1,248
  • 9
  • 10