Feature send pdf done and verification added to mobile pdf preview

This commit is contained in:
Eudes Inácio
2022-04-05 13:22:17 +01:00
parent 3fe1d8fdd4
commit 8f2ea2a0c2
74 changed files with 377 additions and 1547 deletions
@@ -36,6 +36,8 @@ import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, Cur
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { DomSanitizer } from '@angular/platform-browser';
import { MessageService } from 'src/app/services/chat/message.service';
import { File } from '@awesome-cordova-plugins/file/ngx';
import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
@Component({
selector: 'app-group-messages',
@@ -80,8 +82,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
allowTyping = true;
storedFileNames = [];
lastAudioRecorded = '';
audioRecorded:any = "";
audioDownloaded:any = "";
audioRecorded: any = "";
audioDownloaded: any = "";
durationDisplay = '';
duration = 0;
showAvatar = true;
@@ -111,6 +113,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
private processesService: ProcessesService,
private CameraService: CameraService,
private sanitiser: DomSanitizer,
private file: File,
private fileOpener: FileOpener,
) {
this.loggedUserChat = authService.ValidatedUserChat['data'];
this.isGroupCreated = true;
@@ -224,7 +228,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
}, 1000)
}
async getFile(fileName?:any){
async getFile(fileName?: any) {
const audioFile = await Filesystem.readFile({
path: fileName,
directory: Directory.Data
@@ -254,14 +258,14 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
try {
this.storage.get('recordData').then((recordData) => {
console.log(recordData);
if(recordData?.value?.recordDataBase64.includes('data:audio')){
if (recordData?.value?.recordDataBase64.includes('data:audio')) {
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(recordData?.value?.recordDataBase64);
}
else{
else {
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(`data:${recordData.value.mimeType};base64,${recordData?.value?.recordDataBase64}`);
}
});
} catch (error) {}
} catch (error) { }
}
@@ -275,7 +279,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
this.recording = false;
VoiceRecorder.stopRecording().then(async (result: RecordingData) => {
console.log('==================================',result);
console.log('==================================', result);
this.recording = false;
if (result.value && result.value.recordDataBase64) {
@@ -283,8 +287,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
//console.log(recordData);
const fileName = new Date().getTime() + ".mp3";
//Save file
await this.storage.set('fileName',fileName)
this.storage.set('recordData',result).then(() => {
await this.storage.set('fileName', fileName)
this.storage.set('recordData', result).then(() => {
console.log('Audio recorded saved', result);
setTimeout(async () => {
@@ -309,7 +313,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
async deleteRecording(){
async deleteRecording() {
this.storage.remove('fileName');
this.storage.remove('recordData');
@@ -444,17 +448,17 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}
}
async sendAudio(fileName) {
@@ -463,35 +467,35 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.storage.get('recordData').then((recordData) => {
console.log(recordData);
audioFile = recordData;
if(recordData?.value?.recordDataBase64.includes('data:audio')){
if (recordData?.value?.recordDataBase64.includes('data:audio')) {
this.audioRecorded = recordData?.value?.recordDataBase64;
}
else{
else {
this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData?.value?.recordDataBase64}`;
}
//Converting base64 to blob
const encodedData = btoa(this.audioRecorded);
const blob = this.base64toBlob(encodedData, recordData.value.mimeType)
console.log(blob)
const formData = new FormData();
formData.append("blobFile", blob);
//Converting base64 to blob
const encodedData = btoa(this.audioRecorded);
const blob = this.base64toBlob(encodedData, recordData.value.mimeType)
console.log(blob)
const formData = new FormData();
formData.append("blobFile", blob);
this.wsChatMethodsService.getGroupRoom(roomId).send({
file: {
"type": "application/audio",
"msDuration":audioFile.value.msDuration,
"mimeType":audioFile.value.mimeType,
},
attachments: [{
"title": fileName ,
"title_link_download": true,
"type": "audio"
}],
temporaryData: formData
})
this.wsChatMethodsService.getGroupRoom(roomId).send({
file: {
"type": "application/audio",
"msDuration": audioFile.value.msDuration,
"mimeType": audioFile.value.mimeType,
},
attachments: [{
"title": fileName,
"title_link_download": true,
"type": "audio"
}],
temporaryData: formData
})
});
});
this.deleteRecording();
}
@@ -692,37 +696,60 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
async addFileToChat(types: typeof FileType[] ) {
async addFileToChat(types: typeof FileType[]) {
const roomId = this.roomId
const file: any = await this.fileService.getFileFromDevice(types);
console.log('Add file', file)
/* const imageData = await this.fileToBase64Service.convert(file).then((filee) => {
console.log('Add file', filee)
}) */
const response = await fetch(file);
const blob = await response.blob();
console.log('Add file', blob)
const formData = new FormData();
formData.append("blobFile", blob);
console.log('Add file', JSON.stringify(await this.getBase64(file)))
this.wsChatMethodsService.getGroupRoom(roomId).send({
file: {
"type": file.type,
"guid": '',
},
attachments: [{
"title": file.name ,
"name": file.name ,
// "text": "description",
//"image_url": file.base64String, // rocketchat
"title_link_download": false,
}],
temporaryData: formData
})
if (file.type == "application/pdf") {
const encodedData = btoa(JSON.stringify(await this.getBase64(file)));
const blob = this.base64toBlob(encodedData, 'application/pdf')
console.log('Add Blob file', blob)
const formData = new FormData();
formData.append('blobFile', blob);
console.log(formData)
this.wsChatMethodsService.getGroupRoom(roomId).send({
file: {
"type": file.type,
"guid": '',
},
attachments: [{
"title": file.name,
"name": file.name,
// "text": "description",
"title_link_download": false,
}],
temporaryData: formData
});
} else {
console.log('File type invalid')
}
}
getFileReader(): FileReader {
const fileReader = new FileReader();
const zoneOriginalInstance = (fileReader as any)["__zone_symbol__originalInstance"];
return zoneOriginalInstance || fileReader;
}
getBase64(file) {
var reader = this.getFileReader();
reader.readAsDataURL(file);
return new Promise(resolve => {
reader.onload = function () {
resolve(reader.result)
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
});
}
@@ -980,27 +1007,86 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
card.el.style['z-index'] = 11;
}
b64toBlob(b64Data, contentType) {
contentType = contentType || '';
var sliceSize = 512;
b64Data = b64Data.replace(/^[^,]+,/, '');
b64Data = b64Data.replace(/\s/g, '');
var byteCharacters = window.atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, { type: contentType });
return blob;
}
openFile(pdfString, filename) {
const blob = this.b64toBlob(pdfString, 'application/pdf')
let pathFile = ''
const fileName = filename
const contentFile = blob
if (this.platform.is('ios')) {
pathFile = this.file.documentsDirectory
} else {
pathFile = this.file.externalRootDirectory
}
console.log(pdfString)
console.log(pathFile)
console.log(contentFile)
this.file
.writeFile(pathFile, fileName, contentFile, { replace: true })
.then(success => {
this.fileOpener
.open(pathFile + fileName, 'application/pdf')
.then(() => console.log('File is opened'))
.catch(e => console.log('Error opening file', e));
})
.catch(e => console.log('Error writing file', e))
}
downloadFileMsg(msg: MessageService) {
msg.downloadFileMsg()
}
async openPreview(msg: MessageService) {
if (!msg.attachments[0].image_url ||msg.attachments[0].image_url === null || msg.attachments[0].image_url === '') {
if (!msg.attachments[0].image_url || msg.attachments[0].image_url === null || msg.attachments[0].image_url === '') {
this.downloadFileMsg(msg)
} else {
const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: msg.attachments[0].image_url,
type: msg.file.type,
username: msg.u.name,
_updatedAt: msg._updatedAt
}
});
modal.present();
var str = msg.attachments[0].image_url;
str = str.substring(1, ((str.length) - 1));
if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: str,
type: msg.file.type,
username: msg.u.name,
_updatedAt: msg._updatedAt
}
});
modal.present();
} else {
this.openFile(str, msg.attachments[0].name);
}
}
}
@@ -1009,7 +1095,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
console.log(msg);
if (!msg.attachments[0].title_link || msg.attachments[0].title_link === null || msg.attachments[0].title_link === '') {
this.downloadFileMsg(msg)
} else {}
} else { }
}
}
+60 -148
View File
@@ -46,6 +46,7 @@ import { DomSanitizer } from '@angular/platform-browser';
import { StringDecoder } from 'string_decoder';
import { File } from '@awesome-cordova-plugins/file/ngx';
import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
import { DocumentViewer } from '@awesome-cordova-plugins/document-viewer/ngx';
const IMAGE_DIR = 'stored-images';
@@ -137,6 +138,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
private file: File,
private fileOpener: FileOpener,
private sanitiser: DomSanitizer,
private document: DocumentViewer
) {
this.loggedUser = authService.ValidatedUserChat['data'];
this.roomId = this.navParams.get('roomId');
@@ -772,82 +774,38 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
async addFileToChat(types: typeof FileType[]) {
/* this.multipleDocumentsPicker.pick(2)
.then(async (res: any) => {
this.files = JSON.parse(res)
console.log('1 Add file', this.files[0].uri)
console.log('1 Add file', JSON.stringify(this.files[0].uri))
const downloadPath = (
this.platform.is('android')
) ? this.file.externalDataDirectory : this.file.documentsDirectory;
this.file.writeFile(downloadPath, 'YHaaa2.pdf', 'Eudes Inácio').then((fil)=> {
console.log('write file', fil)
})
this.fileToBase64('GS_FOLHETO_AUTOMOVEL_AC.pdf',this.files[0].uri).then(
(data) => console.log(data)
);
const blob = new Blob([res])
console.log('Add Blob file', blob)
const formData = new FormData();
formData.append("blobFile", blob);
console.log(formData)
this.wsChatMethodsService.getDmRoom(this.roomId).send({
file: {
"type": 'application/pdf',
"guid": '',
},
attachments: [{
"title": 'pdf1',
"name": 'pdf1',
// "text": "description",
"title_link_download": false,
}],
temporaryData: formData
})
})
.catch((error: any) => console.error(error)); */
const roomId = this.roomId
const file: any = await this.fileService.getFileFromDevice(types);
console.log('Add file', JSON.stringify(await this.getBase64(file)))
const encodedData = btoa(JSON.stringify(await this.getBase64(file)));
const blob = this.base64toBlob(encodedData, 'application/pdf')
console.log('Add Blob file', blob)
//console.log('Add Blob file', await this.blobToBase64(blob))
//console.log('Add Blob file', await this.fileToByteArray(file))
if (file.type == "application/pdf") {
const encodedData = btoa(JSON.stringify(await this.getBase64(file)));
const blob = this.base64toBlob(encodedData, 'application/pdf')
console.log('Add Blob file', blob)
const formData = new FormData();
formData.append('blobFile', blob);
console.log(formData)
const formData = new FormData();
formData.append('blobFile', blob);
console.log(formData)
this.wsChatMethodsService.getDmRoom(roomId).send({
file: {
"type": file.type,
"guid": '',
},
attachments: [{
"title": file.name,
"name": file.name,
// "text": "description",
"title_link_download": false,
}],
temporaryData: formData
});
this.wsChatMethodsService.getDmRoom(roomId).send({
file: {
"type": file.type,
"guid": '',
},
attachments: [{
"title": file.name,
"name": file.name,
// "text": "description",
"title_link_download": false,
}],
temporaryData: formData
});
} else {
console.log('File type invalid')
}
@@ -867,34 +825,6 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
fileToByteArray(file) {
return new Promise((resolve, reject) => {
try {
let reader = this.getFileReader();
//var file = new File([filepath], filename);
reader.readAsBinaryString(file);
reader.onloadend = (evt) => {
console.log(evt.target.result)
resolve(evt.target.result); // Convert data to base64
reader.readAsDataURL(file);
}
}
catch (e) {
reject(e);
}
})
}
blobToBase64 = blob => {
const reader = this.getFileReader();
reader.readAsDataURL(blob);
return new Promise(resolve => {
reader.onloadend = () => {
resolve(reader.result);
};
});
};
async openChatOptions(ev?: any) {
const roomId = this.roomId
console.log('MOBILE CHAT OPTION', this.members);
@@ -1016,82 +946,47 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
downloadFileMsg(msg: MessageService) {
console.log('FILE TYPE', msg.file.type)
this.downloadFile = "";
//if (msg.file.type == "application/img") {
this.AttachmentsService.downloadFile(msg.file.guid).subscribe(async (event) => {
console.log('FILE TYPE 22', msg.file.guid)
var name = msg.file.guid;
if (event.type === HttpEventType.DownloadProgress) {
this.downloadProgess = Math.round((100 * event.loaded) / event.total);
console.log(this.downloadProgess)
console.log('FILE TYPE 33', msg.file.type)
} else if (event.type === HttpEventType.Response) {
if (msg.file.type == "application/img") {
this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
} else if (msg.file.type == "application/pdf") {
//console.log('TRY THIS LIBRARY ',fromByteArray(event.body));
this.downloadFile = new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), '');
//this.downloadFile = event.body
console.log(this.downloadFile)
}
msg.attachments[0] = {
image_url: this.downloadFile,
name: msg.attachments[0].name,
title: msg.attachments[0].title,
title_link_download: msg.attachments[0].title_link_download,
ts: msg.attachments[0].ts
}
this.sqlservice.updateChatMsg(msg._id, this.downloadFile);
}
});
//}
msg.downloadFileMsg();
}
_arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
b64toBlob(b64Data, contentType, sliceSize) {
b64toBlob(b64Data, contentType) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
const encodedData = btoa(b64Data);
var byteCharacters = atob(encodedData);
var sliceSize = 512;
b64Data = b64Data.replace(/^[^,]+,/, '');
b64Data = b64Data.replace(/\s/g, '');
var byteCharacters = window.atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, { type: contentType });
return blob;
}
getUserDataSheet(pdfString) {
const blob = this.b64toBlob(pdfString, 'application/pdf', 512)
openFile(pdfString, filename) {
const blob = this.b64toBlob(pdfString, 'application/pdf')
let pathFile = ''
const fileName = 'myPdf.pdf'
const fileName = filename
const contentFile = blob
if (this.platform.is('ios')) {
pathFile = this.file.documentsDirectory
} else {
pathFile = this.file.externalRootDirectory
}
console.log(pdfString)
console.log(pathFile)
console.log(contentFile)
this.file
.writeFile(pathFile, fileName, contentFile, { replace: true })
.then(success => {
@@ -1115,7 +1010,24 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
var str = msg.attachments[0].image_url;
str = str.substring(1, ((str.length) - 1));
this.getUserDataSheet(str);
if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: str,
type: msg.file.type,
username: msg.u.name,
_updatedAt: msg._updatedAt
}
});
modal.present();
} else {
this.openFile(str, msg.attachments[0].name);
}
}
}