rebirth-ng-app documentation
  1. Components
  2. ImageUploadComponent

File

projects/rebirth-ng/src/lib/image-upload/image-upload.component.ts

Extends

FileUpload

Metadata

changeDetection ChangeDetectionStrategy.OnPush
exportAs imageUpload
providers { : , : (() => ), : true }
selector re-image-upload
styleUrls image-upload.component.scss
templateUrl ./image-upload.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(rebirthNGConfig: RebirthNGConfig, renderer: Renderer2, http: HttpClient, changeDetectorRef: ChangeDetectorRef, modalService: ModalService)
Defined in projects/rebirth-ng/src/lib/image-upload/image-upload.component.ts:27
Parameters :
Name Type Optional
rebirthNGConfig RebirthNGConfig no
renderer Renderer2 no
http HttpClient no
changeDetectorRef ChangeDetectorRef no
modalService ModalService no

Inputs

viewIcon

Type: string

Defined in projects/rebirth-ng/src/lib/image-upload/image-upload.component.ts:27
accept

Type: string

Inherited from FileUpload
Defined in FileUpload:23
autoUpload

Type: boolean

Inherited from FileUpload
Defined in FileUpload:25
cancelButton

Type: string

Inherited from FileUpload
Defined in FileUpload:40
canRetry

Default value: true

Inherited from FileUpload
Defined in FileUpload:45
chooseButton

Type: string

Inherited from FileUpload
Defined in FileUpload:38
cssClass

Type: string

Inherited from FileUpload
Defined in FileUpload:35
disabled

Type: boolean

Inherited from FileUpload
Defined in FileUpload:48
fileSizeErrorMessage

Type: string

Inherited from FileUpload
Defined in FileUpload:36
fileTypeErrorMessage

Type: string

Inherited from FileUpload
Defined in FileUpload:37
imgPreview

Type: boolean

Inherited from FileUpload
Defined in FileUpload:32
loadingIcon

Type: string

Inherited from FileUpload
Defined in FileUpload:43
maxFileSize

Type: number

Inherited from FileUpload
Defined in FileUpload:28
maxItems

Type: number

Inherited from FileUpload
Defined in FileUpload:27
multiple

Default value: true

Inherited from FileUpload
Defined in FileUpload:24
plusIcon

Type: string

Inherited from FileUpload
Defined in FileUpload:41
previewHeight

Type: string

Inherited from FileUpload
Defined in FileUpload:34
previewTemplate

Type: TemplateRef<any>

Inherited from FileUpload
Defined in FileUpload:47
previewWidth

Type: string

Inherited from FileUpload
Defined in FileUpload:33
removeIcon

Type: string

Inherited from FileUpload
Defined in FileUpload:44
showErrors

Default value: true

Inherited from FileUpload
Defined in FileUpload:26
toolbarTemplate

Type: TemplateRef<any>

Inherited from FileUpload
Defined in FileUpload:46
transformResponseUrl

Type: function

Inherited from FileUpload
Defined in FileUpload:57
uploadButton

Type: string

Inherited from FileUpload
Defined in FileUpload:39
uploadFiles

Type: SelectFileModel[]

Default value: []

Inherited from FileUpload
Defined in FileUpload:56
uploadIcon

Type: string

Inherited from FileUpload
Defined in FileUpload:42
uploadParamName

Type: string

Inherited from FileUpload
Defined in FileUpload:30
uploadRequestOptions

Type: any

Inherited from FileUpload
Defined in FileUpload:31
uploadUrl

Type: string

Inherited from FileUpload
Defined in FileUpload:29

Outputs

fileUploadCompleted $event type: EventEmitter
Inherited from FileUpload
Defined in FileUpload:51
fileUploadError $event type: EventEmitter
Inherited from FileUpload
Defined in FileUpload:53
fileUploadStart $event type: EventEmitter
Inherited from FileUpload
Defined in FileUpload:50
fileUploadSuccess $event type: EventEmitter
Inherited from FileUpload
Defined in FileUpload:52
removeFiles $event type: EventEmitter
Inherited from FileUpload
Defined in FileUpload:54
selectFilesChange $event type: EventEmitter
Inherited from FileUpload
Defined in FileUpload:49
uploadFilesChange $event type: EventEmitter
Inherited from FileUpload
Defined in FileUpload:55

Methods

