Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: File upload plugin doesn't show an error when selecting extra files

Lawman priority asked 1 year ago

Expected behavior When i select a lot files i should to get error about that

Actual behavior When I select a lot files - dialog frame is closing and further i don't get any error. (others errors i'm getting)

Resources (screenshots, code snippets etc.)

ts file: 

import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {FileUploadValidators} from "@iplab/ngx-file-upload";
import {HousesBuyProtectedService} from "../../services/houses-buy-protected.service";
import {catchError, Subscription, throwError} from "rxjs";
import {Houseforbuy} from "../../entity/houseforbuy";
import {PhotoService} from "../../services/photo.service";
import {MdbNotificationRef, MdbNotificationService} from "mdb-angular-ui-kit/notification";
import {SuccessComponent} from "../../common/toasts/success/success.component";


@Component({
  selector: 'app-property-sell-detail-protected',
  templateUrl: './property-sell-detail-protected.component.html',
  styleUrls: ['./property-sell-detail-protected.component.scss']
})
export class PropertySellDetailProtectedComponent implements OnInit {



  public animation: boolean = false
  public multiple: boolean = true
  createSellHouse: FormGroup
  files: File[] | undefined
  fileForm: FormGroup
  imageSrc: any[] = []
  image: any | undefined
  isHidden:boolean=false
  photoIdStore:number[]=[]
  photoUrlStore:string|undefined
  handlerUploadSubs:Subscription|undefined
  handlerCreateSubs:Subscription|undefined
  latitude=37.71187776619116
  longitude=-122.16758016166078
  private handlerFiles:Subscription[]=[]
  notificationRef: MdbNotificationRef<SuccessComponent> | null = null;

  sellHouseFormsArray           = [
    {id: 0,  name: "Title",         type: "text",   handler: "title",               errorMsg: "Title is required",            successMsg: "Good!",tag:"input"},
    {id: 1,  name: "Description",   type: "text",   handler: "description",         errorMsg: "Description is required",      successMsg: "Good!",tag:"textarea"},
    {id: 2,  name: "Bedrooms",      type: "number", handler: "bedrooms",            errorMsg: "Bedrooms is required",         successMsg: "Good!",tag:"checkbox"},
    {id: 3,  name: "Bathrooms",     type: "number", handler: "bathrooms",           errorMsg: "Bathrooms is required",        successMsg: "Good!",tag:"checkbox" },
    {id: 4,  name: "Square",        type: "number", handler: "square",              errorMsg: "Square is required",           successMsg: "Good!",tag:"input"},
    {id: 5,  name: "Car places",    type: "number", handler: "carPlaces",           errorMsg: "Car places is required",       successMsg: "Good!",tag:"checkbox"},
    {id: 6,  name: "Street",        type: "text",   handler: "street",              errorMsg: "Street is required",           successMsg: "Good!",tag:"input"},
    {id: 7,  name: "City",          type: "text",   handler: "city",                errorMsg: "City is required",             successMsg: "Good!",tag:"input"},
    {id: 8,  name: "State",         type: "text",   handler: "state",               errorMsg: "State is required",            successMsg: "Good!",tag:"input"},
    {id: 9,  name: "Zip code",      type: "number", handler: "zip",                 errorMsg: "zip is required",              successMsg: "Good!",tag:"input"},
    // {id: 10, name: "Contact name",  type: "text",   handler: "contactName",         errorMsg: "Contact name is required",     successMsg: "Good!",tag:"input"},
    // {id: 11, name: "Contact phone", type: "tel",    handler: "contactPhone",        errorMsg: "Contact phone is required",    successMsg: "Good!",tag:"input"},
    {id: 12, name: "Price",         type: "number", handler: "price",               errorMsg: "Price is required",            successMsg: "Good!",tag:"input"},
    {id: 13, name: "Property Type", type: "number", handler: "propertyType",        errorMsg: "Property type is required",    successMsg: "Good!",tag:"checkbox"},
    // {id: 14, name: "Land area",     type: "number", handler: "landArea",            errorMsg: "Land area is required",        successMsg: "Good!",tag:"input"},
  ]


  private filesControl = new FormControl(null,[FileUploadValidators.accept(['.jpeg','.jpg','png']), FileUploadValidators.filesLimit(2)]);

   constructor(private houseToBuy: HousesBuyProtectedService, private photoService:PhotoService,private toastr:MdbNotificationService) {
    this.createSellHouse = new FormGroup({
      title: new FormControl<string|null>(null, Validators.required),
      description: new FormControl<string|null>(null, Validators.required),
      bedrooms: new FormControl<number|null>(null, Validators.required),
      bathrooms: new FormControl<number|null>(null, Validators.required),
      square: new FormControl<number|null>(null, Validators.required),
      // landArea: new FormControl<number|null>(null, Validators.required),
      carPlaces: new FormControl<number|null>(null, Validators.required),
      street: new FormControl<string|null>(null, Validators.required),
      city: new FormControl<string|null>(null, Validators.required),
      state: new FormControl<string|null>(null, Validators.required),
      zip: new FormControl<number|null>(null, Validators.required),
      price: new FormControl<number|null>(null, Validators.required),
      propertyType: new FormControl<number|null>(null, Validators.required),
      // contactName: new FormControl<string|null>(null, Validators.required),
      // contactPhone: new FormControl<number|null>(null, Validators.required),

    })
    this.fileForm = new FormGroup({
      files: this.filesControl
    })
  }


