How to style Ionic input type file as a Button

Question

I want to style a ionic file chooser button.

<input type="file" id="myFileInput">

But Ionic don't have an Input type file button. So how can I get a better looking button than the standard Button with a Choose a File text ?

Lomax

What type of file are you wanting to upload into your app? Is is a photo/video, text file or something else? – Hallucinatory

Answer 1

If you want only style the <input> element as a button, for example, you can adopt one of the suggested style of this post: http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Or another example from CSS-tricks: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

or this one: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Keep in mind that in a mobile device it may not work and you may need a cordova plugin. For example: https://github.com/apache/cordova-plugin-file

Phytography

Thanks work's for me. I styled the input button as none and set an button with an icon. Thanks! – Nightclub

Answer 2

Zerzeri's answer is good but not complete here's my implementation for the above

         <ion-item>
            <ion-button expand="full" (click)="f.click()">
              <ion-icon lazy="true" slot="start" name="image"></ion-icon>
              <ion-label slot="end">Profile pic</ion-label>
            </ion-button>
              <input class="ion-hide" #f type="file" (change)="loadImageFromDevice($event)" id="file-input"
                accept="image/png, image/jpeg">

         </ion-item>

In your TS:

handleFileInput(event) {
    console.log(event);
    this.userDetails.profilePic = event.target.files[0];
  }

Heir

Answer 3

The best way I found to do it is use a label with the for attribute and customized it using css. Keep in mind that the for label must be the input id. So when the user makes click on the label the input is triggered.

<label class="myFakeUploadButton" for="myFileInput">Upload</label>
<input type="file" id="myFileInput">

#myFileInput{
  position: absolute;
  opacity: 0;
}

.myFakeUploadButton{
 /* Whatever you want */
}

If fact if you wish you can use a icon like this:

<input type="file" accept="image/*" capture="camera" (change)="onFileSelected($event)" id="fileInput"/>
<label for="fileInput" icon-only ion-button>
    <ion-icon name="camera"></ion-icon>
</label>

Pollock

Answer 4

what about this kind of solution (it worked for me):

 <ion-button (click)="f.click">Upload</ion-button

.inputFile {
   width: 0;
   height: 0;
 }

& style your button as you like, if you click on the ion-button you will actually click on the input file

Pulvinate

Great trick! Thanks to this i managed to solve the same problem you had. This is the best answer to the question, because in this way the CSS problem is solved with a trick, otherwise to style a label that looks good in all devices is a more complex task. Great! – Nanon