@ngx-file-upload/ui
Version:
Angular 16 file upload components for @ngx-file-upload/core
116 lines • 12.6 kB
JavaScript
import { Directive, HostListener, Input, Output, EventEmitter } from "@angular/core";
import { Subject } from "rxjs";
import * as i0 from "@angular/core";
/**
* FileBrowser directive
*
* @todo refactor this should only notifiy if files are dropped, not add them to store or create an upload
*
* directive to add uploads with drag / drop
*
* @example
*
* <div [ngxFileUpload]="'URL'" (add)="onUploadAdd($event)"></div>
* <button (click)="ngxFileUploadRef.upload()">Upload</button>
*/
export class FileBrowserDirective {
/**
* Creates an instance of NgxFileUploadDirective.
*/
constructor(renderer) {
this.renderer = renderer;
this.disabled = false;
/**
* remove from subscribtions if component gets destroyed
*/
this.destroyed$ = new Subject();
this.add = new EventEmitter();
this.fileSelect = this.createFieldInputField();
}
/**
* directive gets destroyed
*/
ngOnDestroy() {
this.destroyed$.next(true);
this.destroyed$.complete();
}
/**
* handle drag over event
*/
onFileDragOver(event) {
event.stopPropagation();
event.preventDefault();
}
/**
* handle drop event
*/
onFileDrop(event) {
event.stopPropagation();
event.preventDefault();
if (!this.disabled && event.dataTransfer) {
const files = Array.from(event.dataTransfer.files);
this.add.emit(files);
}
}
/**
* add click host listener
* to get notified we have a click event
*/
onClick(event) {
event.stopPropagation();
event.preventDefault();
if (!this.disabled) {
this.fileSelect.click();
}
}
/**
* create dummy input field to select files
* for security reasons, we cant trigger a file select window
* without it
*/
createFieldInputField() {
const inputField = document.createElement("input");
this.renderer.setAttribute(inputField, "type", "file");
this.renderer.setProperty(inputField, "multiple", true);
this.renderer.setStyle(inputField, "display", "none");
this.renderer.listen(inputField, "change", (e) => this.onFileSelect(e));
return inputField;
}
/**
* register on change event on input[type="file"] field
* and create the uploads
*/
onFileSelect(event) {
event.stopPropagation();
event.preventDefault();
const files = Array.from(this.fileSelect.files ?? []);
this.add.emit(files);
/**
* clear value otherwise change will not trigger again
*/
this.fileSelect.files = null;
this.fileSelect.value = '';
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FileBrowserDirective, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: FileBrowserDirective, selector: "[ngxFileUpload]", inputs: { disabled: "disabled" }, outputs: { add: "add" }, host: { listeners: { "dragover": "onFileDragOver($event)", "drop": "onFileDrop($event)", "click": "onClick($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FileBrowserDirective, decorators: [{
type: Directive,
args: [{
selector: "[ngxFileUpload]"
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { add: [{
type: Output
}], disabled: [{
type: Input
}], onFileDragOver: [{
type: HostListener,
args: ["dragover", ["$event"]]
}], onFileDrop: [{
type: HostListener,
args: ["drop", ["$event"]]
}], onClick: [{
type: HostListener,
args: ["click", ["$event"]]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS1icm93c2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvc3JjL2xpYi9maWxlLWJyb3dzZXIvc3JjL2ZpbGUtYnJvd3Nlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBd0IsTUFBTSxlQUFlLENBQUM7QUFDM0csT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFFL0I7Ozs7Ozs7Ozs7O0dBV0c7QUFJSCxNQUFNLE9BQU8sb0JBQW9CO0lBeUI3Qjs7T0FFRztJQUNILFlBQ1ksUUFBbUI7UUFBbkIsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQWhCeEIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUV4Qjs7V0FFRztRQUNLLGVBQVUsR0FBcUIsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQWFqRCxJQUFJLENBQUMsR0FBRyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDOUIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQztJQUNuRCxDQUFDO0lBRUQ7O09BRUc7SUFDSSxXQUFXO1FBQ2QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDM0IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMvQixDQUFDO0lBRUQ7O09BRUc7SUFFSSxjQUFjLENBQUMsS0FBZ0I7UUFDbEMsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBRUQ7O09BRUc7SUFFSSxVQUFVLENBQUMsS0FBZ0I7UUFDOUIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUV2QixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsSUFBSSxLQUFLLENBQUMsWUFBWSxFQUFFO1lBQ3RDLE1BQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNuRCxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUN4QjtJQUNMLENBQUM7SUFFRDs7O09BR0c7SUFFSSxPQUFPLENBQUMsS0FBaUI7UUFDNUIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUV2QixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNoQixJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQzNCO0lBQ0wsQ0FBQztJQUVEOzs7O09BSUc7SUFDSyxxQkFBcUI7UUFDekIsTUFBTSxVQUFVLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxVQUFVLEVBQUUsTUFBTSxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQ3ZELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLFVBQVUsRUFBRSxVQUFVLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDeEQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFLFNBQVMsRUFBRSxNQUFNLENBQUMsQ0FBQztRQUN0RCxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxVQUFVLEVBQUUsUUFBUSxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDeEUsT0FBTyxVQUFVLENBQUM7SUFDdEIsQ0FBQztJQUVEOzs7T0FHRztJQUNLLFlBQVksQ0FBQyxLQUFZO1FBQzdCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFFdkIsTUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUMsQ0FBQztRQUN0RCxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUVyQjs7V0FFRztRQUNILElBQUksQ0FBQyxVQUFVLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztRQUM3QixJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7SUFDL0IsQ0FBQztpSUE5R1Esb0JBQW9CO3FIQUFwQixvQkFBb0I7OzJGQUFwQixvQkFBb0I7a0JBSGhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtpQkFDNUI7Z0dBV1UsR0FBRztzQkFEVCxNQUFNO2dCQUlBLFFBQVE7c0JBRGQsS0FBSztnQkFtQ0MsY0FBYztzQkFEcEIsWUFBWTt1QkFBQyxVQUFVLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBVTdCLFVBQVU7c0JBRGhCLFlBQVk7dUJBQUMsTUFBTSxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQWdCekIsT0FBTztzQkFEYixZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIE9uRGVzdHJveSwgUmVuZGVyZXIyIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gXCJyeGpzXCI7XHJcblxyXG4vKipcclxuICogRmlsZUJyb3dzZXIgZGlyZWN0aXZlXHJcbiAqXHJcbiAqIEB0b2RvIHJlZmFjdG9yIHRoaXMgc2hvdWxkIG9ubHkgbm90aWZpeSBpZiBmaWxlcyBhcmUgZHJvcHBlZCwgbm90IGFkZCB0aGVtIHRvIHN0b3JlIG9yIGNyZWF0ZSBhbiB1cGxvYWRcclxuICpcclxuICogZGlyZWN0aXZlIHRvIGFkZCB1cGxvYWRzIHdpdGggZHJhZyAvIGRyb3BcclxuICpcclxuICogQGV4YW1wbGVcclxuICpcclxuICogPGRpdiBbbmd4RmlsZVVwbG9hZF09XCInVVJMJ1wiIChhZGQpPVwib25VcGxvYWRBZGQoJGV2ZW50KVwiPjwvZGl2PlxyXG4gKiA8YnV0dG9uIChjbGljayk9XCJuZ3hGaWxlVXBsb2FkUmVmLnVwbG9hZCgpXCI+VXBsb2FkPC9idXR0b24+XHJcbiAqL1xyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogXCJbbmd4RmlsZVVwbG9hZF1cIlxyXG59KVxyXG5leHBvcnQgY2xhc3MgRmlsZUJyb3dzZXJEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogdXBsb2FkIGhhcyBiZWVuIGFkZGVkXHJcbiAgICAgKlxyXG4gICAgICogQGV4YW1wbGVcclxuICAgICAqXHJcbiAgICAgKiA8ZGl2IFtuZ3hGaWxlVXBsb2FkXT1cIlwibG9jYWxob3N0L3VwbG9hZFwiXCIgKGFkZCk9XCJvblVwbG9hZEFkZCgkZXZlbnQpXCIgPjwvZGl2PlxyXG4gICAgICovXHJcbiAgICBAT3V0cHV0KClcclxuICAgIHB1YmxpYyBhZGQ6IEV2ZW50RW1pdHRlcjxGaWxlW10+O1xyXG5cclxuICAgIEBJbnB1dCgpXHJcbiAgICBwdWJsaWMgZGlzYWJsZWQgPSBmYWxzZTtcclxuXHJcbiAgICAvKipcclxuICAgICAqIHJlbW92ZSBmcm9tIHN1YnNjcmlidGlvbnMgaWYgY29tcG9uZW50IGdldHMgZGVzdHJveWVkXHJcbiAgICAgKi9cclxuICAgIHByaXZhdGUgZGVzdHJveWVkJDogU3ViamVjdDxib29sZWFuPiA9IG5ldyBTdWJqZWN0KCk7XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBpbnB1dCBmaWxlIGZpZWxkIHRvIHRyaWdnZXIgZmlsZSB3aW5kb3dcclxuICAgICAqL1xyXG4gICAgcHJpdmF0ZSBmaWxlU2VsZWN0OiBIVE1MSW5wdXRFbGVtZW50O1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogQ3JlYXRlcyBhbiBpbnN0YW5jZSBvZiBOZ3hGaWxlVXBsb2FkRGlyZWN0aXZlLlxyXG4gICAgICovXHJcbiAgICBjb25zdHJ1Y3RvcihcclxuICAgICAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjJcclxuICAgICkge1xyXG4gICAgICAgIHRoaXMuYWRkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gICAgICAgIHRoaXMuZmlsZVNlbGVjdCA9IHRoaXMuY3JlYXRlRmllbGRJbnB1dEZpZWxkKCk7XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBkaXJlY3RpdmUgZ2V0cyBkZXN0cm95ZWRcclxuICAgICAqL1xyXG4gICAgcHVibGljIG5nT25EZXN0cm95KCkge1xyXG4gICAgICAgIHRoaXMuZGVzdHJveWVkJC5uZXh0KHRydWUpO1xyXG4gICAgICAgIHRoaXMuZGVzdHJveWVkJC5jb21wbGV0ZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogaGFuZGxlIGRyYWcgb3ZlciBldmVudFxyXG4gICAgICovXHJcbiAgICBASG9zdExpc3RlbmVyKFwiZHJhZ292ZXJcIiwgW1wiJGV2ZW50XCJdKVxyXG4gICAgcHVibGljIG9uRmlsZURyYWdPdmVyKGV2ZW50OiBEcmFnRXZlbnQpIHtcclxuICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcclxuICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogaGFuZGxlIGRyb3AgZXZlbnRcclxuICAgICAqL1xyXG4gICAgQEhvc3RMaXN0ZW5lcihcImRyb3BcIiwgW1wiJGV2ZW50XCJdKVxyXG4gICAgcHVibGljIG9uRmlsZURyb3AoZXZlbnQ6IERyYWdFdmVudCkge1xyXG4gICAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcblxyXG4gICAgICAgIGlmICghdGhpcy5kaXNhYmxlZCAmJiBldmVudC5kYXRhVHJhbnNmZXIpIHtcclxuICAgICAgICAgICAgY29uc3QgZmlsZXMgPSBBcnJheS5mcm9tKGV2ZW50LmRhdGFUcmFuc2Zlci5maWxlcyk7XHJcbiAgICAgICAgICAgIHRoaXMuYWRkLmVtaXQoZmlsZXMpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICAvKipcclxuICAgICAqIGFkZCBjbGljayBob3N0IGxpc3RlbmVyXHJcbiAgICAgKiB0byBnZXQgbm90aWZpZWQgd2UgaGF2ZSBhIGNsaWNrIGV2ZW50XHJcbiAgICAgKi9cclxuICAgIEBIb3N0TGlzdGVuZXIoXCJjbGlja1wiLCBbXCIkZXZlbnRcIl0pXHJcbiAgICBwdWJsaWMgb25DbGljayhldmVudDogTW91c2VFdmVudCkge1xyXG4gICAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcblxyXG4gICAgICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xyXG4gICAgICAgICAgICB0aGlzLmZpbGVTZWxlY3QuY2xpY2soKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBjcmVhdGUgZHVtbXkgaW5wdXQgZmllbGQgdG8gc2VsZWN0IGZpbGVzXHJcbiAgICAgKiBmb3Igc2VjdXJpdHkgcmVhc29ucywgd2UgY2FudCB0cmlnZ2VyIGEgZmlsZSBzZWxlY3Qgd2luZG93XHJcbiAgICAgKiB3aXRob3V0IGl0XHJcbiAgICAgKi9cclxuICAgIHByaXZhdGUgY3JlYXRlRmllbGRJbnB1dEZpZWxkKCk6IEhUTUxJbnB1dEVsZW1lbnQge1xyXG4gICAgICAgIGNvbnN0IGlucHV0RmllbGQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KFwiaW5wdXRcIik7XHJcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUoaW5wdXRGaWVsZCwgXCJ0eXBlXCIsIFwiZmlsZVwiKTtcclxuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KGlucHV0RmllbGQsIFwibXVsdGlwbGVcIiwgdHJ1ZSk7XHJcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShpbnB1dEZpZWxkLCBcImRpc3BsYXlcIiwgXCJub25lXCIpO1xyXG4gICAgICAgIHRoaXMucmVuZGVyZXIubGlzdGVuKGlucHV0RmllbGQsIFwiY2hhbmdlXCIsIChlKSA9PiB0aGlzLm9uRmlsZVNlbGVjdChlKSk7XHJcbiAgICAgICAgcmV0dXJuIGlucHV0RmllbGQ7XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiByZWdpc3RlciBvbiBjaGFuZ2UgZXZlbnQgb24gaW5wdXRbdHlwZT1cImZpbGVcIl0gZmllbGRcclxuICAgICAqIGFuZCBjcmVhdGUgdGhlIHVwbG9hZHNcclxuICAgICAqL1xyXG4gICAgcHJpdmF0ZSBvbkZpbGVTZWxlY3QoZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XHJcbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuXHJcbiAgICAgICAgY29uc3QgZmlsZXMgPSBBcnJheS5mcm9tKHRoaXMuZmlsZVNlbGVjdC5maWxlcyA/PyBbXSk7XHJcbiAgICAgICAgdGhpcy5hZGQuZW1pdChmaWxlcyk7XHJcblxyXG4gICAgICAgIC8qKlxyXG4gICAgICAgICAqIGNsZWFyIHZhbHVlIG90aGVyd2lzZSBjaGFuZ2Ugd2lsbCBub3QgdHJpZ2dlciBhZ2FpblxyXG4gICAgICAgICAqL1xyXG4gICAgICAgIHRoaXMuZmlsZVNlbGVjdC5maWxlcyA9IG51bGw7XHJcbiAgICAgICAgdGhpcy5maWxlU2VsZWN0LnZhbHVlID0gJyc7XHJcbiAgICB9XHJcbn1cclxuIl19