Mimetypes of Dropzone

Help & Support 💻 How-to's
1

Hello,

I’m currently working on an app for translating e-learning courses. The workflow starts by downloading the XLIFF (XML Localization Interchange File Format) file and uploading it to my UI Bakery app. I wanted to limit the uploads of a dropzone component to the mimetypes of these files, namely application/xliff+xml and application/x-xliff+xml, but those aren’t recognized.

Is there any way to get these types recognized or does that have to be done on UI Bakery’s side?

Also tried with other XML-related types like application/xml, text/xml and more, but none worked.

2

Hi @Max

We will have a look.

1 Like
3

Hi @Max
Do you have any file examples you would like to upload?
They might not contain the information, but we are mostly interested in their mime type.
Thanks!

4

Hello @Kate,

I will send you some example files by email.

I think this mimetype could be interesting for UI Bakery, since it is perfect for making an app to handle translation files like these.

1 Like
5

@Max thank you for the files. So, we have the following outcome of our investigation:
According to the specification, type detection in this case is not guaranteed.
In short, we cannot guarantee validation for this particular type based on MIME types because the JS File API cannot recognize it.

As a workaround, we can suggest using a custom validator:

const ACCEPTED_EXTENSIONS = ['.xlf', '.xliff']; 

const isValidFileExtension = (file) => {
  if (!file || !file.name) {
    return false;
  }
  const fileNameLower = file.name.toLowerCase();
  return ACCEPTED_EXTENSIONS.some(ext => fileNameLower.endsWith(ext));
};

let filesToValidate = [];

if (Array.isArray(params)) {
  filesToValidate = params;
} else if (params !== null) {
  filesToValidate = [params];
}

let validationError = null;

const allFilesValid = filesToValidate.every(isValidFileExtension);

if (filesToValidate.length > 0 && !allFilesValid) {
  validationError = `Unsupported file type. Only ${ACCEPTED_EXTENSIONS.join(', ')} are acceptable`;
}

return validationError;

For the time being, we are not planning to fix it, since there is a workaround available and our focus is shifted towards AI development, but we can still reconsider it if we get more requests like yours.
Thank you!

2 Likes
6

That works for me. Thanks for investigating!

1 Like