This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, OnInit } from '@angular/core'; | |
import { FileItem, HttpClientUploadService } from '@wkoza/ngx-upload'; | |
@Component({ | |
selector: 'app-root', | |
templateUrl: './simple.component.html', | |
styleUrls: ['./simple.component.css'] | |
}) | |
export class SimpleBootstrapComponent implements OnInit { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
optionsInput: InputFileOptions = { | |
multiple: true, | |
accept: [MineTypeEnum.Image, MineTypeEnum.Application_Pdf] | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button mat-raised-button [color]="'primary'" > | |
<ng-template ngxInputFile> Upload local files</ng-template> | |
</button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<span class="btn btn-outline-success btn-s" *ngxInputFile>Upload local files</span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="my-drop-zone" ngxDragAndDrop *ngxInputFile> | |
Drop files here to upload | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="my-drop-zone" ngxDragAndDrop="ngxDropTargetOptions"> | |
Drop files here to upload | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@NgModule({ | |
imports: [ | |
BrowserModule, | |
HttpClientModule, | |
NgxUploadModule.forRoot(ngxDropTargetOptions) | |
] | |
}) | |
export class AppModule {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const ngxDropTargetOptions: DropTargetOptions = { | |
color: 'dropZoneColor', | |
colorDrag: 'dropZoneColorDrag', | |
colorDrop: 'dropZoneColorDrop' | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.dropZoneColor { | |
border: 3px dotted rgba(0,0,0,0.08); | |
background-color: rgba(0,0,0,0.12) | |
} | |
.dropZoneColorDrag { | |
border: 3px dotted rgba(0,0,0,0.28); | |
background-color: grey | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.my-drop-zone { | |
width: 300px; | |
height: 300px; | |
cursor: pointer; | |
padding: 1em; | |
opacity: 0.4; | |
text-align: center; | |
} |
NewerOlder