ionic upload file / capacitor / file path / readasArrayBuffer - ionic-framework

Question

HELP :Ionic /i'm trying to upload files to firebase but i can't read the content of the file help enter image description here

Answer 1

import { Component } from '#angular/core';
import { File} from '#ionic-native/file/ngx';
import { FileChooser } from '#ionic-native/file-chooser/ngx';
import { FilePath } from '#ionic-native/file-path/ngx';
import { FireBaseService } from 'src/app/services/firebase-service.service';
import { Plugins, FilesystemDirectory, FilesystemEncoding } from '#capacitor/core';
const { Filesystem } = Plugins;
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
fileforSending ;
fileUri :string;
filePath :string;
fileName :string;
fileType :string;
entry;
constructor(
private fireService:FireBaseService,
private fileChooser:FileChooser,
private file :File,
private pathConverter :FilePath) {
}
choose(){
this.fileChooser.open()
.then(uri => {
//getting URI of a choosen file
this.fileUri = uri;
return this.file.resolveLocalFilesystemUrl(this.fileUri);
}).then(fileEntry => {
this.entry = fileEntry;
this.entry.file((arg) => {
//getting mime type of a file
this.fileType = arg.type;
})
}).then(() => {
return this.pathConverter.resolveNativePath(this.fileUri)
}).then((filePath) => {
//converting file URI to normal file PATH & file NAME
this.filePath = filePath.substring(0, filePath.lastIndexOf('/'));
this.fileName = filePath.substring(filePath.lastIndexOf('/'), filePath.length).replace("/", "");
}).then(async () => {
try {
const buffer = await this.file.readAsArrayBuffer(this.filePath, this.fileName);
await this.fireService.uploadFileToStorage(buffer, this.fileType, this.fileName);
} catch (error) {
alert(`Buffering failed ${JSON.stringify(error)}`)
} finally {
alert('finally');
}
}).catch(err => {console.log('error: ', err) });
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
--------------------------firebase service-----------------------
import { Injectable } from '#angular/core';
import {AngularFireStorage} from "#angular/fire/storage";
#Injectable({
providedIn: 'root'
})
export class FireBaseService {
constructor(private af: AngularFireStorage){}
async uploadFileToStorage(file, type, name) {
const randomId = Math.random()
.toString(36)
.substring(2, 8);
let oMyBlob = new Blob([file], {type : type})
const uploadTask = this.af.upload(`files/${new Date().getTime()}_${randomId}_${name}`,oMyBlob);
console.log('upload task '+uploadTask)
uploadTask.then(async res => {
console.log('file upload finished!');
}).catch(err => {
console.log('file wasnt upload. Error: ' + err);
});
}
}
export { FireBaseService as ExportedClass };

Answer 2

import { Injectable } from '#angular/core';
import {AngularFireDatabase} from "#angular/fire/database";
import {AngularFireStorage} from "#angular/fire/storage";
#Injectable({
providedIn: 'root'
})
export class FireBaseService {
constructor(private af: AngularFireStorage){}
async uploadFileToStorage(file, type, name) {
const randomId = Math.random()
.toString(36)
.substring(2, 8);
let oMyBlob = new Blob([file], {type : type})
const uploadTask = this.af.upload(
`files/${new Date().getTime()}_${randomId}_${name}`,
oMyBlob
);
uploadTask.then(async res => {
console.log('file upload finished!');
}).catch(err => {
console.log('file wasnt upload. Error: ' + err);
});
}
}
export { FireBaseService as ExportedClass };