uploadBtnIcon
uploadBtnIcon()
Defined in projects/rebirth-ng/src/lib/image-upload/image-upload.component.ts:52
Returns : any
viewImage
viewImage(fileItem: SelectFileModel)
Defined in projects/rebirth-ng/src/lib/image-upload/image-upload.component.ts:42
Parameters :
Name Type Optional
fileItem SelectFileModel no
Returns : void
addNewFile
addNewFile($event: )
Inherited from FileUpload
Defined in FileUpload:138
Parameters :
Name Optional
$event no
Returns : void
clearErrors
clearErrors()
Inherited from FileUpload
Defined in FileUpload:121
Returns : void
Private getFileCount
getFileCount()
Inherited from FileUpload
Defined in FileUpload:292
Returns : any
Private handleFileChoose
handleFileChoose(uploadFiles: FileList)
Inherited from FileUpload
Defined in FileUpload:243
Parameters :
Name Type Optional
uploadFiles FileList no
Returns : void
Private httpUploadAllFile
httpUploadAllFile(files: )
Inherited from FileUpload
Defined in FileUpload:187
Parameters :
Name Optional
files no
Returns : void
Private httpUploadFile
httpUploadFile(fileItem: )
Inherited from FileUpload
Defined in FileUpload:199
Parameters :
Name Optional
fileItem no
Returns : any
isMoreThanMaxItems
isMoreThanMaxItems()
Inherited from FileUpload
Defined in FileUpload:113
Returns : boolean
mapFileModel
mapFileModel(files: File[])
Inherited from FileUpload
Defined in FileUpload:302
Parameters :
Name Type Optional
files File[] no
Returns : Promise<SelectFileModel[]>
newFileChoose
newFileChoose(fileInput: HTMLInputElement)
Inherited from FileUpload
Defined in FileUpload:149
Parameters :
Name Type Optional
fileInput HTMLInputElement no
Returns : void
ngAfterViewInit
ngAfterViewInit()
Inherited from FileUpload
Defined in FileUpload:88
Returns : void
onDropFiles
onDropFiles($event: )
Inherited from FileUpload
Defined in FileUpload:125
Parameters :
Name Optional
$event no
Returns : void
Protected onFileUploadError
onFileUploadError(fileItem: , error: )
Inherited from FileUpload
Defined in FileUpload:225
Parameters :
Name Optional
fileItem no
error no
Returns : Observable<any>
Protected onFileUploadSuccess
onFileUploadSuccess(fileItem: , res: )
Inherited from FileUpload
Defined in FileUpload:209
Parameters :
Name Optional
fileItem no
res no
Returns : Observable<any>
onRemoveFile
onRemoveFile(fileItem: )
Inherited from FileUpload
Defined in FileUpload:164
Parameters :
Name Optional
fileItem no
Returns : void
onRemoveUploadFile
onRemoveUploadFile(fileItem: )
Inherited from FileUpload
Defined in FileUpload:173
Parameters :
Name Optional
fileItem no
Returns : void
Private onUploadFileChange
onUploadFileChange(uploadFiles: )
Inherited from FileUpload
Defined in FileUpload:219
Parameters :
Name Optional
uploadFiles no
Returns : void
registerOnChange
registerOnChange(fn: any)
Inherited from FileUpload
Defined in FileUpload:101
Parameters :
Name Type Optional
fn any no
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Inherited from FileUpload
Defined in FileUpload:105
Parameters :
Name Type Optional
fn any no
Returns : void
removeAllSelectedFiles
removeAllSelectedFiles()
Inherited from FileUpload
Defined in FileUpload:156
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)
Inherited from FileUpload
Defined in FileUpload:109
Parameters :
Name Type Optional
isDisabled boolean no
Returns : void
uploadAllFiles
uploadAllFiles()
Inherited from FileUpload
Defined in FileUpload:182
Returns : void
validFile
validFile(file: File)
Inherited from FileUpload
Defined in FileUpload:271
Parameters :
Name Type Optional
file File no
Returns : boolean
validFiles
validFiles(files: File[])
Inherited from FileUpload
Defined in FileUpload:259
Parameters :
Name Type Optional
files File[] no
Returns : File[]
Private validFileType
validFileType(file: File)
Inherited from FileUpload
Defined in FileUpload:296
Parameters :
Name Type Optional
file File no
Returns : any
writeValue
writeValue(value: any)
Inherited from FileUpload
Defined in FileUpload:96
Parameters :
Name Type Optional
value any no
Returns : void

