Topic: Unable to upload .py and .rb file (mdb-angular-file-upload v8.0.0)

Kinanda Nugraha priority asked 1 month ago


mdb-angular-file-upload v8.0.0 Unable to upload .py and .rb file

TS:

ACCEPTED_EXTENSIONS = [
    '.c', '.cpp', '.css', '.csv', '.doc', '.docx', '.gif', '.go', '.html', '.java',
    '.jpeg', '.jpg', '.js', '.json', '.md', '.pdf', '.php', '.pkl', '.png', '.pptx',
    '.py', '.rb', '.tar', '.tex', '.ts', '.txt', '.webp', '.xlsx', '.xml', '.zip',
].join(',');

HTML:

<mdb-file-upload
    ...
    [acceptedExtensions]="ACCEPTED_EXTENSIONS"
    ...
></mdb-file-upload>

HOW TO REPRODUCE:

Upload .py or .rb file

ERROR:

{
    "type": "formatError",
    "message": "Your file has unsupported file format. (Supported format: .c .cpp .css .csv .doc .docx .gif .go .html .java .jpeg .jpg .js .json .md .pdf .php .pkl .png .pptx .py .rb .tar .tex .ts .txt .webp .xlsx .xml .zip)"
}

Arkadiusz Idzikowski staff answered 1 month ago


This error probably occurs because the mime types associated with those extensions are not available in our list of supported mime types. You can always extend this list by using [mimeTypes] input. Here is an example:

HTML:

<mdb-file-upload [acceptedExtensions]="ACCEPTED_EXTENSIONS" (uploadError)="onUploadError($event)" [mimeTypes]="mimeTypes"></mdb-file-upload>

TS:

  mimeTypes = [
    { mime_type: 'text/x-python', ext: '.py' },
    { mime_type: 'text/x-ruby', ext: '.rb' },
  ];

  ACCEPTED_EXTENSIONS = [
    '.c',
    '.cpp',
    '.css',
    '.csv',
    '.doc',
    '.docx',
    '.gif',
    '.go',
    '.html',
    '.java',
    '.jpeg',
    '.jpg',
    '.js',
    '.json',
    '.md',
    '.pdf',
    '.php',
    '.pkl',
    '.png',
    '.pptx',
    '.py',
    '.rb',
    '.tar',
    '.tex',
    '.ts',
    '.txt',
    '.webp',
    '.xlsx',
    '.xml',
    '.zip',
  ].join(',');

  onUploadError(event: any): void {
    console.error('Upload error:', event);
  }

Kinanda Nugraha priority commented 1 month ago

Thanks for investigating and prompt reply. Unfortunately adding [mimeTypes] didn't help. Please let me know if you have any other workaround.


Arkadiusz Idzikowski staff commented 1 month ago

That is really strange because I just added the mimeTypes input to the code you provided and that resolved problem with .py or .rb files upload. Before that I was getting the Your file has unsupported file format error.

Do you use v8.0.0 of the plugin? Could you please provide more information on how to reproduce the bug even with [mimeTypes] input included?

I edited my post and added full HTML and TS code I used.


Kinanda Nugraha priority commented 3 weeks ago

Thanks, much appreciated. Yes I'm using plugin v8.0.0. But the project is using Angular 17, perhaps I need to upgrade to Angular 19 :(


Kinanda Nugraha priority commented 2 weeks ago

Same issue with Angular 19 and Plugin v8.0.0 I will write the details in separate comment.


Kinanda Nugraha priority commented 2 weeks ago

![Cannot upload .py and .rb file]

(https://usercontent.mdbootstrap.com/mdb-images/support/32b7228d-ce93-49b2-aaae-e55c2a766fba-Screenshot%202025-08-14%20at%208.31.06%E2%80%AFAM.jpg)

TS:

MAX_FILES_COUNT = 10;
MAX_FILE_SIZE = 50;
ACCEPTED_EXTENSIONS = [
  '.c', '.cpp', '.css', '.csv', '.doc', '.docx', '.gif', '.go', '.html', '.java',
  '.jpeg', '.jpg', '.js', '.json', '.md', '.pdf', '.php', '.pkl', '.png', '.pptx',
  '.py', '.rb', '.tar', '.tex', '.ts', '.txt', '.webp', '.xlsx', '.xml', '.zip',
].join(',');
MIME_TYPES = [
  { mime_type: 'text/x-python', ext: '.py' },
  { mime_type: 'text/x-ruby', ext: '.rb' },
];

HTML:

<mdb-file-upload #files 
  [height]="35" 
  (fileAdded)="onFileAdded($event)"
  (uploadError)="onUploadError($event)"
  [defaultPreview]="null"
  [removeBtnDisabled]="false" 
  [multiple]="true" 
  [maxFileQuantity]="MAX_FILES_COUNT"
  [disabled]="false"
  [acceptedExtensions]="ACCEPTED_EXTENSIONS"
  [mimeTypes]="MIME_TYPES"
  [maxFileSize]="MAX_FILE_SIZE" 
  [defaultMsg]="''"
  [formatError]="'ASK MY DOCS.FILEUPLOAD FORMATERROR' | translate"
  [mainError]="'ASK MY DOCS.FILEUPLOAD MAINERROR' | translate"
  [maxSizeError]="'ASK MY DOCS.FILEUPLOAD MAXSIZEERROR' | translate"
  [previewMsg]="''"
  [removeBtn]="''">
</mdb-file-upload>

Arkadiusz Idzikowski staff commented 2 weeks ago

Could you please provide more information about the reproduction steps? Do you get the error when you try to upload just a single .py or .rb file? Or do you try to upload multiple files at once (if so, then what types of files do you try to upload)?

Do you get the same error as mentioned in the first post ('unsupported file format')?


Kinanda Nugraha priority commented 2 weeks ago

Yes same error. I tried by uploading single .py or .rb file.

message: "Your file has unsupported file format. (Supported format: .c .cpp .css .csv .doc .docx .gif .go .html .java .jpeg .jpg .js .json .md .pdf .php .pkl .png .pptx .py .rb .tar .tex .ts .txt .webp .xlsx .xml .zip)"

type: "formatError"


Arkadiusz Idzikowski staff commented 1 week ago

Everything seems to work correctly if we click on the component and select a file using the file picker. However, errors appear when we try to add files via drag and drop. This is the only case in which we were able to reproduce the problem. Can you confirm whether it works similarly on your end?


Kinanda Nugraha priority commented 1 week ago

Using Chrome on Mac, it failed, both using file picker and drag and drop. Just now I tried using Chrome on Windows, it works using both.


Arkadiusz Idzikowski staff commented 1 week ago

Thanks, that will help us a lot to find the cause of the problem. I added the bug to our to-do list.



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 8.0.0
  • Device: Macbook M1 Pro
  • Browser: Chrome 138.0.7204.169
  • OS: MacOS 15.5
  • Provided sample code: No
  • Provided link: No