Topic: It does not work defaultPreview in mdb-file-upload .webp format

Germanj10 priority asked 5 months ago


In this example:

https://mdbootstrap.com/img/Photos/Others/images/89.webp'"

It does not show the preview and with another .webp image it does the same, it does not load the preview of the image, with another id format it does.

Error:

enter image description here


Rafał Seifert staff commented 5 months ago

Could you edit you post and provide code how you implement your file upload? I can upload such .webp image, it works with preview. Do you import MdbFileUploadModule correctly? Do you see any errors in console?


DEVGASA priority answered 4 months ago


Hi Rafał Seifert, our code is simple, is a test as this example :

https://mdbootstrap.com/docs/angular/plugins/file-upload/

<mdb-file-upload   #fileUpload
  [defaultPreview]="'https://mdbootstrap.com/img/Photos/Others/images/89.webp'"
></mdb-file-upload>

in our companies.componet.ts

import { HttpClient } from '@angular/common/http';
import { Component, ViewChild } from '@angular/core';
import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';
import { ModalCompanyComponent } from 'src/app/components/crud/modal-company/modal-company.component';
import { GenericCrudService } from 'src/app/services/crud/generic-crud.service';
import { Company } from 'src/app/models/companies.model';
import Swal from 'sweetalert2';
import { MdbFileUploadComponent } from 'mdb-angular-file-upload';

@Component({
  selector: 'app-companies',
  templateUrl: './companies.component.html',
  styleUrls: ['./companies.component.css']
})
export class CompaniesComponent {
  @ViewChild('fileUpload') fileUpload!: MdbFileUploadComponent;

in our src\app\app.module.ts :

import { MdbFileUploadModule } from 'mdb-angular-file-upload';

. . .

imports: [
MdbFileUploadModule
  ],

It does not show the preview


Rafał Seifert staff commented 4 months ago

We have double checked this issue and it seems that we do not support .webp format indeed. We will look into this as it seems like a bug and we will try to address this problem in the nearest release. For now we support only those formats: ['png', 'jpg', 'jpeg', 'bmp', 'gif']


DEVGASA priority answered 4 months ago


we have the same problem . any fix @Rafał Seifert ?

https://mdbootstrap.com/img/Photos/Others/images/89.webp'" [removeBtn] ="'Eliminar'" [defaultMsg]="'Seleccione Logo'" [previewMsg]="'Arrastre o haga click para seleccionar otro archivo'" (fileAdded)="onFileAdded($event)">

but this mdb-file-upload is into a modal


Rafał Seifert staff commented 4 months ago

Could you provide code sample how you implement your file upload? And have you checked for any console errors? Do you import MdbFileUploadModule correctly?


Nicholson Percy free commented 3 weeks ago

@space bar clicker Waiting for your reply



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 6.0.0
  • Device: Dell
  • Browser: Chrome
  • OS: Window 10
  • Provided sample code: No
  • Provided link: No