file upload

This commit is contained in:
Peter Maquiran
2024-01-30 11:35:45 +01:00
parent cbb7657b90
commit 76b0046a22
8 changed files with 53 additions and 154 deletions
@@ -19,11 +19,8 @@
<div class="title-content width-100 d-flex justify-space-between">
<div class="div-title flex-grow-1">
<ion-label class="title font-25-em">Acções</ion-label>
<!-- <div>
<input type="file" (change)="onFileSelect($event)" />
</div> -->
</div>
<div *ngIf="!intent" class="div-icon">
<button *ngIf="p.userPermission([p.permissionList.Actions.create])" title="Adicionar nova ação presidencial" class="btn-no-color" (click)="AddPublicationFolder()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="icon-only" src='assets/images/icons-add.svg'></ion-icon>
@@ -35,7 +32,7 @@
</button>
</div>
<div *ngIf="intent" class="div-icon">
<button title="Atualizar" class="btn-no-color" (click)="close()">
<ion-icon class=" font-45-em" src="assets/images/icons-search-close.svg"></ion-icon>
</button>
@@ -82,7 +82,7 @@ export class PublicationsPage implements OnInit {
this.months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
this.days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
this.intent = window["sharedContent"]
}
ngOnInit() {
@@ -237,42 +237,6 @@ export class PublicationsPage implements OnInit {
async onFileSelect(event: any) {
const file:File = event.target.files[0];
const chunkSize = 1024 * 1024; // Adjust the chunk size as needed
const chunks = [];
let offset = 0;
let i = 0;
let j = 0;
function count () {
j++
return j
}
while (offset < file.size) {
const chunk = file.slice(offset, offset + chunkSize);
const reader = new FileReader();
reader.onload = async () => {
const headers = new HttpHeaders()
.append('X-File-Name', "fileName")
.append('X-File-Extension', "mp4")
.append('X-File-Content-Length', i.toString())
.append('X-File-Index', count().toString());
const a = new Uint8Array(reader.result as ArrayBuffer)
await this.http.post('http://localhost:3001/upload', a.buffer, { headers, responseType: 'blob' }).toPromise();
};
reader.readAsArrayBuffer(chunk);
offset += chunkSize;
i++;
}
}
-91
View File
@@ -12,97 +12,6 @@ export class StreamService {
window["StreamService"] = this
}
async uploadFile() {
const API_URL = 'http://localhost:3000/upload'; // Replace with your server URL
const filePath = 'path/to/large-file.zip'; // Replace with the path to your file
const fileName = 'my-file'; // Specify your desired filename
const fileExtension = 'zip'; // Specify the file extension
const headers = new HttpHeaders()
.append('X-File-Name', fileName)
.append('X-File-Extension', fileExtension);
const file = await this.readFileInChunks(filePath);
const chunkSize = 1024 * 1024; // 1 MB chunk size (adjust as needed)
for (let offset = 0; offset < file.length; offset += chunkSize) {
const chunk = file.slice(offset, offset + chunkSize);
// await this.uploadChunk(API_URL, chunk, headers);
}
console.log('Upload completed.');
}
async readFileInChunks(filePath: string): Promise<Uint8Array> {
const response = await fetch(filePath);
const reader = response.body.getReader();
const chunks: Uint8Array[] = [];
let done = false;
while (!done) {
const { value, done: isDone } = await reader.read();
if (!isDone) {
chunks.push(value);
}
done = isDone;
}
return new Uint8Array([].concat(...chunks.map((chunk) => Array.from(chunk))));
}
async uploadChunk(url: string, chunks: Uint8Array[], fileName, fileExtension): Promise<void> {
let i = 1
console.log('123', chunks.length)
for(const chunk of chunks) {
try {
console.log("iterate")
const headers = new HttpHeaders()
.append('X-File-Name', fileName)
.append('X-File-Extension', fileExtension)
.append('X-File-Content-Length', chunks.length.toString())
.append('X-File-Index', i.toString())
await this.http.post('http://localhost:3001/upload', chunk.buffer, { headers, responseType: 'blob' }).toPromise();
i++
} catch (error) {
console.error('Upload error:', error);
}
}
}
async uploadChunkNoLoop(url: string, chunk: Uint8Array, fileName, fileExtension, i, length): Promise<void> {
console.log("iterate")
const headers = new HttpHeaders()
.append('X-File-Name', fileName)
.append('X-File-Extension', fileExtension)
.append('X-File-Content-Length', length)
.append('X-File-Index', i.toString())
await this.http.post('http://localhost:3001/upload', chunk.buffer, { headers, responseType: 'blob' }).toPromise();
}
uploadChunk1(chunk: Blob, chunkNumber: number, totalChunks: number, filename: string) {
console.log(chunk)
const headers = new HttpHeaders()
.append('X-File-Name', filename)
.append('X-File-Content-Length', totalChunks.toString())
.append('X-File-Index', chunkNumber.toString())
return this.http.post('http://localhost:3001/upload-chunk', Blob, { headers, responseType: 'blob' });
}
}
// const text = 'Hello, World00120301010asdf1002sdf 0fsdfasf0001230 12300!\n';
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import { HttpServiceService } from 'src/app/services/http/http-service.service';
import { HttpClient, HttpEvent, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
@@ -13,6 +14,7 @@ export class CMAPIAPIService {
getVideoHeader(url: string) {
return this.http.head('http://localhost:3001/static/'+url, { observe: 'response' })
// return this.http.head('http://localhost:3001/static/'+url, { observe: 'response' })
return this.http.head(environment.apiURL+'ObjectServer/StreamFiles?path='+url, { observe: 'response' })
}
}
@@ -86,7 +86,7 @@
<source type="video/mp4" [src]="'data:video/mp4;base64,' +seleted.FileBase64">
</video>
<ion-icon *ngIf="seleted?.chucksManager?.manualRetry" src="assets/images/retry-svgrepo-com.svg" class="icon-download font-12"> </ion-icon>
</div>
@@ -127,7 +127,7 @@
</div>
</div>
</div>
<div *ngIf="photoOrVideo" class="container-multiselect pt-10" style="width: 200px;">
<button id="container-multiselect" class="multiselect-button" (click)="takePicture()">Fotografia</button>
<button id="container-multiselect" class="multiselect-button" (click)="startVideoRecording()">Video</button>
@@ -458,7 +458,8 @@ export class NewPublicationPage implements OnInit {
if(upload) {
this.publication.Files = this.publication.Files.map((e:PublicationAttachmentEntity)=> {
if(e.FileType == 'video') {
e.FileBase64 = environment.apiURL + "/ObjectServer/StreamFiles?path="+ e.chucksManager.path
e.OriginalFileName = e.chucksManager.path
e.FileExtension = "mp4"
}
return e
@@ -520,7 +521,8 @@ export class NewPublicationPage implements OnInit {
if(upload) {
this.publication.Files = this.publication.Files.map((e:PublicationAttachmentEntity)=> {
if(e.FileType == 'video') {
e.FileBase64 = environment.apiURL + "/ObjectServer/StreamFiles?path="+ e.chucksManager.path
e.OriginalFileName = e.chucksManager.path
e.FileExtension = "mp4"
}
return e
@@ -1076,6 +1078,7 @@ class UploadFileUseCase {
async execute(PublicationAttachmentEntity: PublicationAttachmentEntity): Promise<Result<PublicationAttachmentEntity, PublicationAttachmentEntity>> {
return new Promise(async (resolve, reject) => {
PublicationAttachmentEntity.chucksManager.clearManualRetry()
let path: string;
const length = PublicationAttachmentEntity.chucksManager.chunks.totalChunks.toString()
@@ -1086,7 +1089,7 @@ class UploadFileUseCase {
const blob = new Blob([chunk]);
const blobFile = new File([blob], "test.mp4", { type: blob.type });
return await this.CMAPIService.FileContent({length, path: PublicationAttachmentEntity.chucksManager.path, index, blobFile})
return this.CMAPIService.FileContent({length, path: PublicationAttachmentEntity.chucksManager.path, index, blobFile})
}
if(!PublicationAttachmentEntity.chucksManager.hasPath()) {
@@ -1101,13 +1104,15 @@ class UploadFileUseCase {
PublicationAttachmentEntity.chucksManager.setPath(path)
PublicationAttachmentEntity.chucksManager.setResponse(initIndex, uploadRequest)
} else {
reject(err(PublicationAttachmentEntity))
PublicationAttachmentEntity.chucksManager.setManualRetry()
return reject(err(PublicationAttachmentEntity))
}
}
const allRequest: Promise<any>[] = []
let connection = true
for (let index = 2; index <= PublicationAttachmentEntity.chucksManager.chunks.totalChunks -1; index++) {
for (let index = 2; ( (index <= PublicationAttachmentEntity.chucksManager.chunks.totalChunks -1) && connection ); index++) {
const needUpload = PublicationAttachmentEntity.chucksManager.needToUploadChunkIndex(index)
if(needUpload) {
@@ -1116,7 +1121,9 @@ class UploadFileUseCase {
if(uploadRequest.isErr()) {
const pingRequest = await this.CMAPIService.ping()
if( pingRequest.isErr()) {
reject(err(PublicationAttachmentEntity))
connection = false
PublicationAttachmentEntity.chucksManager.setManualRetry()
return reject(err(PublicationAttachmentEntity))
}
} else {
PublicationAttachmentEntity.chucksManager.setResponse(index, uploadRequest)
@@ -1139,20 +1146,28 @@ class UploadFileUseCase {
}
}
await Promise.all(allRequest)
const uploadRequest = await readAndUploadChunk(PublicationAttachmentEntity.chucksManager.chunks.totalChunks)
if(uploadRequest.isErr()) {
const pingRequest = await this.CMAPIService.ping()
if( pingRequest.isErr()) {
reject(err(PublicationAttachmentEntity))
}
if(!connection) {
PublicationAttachmentEntity.chucksManager.setManualRetry()
return reject(err(PublicationAttachmentEntity))
} else {
PublicationAttachmentEntity.chucksManager.setResponse(PublicationAttachmentEntity.chucksManager.chunks.totalChunks, uploadRequest)
await Promise.all(allRequest)
const uploadRequest = await readAndUploadChunk(PublicationAttachmentEntity.chucksManager.chunks.totalChunks)
if(uploadRequest.isErr()) {
const pingRequest = await this.CMAPIService.ping()
if( pingRequest.isErr()) {
PublicationAttachmentEntity.chucksManager.setManualRetry()
return reject(err(PublicationAttachmentEntity))
}
} else {
PublicationAttachmentEntity.chucksManager.setResponse(PublicationAttachmentEntity.chucksManager.chunks.totalChunks, uploadRequest)
}
PublicationAttachmentEntity.chucksManager.doneChunkUpload()
resolve(ok(PublicationAttachmentEntity))
}
PublicationAttachmentEntity.chucksManager.doneChunkUpload()
resolve(ok(PublicationAttachmentEntity))
})
}
}
@@ -1386,6 +1401,7 @@ class ChucksManager {
onSetPath: Function[] = []
onSetLastChunk: Function[] = []
contentReady = false
manualRetry = false
getUploadPercentage() {
return this.uploadPercentage
@@ -1428,6 +1444,14 @@ class ChucksManager {
return percentage;
}
setManualRetry() {
this.manualRetry = true
}
clearManualRetry() {
this.manualRetry = false
}
setPercentage() {
const percentage: number = this.calculatePercentage()
console.log({percentage})
@@ -48,6 +48,9 @@ export class CMAPIService {
await this.CMAPIAPIService.getVideoHeader(url).toPromise()
return ok(true)
} catch(error) {
if(error.status == 405) {
return ok(true)
}
return err(false)
}
+1 -1
View File
@@ -4,4 +4,4 @@ import { doneITProd } from './suport/doneIt'
import { DevDev } from './suport/dev'
export const environment: Environment = oaprProd;
export const environment: Environment = DevDev;