Which mimetype should lottie files use?

[Sorunome]

Which mimetype should lottie files use? Content transmitted over http is expected to have a mimetype, and a general application/json does not flag it as a lottie file, so perhaps defining a mimetype for lottie would be reasonable.

As a suggestion, perhaps image/lottie+json could work? But this would ofc. need to be properly documented and then actually used.

[Nerdies24]

For dotLottie (lottie) files, application/zip is a possible mimetype.

Possible WordPress Filter:

function cc_mime_types($mimes) {
    $mimes['txt'] = 'text/plain';
    $mimes['json'] = 'application/json';
    $mimes['lottie'] = 'application/zip';
    return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

[deepbluev7]

application/zip isn't really a good mimetype, since it is pretty much indistinguishable from zip files. It would have to be application/zip+lottie or something similar.

[vanniktech]

It would have to be application/zip+lottie or something similar.

Agreed. However I'd switch them around. Given that there is image/svg+xml (SVG file is XML), for now I am using application/lottie+json for the JSON format, for the zip one, one could use application/lottie+zip.

[joe-westcott]

For anyone who's a little dense like me and not sure what to do about the code, here's a solution that enables you to use a custom MIME type for dotLottie files in the Media Library.

This builds on Nerdies24's excellent code solution and vanniktech's suggested custom MIME type for dotLottie files, although in this case, I'm intentionally limiting support to dotLottie files and not classic Lottie JSON files, explained below.

You could extend this code to classify all JSON files as Lottie files, and you'll need to consider what you want to do about JSON files that are not actually Lottie files, such as if you use JSON files for other items such as interactive charts or other future features that rely on JSON. That gets confusing for end users in terms of naming and organizing, and dotLottie is the new standard for Lottie files, so in this code, I'm choosing to not support the classic JSON Lottie format. But you can choose to support the old format if you wish, of course!

You can add this code to your theme's functions.php file or a custom plugin.

WordPress dotLottie support

/** 
 * Registers custom MIME types.
 * A MIME type is needed for WP to enable custom file type uploads in the Media Library.
 */
function add_custom_mime_types($mime_types) {
    $mime_types['lottie'] = 'application/lottie+zip'; // Adds .lottie extension for dotLottie files
    return $mime_types;
}
add_filter('upload_mimes', 'add_custom_mime_types');

/**
 * Add Media Library filter to help users filter by custom file types.
 */
function edit_post_mime_types($post_mime_types) {
    $post_mime_types['application/lottie+zip'][0] = 'Lottie (dotLottie)';
    return $post_mime_types;
}
add_filter('post_mime_types', 'edit_post_mime_types');

This will add a new "Lottie (dotLottie)" option to your Media Library as seen in this screenshot:

This will also add a new "application/lottie+zip" option when you're in the media upload / select file dialog, as seen in this screenshot:

Unfortunately, I don't know of a way to change the "Select File" upload filter to show a more user-friendly name like "Lottie (dotLottie)" without breaking the ability to upload .lottie files, due to what seems like a limitation in how WordPress handles custom MIME types or maybe just my own failure of imagination.

Maybe someone else can offer an improved solution that keeps the "Select File" filter names consistent and user friendly, while also ensuring that the resulting code will still enable people to upload .lottie files.

[aliharis]

Hey everyone,

Haris here from LottieFiles. Over the past year, we've had ongoing discussions with some of our users about establishing a standard MIME type for dotLottie files. After careful consideration, we've decided to go with application/zip+dotlottie.

We've also updated the official documentation to reflect this change. You can check it out here: https://dotlottie.io/structure/#dotlottie-structure