  addFiles(files:File[]){
    this.files=files
    console.log(this.files)
  }

  removeFile(file:File){
     this.files?.splice(this.files?.indexOf(file,0))
    if(this.files!==undefined){
      this.imageSrc=[]
      this.onFileChanged(this.files)
    }

  }

  uploadError(){
     console.log("Something went wrong")
  }

  ngOnInit(): void {
  }


  ngOnDestroy():void{
    this.handlerUploadSubs?.unsubscribe()
    this.handlerCreateSubs?.unsubscribe()
    this.handlerFiles.forEach(value => value.unsubscribe())
  }

 uploadHouseImages() {
    this.files = this.fileForm.get("files")?.value

    if (this.files !== undefined) {
      this.onFileChanged(this.files)
    }
    this.files?.forEach(async file=>{
         this.handlerFiles.push(await this.photoService.createPhoto(file).subscribe({
        next: (res:{fileId:number,url:string}) => {
          this.photoIdStore?.push(res.fileId)
          this.photoUrlStore=res.url
        }
      })
         );catchError(err => throwError(() => err))
    })
  }

  onFileChanged(files: File[]) {
    files.forEach((file) => {
      const reader = new FileReader()
      reader.onload = (e) => {
        this.imageSrc?.push(e.target?.result)
      }
      reader.readAsDataURL(file)
    })
  }



  createHouseSellOffer(){

    if (this.photoIdStore!==undefined){
      console.log("Type: "+typeof this.createSellHouse.get('price')+" "+this.createSellHouse.get('price'))
      let houseDetails = new Houseforbuy([
        {
          'title'       : String(this.createSellHouse.get('title')?.value),
          'description' : String(this.createSellHouse.get('description')?.value),
          'price'       : Number(this.createSellHouse.get('price')?.value),
          'photoFileIds': this.photoIdStore,
          'street'      : String(this.createSellHouse.get('street')?.value),
          'state'       : String(this.createSellHouse.get('state')?.value),
          'city'        : String(this.createSellHouse.get('city')?.value),
          'zip'         : String(this.createSellHouse.get('zip')?.value), // 'contactName':String(this.createSellHouse.get('contactName')?.value),
          // 'contactPhone':Number(this.createSellHouse.get('contactPhone')?.value),
          'square'      : Number(this.createSellHouse.get('square')?.value),
          // 'landArea'    : Number(this.createSellHouse.get('landArea')?.value),
          'bedrooms'    : Number(this.createSellHouse.get('bedrooms')?.value),
          'bathrooms'   : Number(this.createSellHouse.get('bathrooms')?.value),
          'carPlaces'   : Number(this.createSellHouse.get('carPlaces')?.value),
          'propertyType': Number(this.createSellHouse.get('propertyType')?.value),
          location:{
            latitude:this.latitude,
            longitude:this.longitude
          }
          // 'location':{
          //   'latitude': this.latitude,
          //   'longitude': this.longitude,
          // }
        }
      ])


      if(houseDetails.items!==undefined){
        console.log(houseDetails.items[0]);
        this.handlerCreateSubs=this.houseToBuy.createSellOffer(houseDetails.items[0]).subscribe({
          next:()=>this.notificationRef=this.toastr.open(SuccessComponent,{data:{message:"Congratulations! The order have been created!"}})
        });
        catchError(err => throwError(() => err))
    } else {
      throw new Error("To create a new object please upload its photos")
    }}
  }

}
//
// 'title':String(this.createSellHouse.get('title')?.value),
//   'description':String(this.createSellHouse.get('description')?.value),
//   'price':Number(this.createSellHouse.get('price')?.value),
//   'photoFileIds':this.photoIdStore,
//   'street':String(this.createSellHouse.get('street')?.value),
//   'state':String(this.createSellHouse.get('state')?.value),
//   'city':String(this.createSellHouse.get('city')?.value),
//   'zip':String(this.createSellHouse.get('zip')?.value),
//   'contactName':String(this.createSellHouse.get('contactName')?.value),
//   'contactPhone':Number(this.createSellHouse.get('contactPhone')?.value),
//   'square':Number(this.createSellHouse.get('square')?.value),
//   'landArea':Number(this.createSellHouse.get('landArea')?.value),
//   'bedrooms':Number(this.createSellHouse.get('bedrooms')?.value),
//   'bathrooms':Number(this.createSellHouse.get('bathrooms')?.value),
//   'carPlaces':Number(this.createSellHouse.get('carPlaces')?.value),
//   'propertyType':Number(this.createSellHouse.get('propertyType')?.value),

Html file:

