File upload plugin - accepted extensions error


Topic: File upload plugin - accepted extensions error

ictalsila pro premium priority asked 3 months ago

when setting the accepted formats, some formats works as intended such as ".pdf"other formats such as ".xlsx", ".js" and ".data" will make "Your file has incorrect file format (correct format(s) .xlsx)" error although the file that were selected is correct

enter image description here

enter image description here

https://mdbootstrap.com/snippets/standard/ictalsila/3771404


Michał Duszak staff answered 3 months ago

Hello, thank you for your feedback. We will fix this issue in the future.

Until then you can fix this problem on your own responsibility in the source code by modyfing _checkAcceptedExtensions(file) method and build it with help of these instructions: https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/#section-custom-version-of-mdb-ui-kit

All you need to do is to handle different mime types. Method should look like this:

_checkAcceptedExtensions(file) {

    const mimeTypes = [
      { mime_type: 'application/x-abiword', ext: '.abw' },
      { mime_type: 'application/x-freearc', ext: '.arc' },
      { mime_type: 'video/x-msvideo', ext: '.avi' },
      { mime_type: 'application/vnd.amazon.ebook', ext: '.azw' },
      { mime_type: 'application/octet-stream', ext: '.bin' },
      { mime_type: 'application/x-bzip', ext: '.bz' },
      { mime_type: 'application/x-bzip2', ext: '.bz2' },
      { mime_type: 'application/x-cdf', ext: '.cda' },
      { mime_type: 'application/x-csh', ext: '.csh' },
      { mime_type: 'application/msword', ext: '.doc' },
      {
        mime_type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        ext: '.docx',
      },
      { mime_type: 'application/vnd.ms-fontobject', ext: '.eot' },
      { mime_type: 'application/epub+zip', ext: '.epub' },
      { mime_type: 'application/gzip', ext: '.gz' },
      { mime_type: 'text/html', ext: '.htm' },
      { mime_type: 'image/vnd.microsoft.icon', ext: '.ico' },
      { mime_type: 'text/calendar', ext: '.ics' },
      { mime_type: 'application/java-archive', ext: '.jar' },
      { mime_type: 'text/javascript', ext: '.js' },
      { mime_type: 'application/json', ext: '.json' },
      { mime_type: 'application/ld+json', ext: '.jsonld' },
      { mime_type: 'audio/midi', ext: '.midi' },
      { mime_type: 'text/javascript', ext: '.mjs' },
      { mime_type: 'audio/mpeg', ext: '.mp3' },
      { mime_type: 'video/mp4', ext: '.mp4' },
      { mime_type: 'video/mpeg', ext: '.mpeg' },
      { mime_type: 'application/vnd.apple.installer+xml', ext: '.mpkg' },
      { mime_type: 'application/vnd.oasis.opendocument.presentation', ext: '.odp' },
      { mime_type: 'application/vnd.oasis.opendocument.spreadsheet', ext: '.ods' },
      { mime_type: 'application/vnd.oasis.opendocument.text', ext: '.odt' },
      { mime_type: 'audio/ogg', ext: '.oga' },
      { mime_type: 'video/ogg', ext: '.ogv' },
      { mime_type: 'application/ogg', ext: '.ogx' },
      { mime_type: 'audio/opus', ext: '.opus' },
      { mime_type: 'font/otf', ext: '.otf' },
      { mime_type: 'application/x-httpd-php', ext: '.php' },
      { mime_type: 'application/vnd.ms-powerpoint', ext: '.ppt' },
      {
        mime_type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
        ext: '.pptx',
      },
      { mime_type: 'application/vnd.rar', ext: '.rar' },
      { mime_type: 'application/x-sh', ext: '.sh' },
      { mime_type: 'image/svg+xml', ext: '.svg' },
      { mime_type: 'application/x-shockwave-flash', ext: '.swf' },
      { mime_type: 'application/x-tar', ext: '.tar' },
      { mime_type: 'text/plain', ext: '.txt' },
      { mime_type: 'application/vnd.visio', ext: '.vsd' },
      { mime_type: 'audio/webm', ext: '.weba' },
      { mime_type: 'application/xhtml+xml', ext: '.xhtml' },
      { mime_type: 'application/vnd.ms-excel', ext: '.xls' },
      { mime_type: 'application/vnd.mozilla.xul+xml', ext: '.xul' },
      { mime_type: 'video/3gpp', ext: '.x3gp' },
      { mime_type: 'application/x-7z-compressed', ext: '.7z' },
    ];


    const extensionsForMapping = [
      '.abw',
      '.arc',
      '.avi',
      '.azw',
      '.bin',
      '.bz',
      '.bz2',
      '.cda',
      '.csh',
      '.doc',
      '.docx',
      '.eot',
      '.epub',
      '.gz',
      '.htm',
      '.ico',
      '.ics',
      '.jar',
      '.js',
      '.json',
      '.jsonld',
      '.midi',
      '.mjs',
      '.mp3',
      '.mp4',
      '.mpeg',
      '.mpkg',
      '.odp',
      '.ods',
      '.odt',
      '.oga',
      '.ogv',
      '.ogx',
      '.opus',
      '.otf',
      '.php',
      '.ppt',
      '.pptx',
      '.rar',
      '.sh',
      '.svg',
      '.swf',
      '.tar',
      '.txt',
      '.vsd',
      '.weba',
      '.xhtml',
      '.xls',
      '.xul',
      '.x3gp',
      '.7z',
    ];

    const { acceptedExtensions, formatError } = this.options;

    if (acceptedExtensions.length) {
      const fileMainType = file.type.split('/')[0];
      let fileSecondType = file.type.split('/')[1];

      let isFormatAgree = false;
      acceptedExtensions.forEach((format) => {
        const isMappingNeeded = extensionsForMapping.indexOf(format.trim()) > -1;
        if (isMappingNeeded) {
          fileSecondType = mimeTypes.find((mimeType) => mimeType['ext'] === format.trim())['ext'];
        }

        if (format.includes('/*') && format.includes(fileMainType)) {
          isFormatAgree = true;
        } else if (
          format.includes('/') &&
          format.includes(fileMainType) &&
          format.includes(fileSecondType)
        ) {
          isFormatAgree = true;
        } else if (format.includes(fileSecondType)) {
          isFormatAgree = true;
        }
      });

      if (!isFormatAgree) {
        this._errors.push(formatError.replace('~~~', acceptedExtensions));
        if (this.options.multiple) {
          this._files = this._files.filter((currentFile) => currentFile.id !== file.id);
        }
      }
    }
  }

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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.11.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes