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

Improve this question
6
  • 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 stackoverflow.com/questions/17293861/… Commented Mar 29, 2019 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. Commented Mar 29, 2019 at 11:46
  • Use FileChooser plugin for android and IOSFilePicker plugin for ios instead of <input type="file" Commented Mar 29, 2019 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. Commented Mar 29, 2019 at 12:26
  • @briosheje do you happen to have a link to the doc that you read this in? Commented Mar 29, 2019 at 12:34
Related questions
1
How to submit an image without a file input form element?
14
Uploading files in Ionic application using Web API
62
File upload from <input type="file">
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.