#29 - allow uploading multiple files; ajax upload w/o reloading page
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone Build is passing

This commit is contained in:
Garrett Mills 2021-02-02 08:24:36 -06:00
parent fac0a07dd1
commit a338347486
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
2 changed files with 31 additions and 2 deletions

View File

@ -1,7 +1,7 @@
<div class="files-wrapper" *ngIf="!notAvailableOffline">
<div class="new-uploads" style="margin: 20px;" *ngIf="!readonly">
<form #uploadForm [action]="getApiSubmit()" enctype="multipart/form-data" method="post">
<input style="margin-top: 10px;" type="file" id="file" name="uploaded_file">
<input style="margin-top: 10px;" type="file" id="file" name="uploaded_file" #fileUploader (change)="onFileChange($event)" multiple>
<input type="hidden" name="redirectTo" [value]="getReturnUrl()">
<ion-button (click)="onSubmitClick()" type="submit" fill="outline" class="ion-margin-start">Upload</ion-button>
</form>

View File

@ -3,6 +3,7 @@ import {ApiService, ResourceNotAvailableOfflineError} from '../../../service/api
import { APP_BASE_HREF } from '@angular/common';
import {EditorService} from '../../../service/editor.service';
import {EditorNodeContract} from '../../nodes/EditorNode.contract';
import {HttpClient} from '@angular/common/http';
@Component({
selector: 'editor-files',
@ -13,6 +14,7 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
@Input() nodeId: string;
@Input() editorUUID: string;
@ViewChild('uploadForm') uploadForm: ElementRef;
@ViewChild('fileUploader') fileUploader: ElementRef;
public fileRecords: Array<any> = [];
public pendingSetup = true;
@ -26,6 +28,7 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
constructor(
protected api: ApiService,
protected http: HttpClient,
public editorService: EditorService,
@Inject(APP_BASE_HREF) private baseHref: string
) { super(); }
@ -69,6 +72,7 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
}
this.pendingSetup = false;
this.fileUploader.nativeElement.value = null;
}
public async performDelete(): Promise<void> {
@ -91,9 +95,34 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
return;
}
this.uploadForm.nativeElement.submit();
const fileList: FileList = this.fileUploader?.nativeElement?.files;
if ( !fileList ) {
return;
}
if ( fileList.length > 0 ) {
const formData: FormData = new FormData();
// tslint:disable-next-line:prefer-for-of
for ( let i = 0; i < fileList.length; i += 1 ) {
const file = fileList[i];
formData.append(`uploaded_file_${i}`, file, file.name);
}
this.http.post(this.getApiSubmit(), formData).subscribe({
next: data => {
this.performLoad();
},
error: error => {
console.error(error);
this.performLoad();
},
});
}
}
onFileChange(event) {}
getReturnUrl() {
return `${this.baseHref}editor;id=${this.page.UUID}`;
}