3

I am using ionic to build a mobile app that incorporates a file upload.

Versions

  • ionic (Ionic CLI) : 4.10.3
  • Ionic Framework : ionic-angular 3.9.3
  • @ionic/app-scripts : 3.2.3

The files supported are

  • images
  • word documents (.doc, .docx)
  • pdf

I am trying to use a HTML input tag with the attribute of type="file"

<input style="display:none;" type="file" accept="image/*, .pdf, .doc, .docx" (change)="fileSelected($event)" #chosenFile />
<button class="btnAttach" (click)="chosenFile.click()"><ion-icon class="attach" name="attach"></ion-icon></button>

This is working perfectly for images on android and ios but it does not allow me to select pdf or word documents. I can see them but they are greyed out.

Any help here would be appreciated.

Example of PDF not available for selection

Smithy
  • 771
  • 10
  • 29
  • 1
    replace: `accept="image/*, .pdf, .doc, .docx"` with `accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"`. From the docs: _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._ . You need to provide the mime type, not the extension https://stackoverflow.com/questions/17293861/how-to-make-input-type-file-accept-only-these-types – briosheje Mar 29 '19 at 11:21
  • 1
    @briosheje Thanks for your response. Unfortunately, this gives the same result. The PDF is visible but it is greyed out and cant be selected. – Smithy Mar 29 '19 at 11:46
  • Use **FileChooser** plugin for android and **IOSFilePicker** plugin for ios instead of ` – Mithun Sen Mar 29 '19 at 12:16
  • @Smithy I think this should work, if it doesn't, I Suggest you to **open an issue** on ionic, it should work with content-type, since it's mentioned in their official docs. – briosheje Mar 29 '19 at 12:26
  • @briosheje do you happen to have a link to the doc that you read this in? – Smithy Mar 29 '19 at 12:34
  • @Smithy of course, here: https://ionicframework.com/docs/api/input#properties --> _The value must be a comma-separated list of unique content type specifiers._ – briosheje Mar 29 '19 at 12:51

0 Answers0