<app-protected-page>
  <div class="col-12 col-md-8 shadow shadow-strong-3 mx-auto mt-ste mb-auto rounded rounded-8">
    <app-present-photos [imagesUrls]="imageSrc"></app-present-photos>

<!--    [ngClass]="setMainClass(image.id)"-->
    <div>

      <form [formGroup]="fileForm" (ngSubmit)="uploadHouseImages()" [ngClass]="isHidden?'d-none':'d-block'">
        <div class="p-4 d-flex justify-content-center bg-light" >
          <mdb-file-upload  [multiple]="true" [defaultMsg]="'Drag and drop files here or click (max size 2mb and max 12 files jpeg/jpg/png )'" [quantityError]="'Too much files'"  [maxFileQuantity]="3" [height]="100" [maxFileSize]="3" [acceptedExtensions]="'.jpeg, .jpg, .png'" (fileAdded)="addFiles($event);onFileChanged($event)" (fileRemoved)="removeFile($event)" (uploadError)="uploadError()" ></mdb-file-upload>
<!--        <file-upload formControlName="files" [multiple]="multiple" [animation]="animation"></file-upload>-->
        </div>
      </form>
      <div class="d-flex justify-content-end my-2 me-3">
      <button role="button" class="btn btn-sm btn-outline-primary btn-rounded me-3" [ngClass]="isHidden?'d-block':'d-none'" (click)="isHidden=!isHidden" >
        Show files
      </button>
      <button role="button" class="btn btn-sm btn-primary btn-rounded " (click)="uploadHouseImages();isHidden=!isHidden;" >
        Upload
      </button>
      </div>
    </div>

  <form [formGroup]="createSellHouse" (ngSubmit)="createHouseSellOffer()"  class="col-8 pt-5 mx-auto pb-5">
<ng-container *ngFor="let item of sellHouseFormsArray" [ngSwitch]="item.tag">
    <mdb-form-control class="col-12 mb-4 mx-auto"  *ngSwitchCase="'input'" >
              <input mdbInput mdbValidate class="form-control"  formControlName="{{item.handler}}" type="{{item.type}}" id="{{item.handler}}sell"/>
            <label mdbLabel class="form-label" for="{{item.handler}}">{{item.name}}</label>
            <mdb-error
              *ngIf="(createSellHouse.get(item.handler)?.touched || createSellHouse.get(item.handler)?.dirty)&&createSellHouse.get(item.handler)?.invalid"
            >{{item.errorMsg}}</mdb-error>
            <mdb-success
              *ngIf="(createSellHouse.get(item.handler)?.touched || createSellHouse.get(item.handler)?.dirty)&&createSellHouse.get(item.handler)?.valid "
            >{{item.successMsg}}</mdb-success>
    </mdb-form-control>
  <mdb-form-control class="col-6  mb-4"  *ngSwitchCase="'checkbox'">
             <input mdbInput mdbValidate class="form-control col-6"  formControlName="{{item.handler}}" type="{{item.type}}" id="{{item.handler}}sell"  />
             <label mdbLabel class="form-label" for="{{item.handler}}">{{item.name}}</label>
             <mdb-error
               *ngIf="(createSellHouse.get(item.handler)?.touched || createSellHouse.get(item.handler)?.dirty)&&createSellHouse.get(item.handler)?.invalid"
             >{{item.errorMsg}}</mdb-error>
             <mdb-success
               *ngIf="(createSellHouse.get(item.handler)?.touched || createSellHouse.get(item.handler)?.dirty)&&createSellHouse.get(item.handler)?.valid "
             >{{item.successMsg}}</mdb-success>
  </mdb-form-control>
  <mdb-form-control class="col-12  mb-4 mx-auto"  *ngSwitchCase="'textarea'">
            <textarea  mdbInput mdbValidate class="form-control" id="{{item.handler}}sell" formControlName="{{item.handler}}" rows="4" ></textarea>
            <label mdbLabel class="form-label" for="{{item.handler}}">{{item.name}}</label>
            <mdb-error
              *ngIf="(createSellHouse.get(item.handler)?.touched || createSellHouse.get(item.handler)?.dirty)&&createSellHouse.get(item.handler)?.invalid"
            >{{item.errorMsg}}</mdb-error>
            <mdb-success
              *ngIf="(createSellHouse.get(item.handler)?.touched || createSellHouse.get(item.handler)?.dirty)&&createSellHouse.get(item.handler)?.valid "
            >{{item.successMsg}}</mdb-success>
    </mdb-form-control>
</ng-container>
    <div class="d-flex justify-content-end">
    <button type="button" class="btn btn-primary btn-rounded" (click)="createHouseSellOffer()" >
      Create
    </button>
    </div>
  </form>
  </div>
</app-protected-page>

Rafał Seifert free answered 1 year ago

Currently we don't support errors caused by exceeding maximum file quantity. We may add it in the future and we will let you know.

Lawman priority commented 1 year ago

Please, add the future. Really need. We will wait. Thanks
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.0.0
  • Device: Desctope
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
file-upload angular
About author
Lawman
0Support score
7Questions 0Answers 0Snippets