mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
file upload
This commit is contained in:
@@ -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++;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
@@ -4,4 +4,4 @@ import { doneITProd } from './suport/doneIt'
|
||||
import { DevDev } from './suport/dev'
|
||||
|
||||
|
||||
export const environment: Environment = oaprProd;
|
||||
export const environment: Environment = DevDev;
|
||||
|
||||
Reference in New Issue
Block a user