ion-input cannot be set to type="file"

[rtpHarry]

Bug Report

Ionic version:

[x] 4.x

Current behavior:
The ion-input component makes multiple references in the documentation to provisions for when type="file".

The type parameter is bound to the interface TextFieldTypes.

The TextFieldTypes interface doesn't include file:

export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time';

This means that its impossible to set the input to a file and access the file-related features such as multiple or accept.

Other information:

Based on a discussion on StackOverflow.

[liamdebeasi]

Thanks for the issue! This appears to be a mistake in our documentation. In particular, the accept and multiple prop descriptions make references to the file type.

[rtpHarry]

I just went to clean up the docs but this is more complicated than I know the process for.

If it is really only a documentation issue then there is an issue that the accept attribute has been implemented in the code, and while it is currently unusable, it is passed through to the underlying input.

As it may exist in people's projects, it needs to be deprecated gracefully.

It is currently mentioned in two properties:

accept:

If the value of the type attribute is "file", then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.

multiple:

If true, the user can enter more than one value. This attribute applies when the type attribute is set to "email" or "file", otherwise it is ignored.

[eduardoroliveira]

The typescript complains about that as:

Type '"file"' is not assignable to type '"number" | "time" | "text" | "tel" | "url" | "email" | "search" | "date" | "password" | undefined'.ts(2322)

[jamesthomsondev]

Also experiencing this and it's very unclear as to whether the IonInput component supports file types or not. Based on the documentation it implies it does, however based on the Typescript error it implies it is not supported.

Can anyone shed some light on this?

[rtpHarry]

The bottom line is no.

Parts of it are implemented but its blocked by the fact that you cant set the type to file.

[FelixODev]

I think it would be nice to have. I've been using a work around to get the file data.

Would the ionic team prefer we use plugins for this or could we expect file to be added to the TextFieldTypes in the future?

[JEricaM]

There are any news about this problem?

[joaoeudes7]

Any news of when an update comes out in this regard? It is a native property of the input, we need it

[joaoeudes7]

Alternative: Use native input html with IonButton or custom style

<IonButton fill="outline" slot="end" style={{ marginTop: '18px' }}>
    <IonIcon icon={videocam} slot="start"></IonIcon>
    <input id="file" hidden type="file" accept="video/*" onChange={e => onUploadVideo(e.target.files)} />
    <label htmlFor="file">Selecionar arquivo*</label>
</IonButton>

[JEricaM]

Any news? At least update the doc that mention "file" confusing the user. It should be removed.
https://ionicframework.com/docs/api/input

accept

If the value of the type attribute is "file", then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.

[charkour]

@JEricaM, I agree. The fact that the docs reference type="file" asserts that <IonInput type="file" /> should be possible.

[jcesarmobile]

I've tested on Angular and <ion-input type="file" ></ion-input> works, but on react <IonInput type="file" /> doesn't work. I think it's a bug in @ionic/react, so I've created an issue on ionic-framework repository.

The docs are correct since it works on angular, if it's not supported on other frameworks maybe it should include a note about it.

[liamdebeasi]

Hi everyone,

I wanted to provide an update on this. There are a few issues noted here, so I will provide updates one by one.

---

1. It is not possible to set type="file" on IonInput in Ionic React.

The 'file' value has never been an accepted type in ion-input. According to the ion-input docs, the accepted types are "date" ｜ "datetime-local" ｜ "email" ｜ "month" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "time" ｜ "url" ｜ "week".

ion-input is designed to be very close to the native <input> element, but it is not a 1-for-1 replacement. As stated in the docs, ion-input was designed for text inputs only. Using it for non-text inputs such as a file input leads to a broken UI.

As Julio mentioned in #814 (comment), he was able to set type="file" on ion-input in Ionic Angular. Julio did not have strict checking enabled in his app, so the compiler never warned him that 'file' was not a valid type. Ionic React is a bit stricter by default, so that is why the error appears there.

We recommend using the native <input> element if you want an easy to use file form control.

---

2. The multiple property description references the 'file' value.

This was a mistake on our end and has been corrected in ionic-team/ionic-framework#25501. These changes should be available in the next release of Ionic.

---

3. The accept property exists on ion-input and only works for 'file' input types.

This was a mistake on our end during the early days of Ionic v4 development. The property should not have been added. It has been deprecated in ionic-team/ionic-framework#25501 and will be removed in an upcoming major release of Ionic. These changes should be available in the next release of Ionic.

---

As mentioned before, using the <input type="file"> element will give you an easy to use, mobile optimized file form control. We recommend using that instead of modifying ion-input.

I understand this may not be the resolution some were looking for, but hopefully this provides clarification around our intended usage of ion-input. Thank you!