(angular 4/5/6/7/8) html file input for images does not seem to work on certain mobile devices

Question

I'm doing a chat platform using angular and part of my code involves capturing the image using file input. I've tested on my p30 android phone and it works - the image shows on the chat platform successfully.

However, on devices like iphone or google pixel, the user would be able to browse files or capture using the camera function - but the images doesn't show up on the chat platform. I've tried researching and found these articles, unfortunately I still can't find the reason why the images doesn't show up

Links: https://medium.com/hootsuite-engineering/mobile-photo-uploads-with-html5-f7ea174ef128 HTML file input control with capture and accept attributes works wrong?

my file input code:

fileInput.components.html

  <label for="fileInputPhoto">
    <i class="chatbox-camera-btn fa fa-camera" aria-hidden="true"></i>
  </label>
  <input
    #fileInputPhoto
    capture
    id="fileInputPhoto"
    type="file"
    (change)="onSelectFile($event)"
    accept="image/*"
  />

  <!-- File attachment -->
  <label for="fileInput">
    <i class="chatbox-file-btn fa fa-paperclip" aria-hidden="true"></i>
  </label>
  <input
    #fileInput
    id="fileInput"
    type="file"
    (change)="onSelectFile($event)"
    accept="image/*, video/*, audio/*, text/plain, .pdf, .docx, .doc, .xls, .xlsx"
  />

fileInput.component.ts

this.cs.createChatImage(this.chatId, event.path[0].files[0])
   .subscribe(() => {
      this.scrollToLatest();
      this.fileInput.nativeElement.value = '';
     this.fileInputPhoto.nativeElement.value = '';
});

Appreciate your enlightenment!