From 495e8a96bafe105497976c1b5e2c942b878ea770 Mon Sep 17 00:00:00 2001 From: empty Date: Thu, 16 Jun 2022 12:13:41 +0200 Subject: [PATCH] added possibility to add file programmatically to the upload --- core/projects/just-upload/README.md | 16 +++--- .../just-upload/src/lib/BasicUpload.ts | 49 +++++++++++++------ 2 files changed, 45 insertions(+), 20 deletions(-) diff --git a/core/projects/just-upload/README.md b/core/projects/just-upload/README.md index 6293c5a..f9f8b00 100644 --- a/core/projects/just-upload/README.md +++ b/core/projects/just-upload/README.md @@ -19,7 +19,7 @@ provide `services` , `models` and `examples` to implement your own custom upload - `Basic Upload Multipart` - uploads files as `multipart/form-data` - [see Basic Multipart Example](https://github.com/andreashauschild/just-upload/blob/main/core/projects/example-app/src/app/examples/basic-multipart-example/basic-multipart-example.component.ts) - [Quarkus Endpoint (BasicUploadResource.java)](https://github.com/andreashauschild/just-upload/blob/main/dev/servers/quarkus/src/main/java/de/litexo/BasicUploadResource.java) - - `Chunked Upload` - Splits a file in chunks and sends for each chunk a http request. This can be used to upload very large files which may exceeding the size of a single + - `Chunked Upload` - Splits a file in chunks and sends for each chunk a http request. This can be used to upload very large files which may exceeding the size limit of a single request. - [see Basic Chunked Upload Example](https://github.com/andreashauschild/just-upload/blob/main/core/projects/example-app/src/app/examples/basic-chunked-upload-example/basic-chunked-upload-example.component.ts) - [Quarkus Endpoint (ChunkUploadResource.java)](https://github.com/andreashauschild/just-upload/blob/main/dev/servers/quarkus/src/main/java/de/litexo/ChunkUploadResource.java) @@ -169,11 +169,13 @@ The `UploadFile` is the file data model. It holds the browser file and additiona The `Upload` and `MultipartFormUpload` will be created by a factory method of the `JustUploadService`. It is the main object you will work with. In case of `MultipartFormUpload` every file will be sent as single `multipart/form-data` request. This means if you have 5 files in your file list, they will be sent in 5 separate requests. If you use `Upload` every file will be sent as an `application/octet-stream` to the server. -| Methods | Description | -|----------|---------------| -| `uploadFile(uploadFile: UploadFile): void` | Method to trigger the upload process of the given file. The method can be used if `uploadImmediately` is disabled | -| `onFileProcessed(): Observable` | Subscribe for receiving progress chances while the file is processed. Returns`UploadFile` with the current state. **Info:** If you are uploading files with a very good connection (e.g. local server) you may get only one processing update | -| `onFiledAdded(): Observable` | Subscribe for receiving the files that are added to the `input` element | +| Methods | Description | +|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `uploadFile(uploadFile: UploadFile): void` | Method to trigger the upload process of the given file. The method can be used if `uploadImmediately` is disabled | +| `onFileProcessed(): Observable` | Subscribe for receiving progress chances while the file is processed. Returns`UploadFile` with the current state. **Info:** If you are uploading files with a very good connection (e.g. local server) you may get only one processing update | +| `onFiledAdded(): Observable` | Subscribe for receiving the files that are added to the `input` element | +| `addFile(file: File): void` | Adds the File): to the upload. This can be used add files programmatically if needed. For example if you build drag and drop components.| +| `addFiles(fileList: FileList): void` | Adds the FileList to the upload. This can be used add files programmatically if needed. For example if you build drag and drop components.| ## ChunkedUploadConfig - ChunkedUploadFile - ChunkedUpload Chunked Upload - Splits a file in chunks and sends for each chunk a http request. This can be used to upload very large files which may exceeding the size of a single @@ -237,3 +239,5 @@ Every chunk will be sent as an `application/octet-stream` to the server. | `onChunkProcessed(): Observable` | Subscribe to this function to handle chunks after there where send to server | | `onFiledAdded(): Observable` | Subscribe for receiving the files that are added to the `input` element | | `uploadFile(file: ChunkedUploadFile): void` | Method to trigger the upload process of the given file. The method can be used if `uploadImmediately` is disabled | +| `addFile(file: File): void` | Adds the File): to the upload. This can be used add files programmatically if needed. For example if you build drag and drop components.| +| `addFiles(fileList: FileList): void` | Adds the FileList to the upload. This can be used add files programmatically if needed. For example if you build drag and drop components.| diff --git a/core/projects/just-upload/src/lib/BasicUpload.ts b/core/projects/just-upload/src/lib/BasicUpload.ts index 1d0137c..71f5fd8 100644 --- a/core/projects/just-upload/src/lib/BasicUpload.ts +++ b/core/projects/just-upload/src/lib/BasicUpload.ts @@ -18,10 +18,10 @@ export abstract class BasicUpload { constructor(protected http: HttpClient, input: ElementRef, config: UploadConfig) { if (!config) { - throw `Error: Missing config for upload!` + throw new Error(`Error: Missing config for upload!`); } if (!input) { - throw `Error: Missing input element for upload!` + throw new Error(`Error: Missing input element for upload!`); } @@ -124,20 +124,41 @@ export abstract class BasicUpload { if (input) { this.input.nativeElement.accept = this.config.accept; this.input.nativeElement.multiple = this.config.multi; - input.onchange = (e => { - if (input?.files?.length) { - for (let index = 0; index < input?.files?.length; index++) { - const uploadFile = new UploadFile(input.files[index]); - if (uploadFile.size > this.config.maxFileSize!) { - uploadFile.state = UploadState.SIZE_LIMIT_EXCEEDED; - } - this.fileAddedSubject.next(uploadFile); - if (this.config.uploadImmediately) { - this.uploadFile(uploadFile); - } - } + input.onchange = (_ => { + if (input?.files) { + this.addFiles(input.files); } }); } } + + /** + * Adds a file to this upload + * @param file + */ + public addFile(file: File | null | undefined): void { + if (file) { + const uploadFile = new UploadFile(file); + if (uploadFile.size > this.config.maxFileSize!) { + uploadFile.state = UploadState.SIZE_LIMIT_EXCEEDED; + } + this.fileAddedSubject.next(uploadFile); + if (this.config.uploadImmediately) { + this.uploadFile(uploadFile); + } + } + } + + /** + * Adds a FileList to this upload + * @param fileList + */ + public addFiles(fileList: FileList | null | undefined): void { + + if (fileList) { + for (let index = 0; index < fileList.length; index++) { + this.addFile(fileList.item(index)); + } + } + } }