Choose files type/extension (mimetype)

[gauravkrp]

Currently Directus allows to upload any file type when selecting field type as file or files while creating. Only Images are specifically supported. I had multiple usecases where we needed to upload specific files such as pdf, csv or mp4 (videos).

Feature Request - Option to select what mimetypes a given file type field would allow. Either a multi select dropdown to allow for images, pdfs, videos or a string to pass option like image/jpeg, application/pdf etc

[joselcvarela]

Only Images are specifically supported
What does this mean? We support preview of image, video and audio files.

In the meantime (I think this is already somewhere here), you can listen to action files.upload and throw an error if file is not what you are expecting. Although you also need to delete the file since all the upload needs to happen.
Also you can create a custom endpoint to achieve that, but I believe it's more complex.

[3zzy]

Can't throw an error and delete the file within the same action I believe.
Edited to add: Ah, turns out can't even show the error thrown from the action, must be in a filter which isn't available for files.
Is there a workaround?

[daawaan4U]

@3zzy copy/pasting the file interfaces into a separate package as an extension and then modifying the input element to filter specific file types only is probably the only way at this point

[benosman]

I also needed a similar restriction on filetype and looked at using the files.upload action.

It's a pity there isn't a files.upload filter where an error could be thrown before the upload takes place. I have a poc of this, but the issue is you then need to pass in and deal with a stream.

[LudovicSterlin]

Could we open a Feature Request on a filter event for file.upload. Is that already discussed somewhere ?

[rijkvanzanten]

Go for it! I didn't see any open feature requests on that as of right now 🙂

[dreerr]

Is there any news on that topic? The only way I see now is to do all of this with a seperate custom endpoint and upon successful validation (including busboy) passing it on to the directus files.

edit: I want to use a captcha for file upload including form fields.

[MentalGear]

Also, the mine type validation should be done on front and backend.

[piotr-cz]

Here is my workaround using Custom API Hooks, given that I'd like to allow only image/jpeg type on the image field of news collection:

import { defineHook } from '@directus/extensions-sdk';
import type { FailedValidationException as TFailedValidationException } from '@directus/shared/exceptions';
import type { FilterHandler } from '@directus/shared/types';
import type { ItemsService } from 'directus/dist/services';
import type { File } from 'directus/dist/types';
// import { validatePayload } from '@directus/shared/utils';

export default defineHook(async ({ filter }, { exceptions, services, getSchema }) => {
	const { FailedValidationException }: { FailedValidationException: typeof TFailedValidationException } = exceptions;
	const { FilesService } = services;

	const filesService: ItemsService<File> = new FilesService({
		schema: await getSchema(),
	});

	const filterHandler: FilterHandler<{ image?: string | null }> = async (payload) => {
		if (payload.image) {
			const file = await filesService.readOne(payload.image);

			if (file?.type !== 'image/jpeg') {
				throw new FailedValidationException({
					message: '"image.type" must be [image/jpeg]',
					path: ['image', 'type'],
					type: 'any.only',
					context: {
						valids: ['image/jpeg'],
						label: 'image.type',
						value: file.type,
						key: 'type',
					},
				});
			}

			/*
			// Using directus validatePayload
			const validationErrors = validatePayload(
				{ "_and": [{"image": {"type": {"_eq": "image/jpeg"}}}] },
				{ image: file }
			);


			if (validationErrors[0] && validationErrors[0].details[0]) {
				throw new FailedValidationException(validationErrors[0].details[0]);
			}
			// */
		}

		return payload;
	};

	filter('news.items.create', filterHandler as FilterHandler);
	filter('news.items.update', filterHandler as FilterHandler);
});

[martinsotirov]

This doesn't work for me. I get You don't have permission to access this. when I try to get the file with FilesService in my extension.

[martinsotirov]

Never mind, it turned out only fileService.readMany has problems with permissions. When I iterate over the files of my gallery and get them one by one with fileService.readOne, it works.

[rijkvanzanten]

Heya! Thanks for opening this feature request!

This feature request has received over 15 votes from the community. This means we'll move this feature request to the Under Review state!

The Core team will schedule a meeting to review this request as soon as possible. The discussion will then be approved or denied. You may or may not be invited to join this meeting with the core team.

For more information, see our Feature Request Process.

[dbelyaeff]

Is there any progress? 10th of May was half a year ago :-)

[terrxo]

1 year as of now :)

[LasseRosenow]

This is not meant as an offense, but please don't ping this discussion without actually contributing new ideas or opinions. :)
I think the Directus Team has a lot of work and they will take care of this if they find time to do it.

Posting things like this post only annoys all the many people who are subscribed to discussion who then see that there is nothing new except someone asking if there is something new. Just be more patient please.

You maybe think that it is not a big problem, but there are many people always posting these kind of questions everywhere and these days my github notifications are getting more and more flooded with posts like these. :)

So just a small reminder here :) Nothing personal, I think it is normal to feel frustrated :)