It does not work defaultPreview in mdb-file-upload .webp for

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

Germanj10 priority asked 2 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 2 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?

Add comment

DEVGASA priority answered 1 month ago

0 0 Best answer

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

<a href="https://mdbootstrap.com/docs/angular/plugins/file-upload/" target="_blank">https://mdbootstrap.com/docs/angular/plugins/file-upload/</a>

in our companies.componet.ts

<pre class="prettyprint"><code>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;
</code></pre>

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

<pre class="prettyprint"><code>import { MdbFileUploadModule } from 'mdb-angular-file-upload';
</code></pre>

.
.
.

<pre class="prettyprint"><code>imports: [
MdbFileUploadModule
 ],
</code></pre>

It does not show the preview

Please insert min. 20 characters.

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 1 month 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']

Add comment

DEVGASA priority answered 1 month ago

0 0 Best answer

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 1 month 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?

Add comment

Write

Create snippet

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

Germanj10

0Support score
1Questions 0Answers 0Snippets