Skip to content

Commit

Permalink
added possibility to add file programmatically to the upload
Browse files Browse the repository at this point in the history
  • Loading branch information
empty committed Jun 16, 2022
1 parent a0a507e commit 495e8a9
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 20 deletions.
16 changes: 10 additions & 6 deletions core/projects/just-upload/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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<UploadFile>` | 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<UploadFile>` | 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<UploadFile>` | 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<UploadFile>` | 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
Expand Down Expand Up @@ -237,3 +239,5 @@ Every chunk will be sent as an `application/octet-stream` to the server.
| `onChunkProcessed(): Observable<ChunkedUploadFile>` | Subscribe to this function to handle chunks after there where send to server |
| `onFiledAdded(): Observable<ChunkedUploadFile>` | 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.|
49 changes: 35 additions & 14 deletions core/projects/just-upload/src/lib/BasicUpload.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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!`);
}


Expand Down Expand Up @@ -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));
}
}
}
}

0 comments on commit 495e8a9

Please sign in to comment.