File upload plugin not showing icons


Topic: File upload plugin not showing icons

gllermaly asked 5 years ago

Expected behavior Upload box to show icon before uploading (up arrow)

After uploading (file extension)

Actual behavior No icon before upload Blank box after uploading

Resources (screenshots, code snippets etc.) Default box Screenshot:

before upload https://i.gyazo.com/3c93fa6b88dde495240e7f82b26c8ab0.png after upload https://i.gyazo.com/87e9aa8268c4404582c06ea1c36b42e1.png


Jakub Chmura staff premium answered 5 years ago

hi@gllermaly,

I can't reproduce your problem. In every configuration FileUpload component works fine for me.

Code snippet:

import React from 'react';
import { MDBCol } from 'mdbreact';
import MDBFileupload from 'mdb-react-fileupload';

const usageExamples = () => {
  return (
    <>
      <MDBCol className='mt-5'>
        <h2 className='secondary-heading my-4'>Custom Support Example</h2>
        <MDBFileupload
          name='file'
          messageDefault='Arrastre archivo SII aqui o haga click para subir'
          messageReplace='Arrastre o click para reemplazar'
          messageRemove='Eliminar'
          messageError='Error'
          allowedFileExtensions={['xls', 'csv', 'xlsx']}
          errorFileSize='Archivo supera el maximo de 1MB'
          errorFileExtension='Formatos permitidos: xls, csv, xlsx'
          maxFileSize='1M'
          getValue={v => setArchivo(v)}
        />
      </MDBCol>
    </>
  );
};

export default usageExamples;

Example before upload:

Before upload

Example after the upload: enter image description here

And video: https://monosnap.com/file/zqsf5MsZXkDRejVRwKPVdV9VH4X8qS

I suggest you to :

  1. Delete the plugin folder.
  2. Download a new, clear one, from mdbootstrap.com
  3. Unzip the folder and install dependency by npm install command in the console.
  4. After that try to load the demo app from the plugin folder and paste your code there.
  5. If this solution will work for you then you need to check your project because there must be a source of the problem.

I hope it helps you with this issue.

Check if it works and be sure to let me know if this solves the problem.

Best regards,

Kuba


Jakub Chmura staff premium answered 5 years ago

Hi @gllermaly,

I just tested this plugin and it works fine for me.

Today wy released a new MDB React version, so please update to newest version and check again.

If after the update it still won't work, please send me your code example and I try to figure out whats is wrong with this.

Best regards,

Kuba


gllermaly answered 5 years ago

Hello @Jakub Chmura . Just updated mdbreact to 4.22 and problem persists.

I'm using file upload 4.16.0

Attached is the code of my component :

          <MDBFileupload
        name="file"
        messageDefault="Arrastre archivo SII aqui o haga click para subir"
        messageReplace="Arrastre o click para reemplazar"
        messageRemove="Eliminar"
        messageError="Error"
        allowedFileExtensions={["xls", "csv", "xlsx"]}
        errorFileSize="Archivo supera el maximo de 1MB"
        errorFileExtension="Formatos permitidos: xls, csv, xlsx"
        maxFileSize="1M"
        getValue={v => setArchivo(v)}
      />

Jakub Chmura staff premium answered 5 years ago

Thank you for your feedback!

I added a task for your case, we will try to fix this issue as soon as possible. If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba


gllermaly answered 5 years ago

@Jakub Chmura

Thanks.

This is a really frustrating situation. I have few time and my idea of paying for this component was to be able to use it out of the box :(


Jakub Chmura staff premium commented 5 years ago

I am very sorry for the situation, we have just started working on this issue and we will do our best to fix this bug as soon as possible.

Best regards,

Kuba


gllermaly answered 5 years ago

No luck yet. Please help !! , I can give you access to my repo or attach you the project if needed.

@Jakub Chmura

Thanks


Jakub Chmura staff premium commented 5 years ago

Hi, We tried to fix this, none of us managed to reproduce the issue. It works well on our projects.

If you can, please add me to your repo. Maybe the answer is in your code.

Please let me know what data you need to add me to your repo.

Best regards,

Kuba


gllermaly commented 5 years ago

@Jakub Chmura Please give me your email. Weird thing is I'm using MDB React PRO as library.


Jakub Chmura staff premium commented 5 years ago

@gllermaly

I sent you my email address in a private message


gllermaly commented 5 years ago

where are private messages??? I'm gllermaly at gmail ,you can find me there


gllermaly answered 5 years ago

Close please @Jakub Chmura I had to add this line :

import "@fortawesome/fontawesome-free/css/all.min.css";

To index.js in my project

Thanks


Jakub Chmura staff premium answered 5 years ago

@gllermaly

Great to hear that you've solved the problem!

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba


FREE CONSULTATION

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

Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.21.1
  • Device: Macbook pro
  • Browser: Chrome
  • OS: mcOS sierra
  • Provided sample code: No
  • Provided link: Yes
Tags