Input Type File Ionic

Ionic Framework ionic-v3
1

Hey !

I just wanted to know if an input type file will be available in Ionic version 2 ?
I mean a beautiful one… :slightly_smiling:

Thanks by advance for your answer !

1 Like
2

Nothing on the roadmap ATM, but you could make a feature request for this.
As it’s a file input, it’s an interesting component, since it would require some native functionality as well.

3

Then please, how do we upload files to a remote server in ionic v2 in d meantime!! I haven’t been able to get any tutorial!!
Thanks!

4 
<input type="file"

you need to style it to hide the ugly native button and layer a pretty one on top (hack)

5

Pls I will appreciate if u can direct me to an ionic v2 file upload tutorial!!!
Thanks!!!

6

any update? when i use <input type="file" the file input is not there (not rendered), thanks

7

Same Problem herw file input is not rendered. Are you also using ion-item around like us? The problem is now a issue: https://github.com/driftyco/ionic/issues/6643

8

We created a possible solution, we want to share: http://pjsdev.blogspot.de/2016/05/ionic-2-beta-6-angular-2-styled-upload.html

2 Likes
9

In my app, I’m using a plugin to open the camera or the stored files folder

then I convert the file to base64 and send it via ajax to my backend API.

1 Like
10

I’d opened a issue on github to a feature request. You can collaborate with us creating the File Input Component, https://github.com/driftyco/ionic/issues/6628

1 Like
11

Just use this: https://gist.github.com/MatiMenich/ac87ee097706bf61b831

12

Hello All, I have a different issue ?
When i use <input type=“file” in my project, it works fine but after selecting file, it show reverse file type icon,
Please suggest me if any one have some solutions

1 Like
13

This works for me


<ion-item>
        <label class="item item-input"> <input type="file" id="upimgfile" name="uploadfile" ng-model="orderDetails.uploadfile">
        </label>
        <div class="preview-img"> <img id="myImage" width="150" height="150"  size="30" /> </div>
      </ion-item>
14

Great, Just setting sourceType to PHOTOLIBRARY : 0

15

Thanks a lot, it works for me !