Properties

errors
errors: string[]
Type : string[]
Default value : []
Inherited from FileUpload
Defined in FileUpload:61
fileInput
fileInput: ElementRef
Type : ElementRef
Decorators : ViewChild
Inherited from FileUpload
Defined in FileUpload:58
isUploading
isUploading: boolean
Type : boolean
Inherited from FileUpload
Defined in FileUpload:60
Protected onChange
onChange:
Default value : (_: any) => null
Inherited from FileUpload
Defined in FileUpload:62
Protected onTouched
onTouched:
Default value : () => null
Inherited from FileUpload
Defined in FileUpload:63
selectFiles
selectFiles: SelectFileModel[]
Type : SelectFileModel[]
Default value : []
Inherited from FileUpload
Defined in FileUpload:59
 
import {
  Component, ChangeDetectionStrategy, Optional, ChangeDetectorRef, Renderer2, Input, forwardRef
} from '@angular/core';
import { FileUpload } from '../file-upload/file-upload';
import { RebirthNGConfig } from '../rebirth-ng.config';
import { HttpClient } from '@angular/common/http';
import { SelectFileModel } from '../file-upload/file-upload.model';
import { ViewImageModalComponent } from './view-image-modal.component';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ModalService } from '../modal/modal.service';
import { noop } from '../utils/lange-utils';

@Component({
  selector: 're-image-upload',
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  exportAs: 'imageUpload',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => ImageUploadComponent),
    multi: true
  }]
})
export class ImageUploadComponent extends FileUpload {

  @Input() viewIcon: string;

  constructor(rebirthNGConfig: RebirthNGConfig,
              renderer: Renderer2,
              @Optional()  http: HttpClient,
              changeDetectorRef: ChangeDetectorRef,
              private modalService: ModalService) {
    super(rebirthNGConfig, renderer, http, changeDetectorRef);
    this.viewIcon = this.rebirthNGConfig.imageUpload.viewIcon;
    this.imgPreview = true;
    this.autoUpload = true;
    this.accept = 'image/*';
    this.canRetry = false;
  }

  viewImage(fileItem: SelectFileModel) {
    if (this.disabled) {
      return;
    }
    this.modalService.open({
      component: ViewImageModalComponent,
      resolve: { url: fileItem.url, name: fileItem.name }
    }).subscribe(noop, noop);
  }

  uploadBtnIcon() {
    return this.isUploading ? this.loadingIcon : this.plusIcon;
  }
}

<input #file type="file" (change)="newFileChoose(file)" style="display: none">

<div class="image-upload clearfix {{cssClass}}" reDroppable (onDrop)="onDropFiles($event)">
  <div *ngFor="let fileItem of uploadFiles" class="image-upload-item"
       [style.width]="previewWidth"
       [style.height]="previewHeight">

    <div class="image-upload-image-view">
      <div class="image-upload-toolbar">
        <i [ngClass]="{disabled: disabled}" class="image-upload-toolbar-item image-upload-toolbar-view {{viewIcon}}"
           (click)="viewImage(fileItem)"></i>
        <i [ngClass]="{disabled: disabled}" class="image-upload-toolbar-item image-upload-toolbar-remove {{removeIcon}}"
           (click)="onRemoveUploadFile(fileItem)"></i>
      </div>
      <div class="image-upload-item-info">
        <img class="preview-image img-responsive" [src]="fileItem.url"
             [attr.alt]="fileItem?.name">
      </div>
    </div>
  </div>
  <div class="image-upload-item image-upload-btn" [style.width]="previewWidth"
       [style.height]="previewHeight" (click)="addNewFile($event)"
       *ngIf="!disabled && (!isMoreThanMaxItems() || isUploading)">
    <div class="image-upload-item-info">
      <i class="image-upload-btn-icon {{uploadBtnIcon()}}" [ngClass]="{'uploading': isUploading}"></i>
      <div class="image-upload-btn-text">{{uploadButton}}</div>
    </div>
  </div>
</div>

<re-alert-box class="file-upload-error-box" type="danger" [closable]="true" (close)="clearErrors()"
              *ngIf="showErrors && errors.length">
  <ul>
    <li *ngFor="let error of errors">{{error}}</li>
  </ul>
</re-alert-box>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""