CODEWITHSUNDEEP
angularmobilecamera
Erez Shlomo
Erez Shlomo

Reputation: 2272

Angular 2-12 Mobile Camera Capture

I'm looking for a way to use the mobile camera to capture a photo and upload it to a server in Angular 2+. Is it possible to do it?

I can find a lot of uploading files tutorials but not even one which tutoring how to access the mobile camera and use the captured photo.

Upvotes: 13

Views: 20836

Answers (1)

Erez Shlomo
Erez Shlomo

Reputation: 2272

OK, so I finally got what I need. In the .html file:

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput" (change)="onFileSelected($event)">
<button type="button" (click)="onUpload()">Upload File</button>

in the .ts file:

export class AppComponent {
  title = 'app';
  selectedFile = null;

  onFileSelected(event)
  {
    this.selectedFile = event.target.files[0];
  }

  onUpload()
  {
    console.log(this.selectedFile); // You can use FormData upload to backend server
  }
}

Use "selectedFile" variable to whatever you need to do with your photo.

Note: It only works on iOS6+, I have checked on android and it works well.

Upvotes: 17

Related Questions