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

Add comment

DEVGASA priority answered 4 months 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 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']

Add comment

DEVGASA priority answered 4 months 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 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 2 weeks ago

@space bar clicker Waiting for your reply

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