#29 - allow uploading multiple files; ajax upload w/o reloading page
This commit is contained in:
parent
fac0a07dd1
commit
a338347486
@ -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>
|
||||
|
@ -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}`;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user