Need help with uploading image files to server path with Ionic 4 and Capacitor

@Luzaan wrote:

Good Day,
I am fairly new to mobile development in general and need some help, please.
The aim is to take a photo with an Ionic / Capacitor app and save it on a PHP server at a specific location.

There are so many Cordova tutorials and still little Capacitor posts and the Capacitor posts I could find just made me more confused…

What I have managed so far is to build the part where you can take a photo, it is the rest I have a problem with.

I have tried multiple different options including converting it to base64… but every time posting it to the server I ran into problems.

The server I use for testing is a basic localhost wampp setup.

The code I have so far:
tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Capture
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <img [src]="photo" >
    <ion-fab vertical="bottom" horizontal="center" slot="fixed">
        <ion-fab-button (click)="takePhoto()">
          <ion-icon name="camera"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    
</ion-content>

then tab1.page.ts

import { Component } from '@angular/core';
import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
})

export class Tab1Page {
  photo: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer, private http: HttpClient) {}

  async takePhoto() {
    const image = await Plugins.Camera.getPhoto({
      quality: 75,
      allowEditing: true,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera,
    });

    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
  }
}

I have completely removed my junk code to try and put it on server location… it was a mess…

I do however get the Base64 string for the image:

SafeValue must use [property]=binding: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAI.......... 

and a lot more when I look at this.photo

How do I pass this to the localhost PHP server for saving the file?

Can anyone please assist me in achieving the end result?

Thank you in advance!

Posts: 1

Participants: 1

Read full topic