WiP on filtering by mime types

Author: jrief

client/browser/FileSelectDialog.tsx

@@ -91,7 +91,7 @@ const FilesList = memo((props: any) => {
 
 
 const FileSelectDialog = forwardRef((props: any, forwardedRef) => {
-	const {realm, baseUrl, csrfToken} = props;
+	const {realm, baseUrl, mimeTypes, csrfToken} = props;
 	const [structure, setStructure] = useState({
 		root_folder: null,
 		last_folder: null,
@@ -188,6 +188,7 @@ const FileSelectDialog = forwardRef((props: any, forwardedRef) => {
 	async function fetchFiles() {
 		const fetchUrl = (() => {
 			const params = new URLSearchParams();
+			mimeTypes.forEach(type => params.append('mimetypes', type));
 			if (structure.recursive) {
 				params.set('recursive', '');
 			}

client/browser/FinderFileSelect.tsx

@@ -1,25 +1,19 @@
-import React, {RefObject, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import FileSelectDialog from './FileSelectDialog';
 
 
 export default function FinderFileSelect(props) {
 	const shadowRoot = props.container;
-	const hostRef = useRef(shadowRoot.host);
 	const baseUrl = props['base-url'];
 	const styleUrl = props['style-url'];
+	const mimeTypes = props['mime-types'] ? props['mime-types'].split(',') : [];
 	const selectRef = useRef(null);
 	const slotRef = useRef(null);
 	const dialogRef = useRef(null);
 	const [selectedFile, setSelectedFile] = useState({});
 	const csrfToken = getCSRFToken();
 	const uuid5Regex = new RegExp(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i);
 
-	useMutationObserver(hostRef, (mutationList) => {
-		for (const mutation of mutationList) {
-			console.log(`The ${mutation.attributeName} attribute was modified.`);
-		}
-	}, {attributes: true});
-
 	useEffect(() => {
 		// Create a styles element for the shadow DOM
 		const link = document.createElement('link');
@@ -147,6 +141,7 @@ export default function FinderFileSelect(props) {
 				ref={selectRef}
 				realm={props.realm}
 				baseUrl={baseUrl}
+				mimeTypes={mimeTypes}
 				csrfToken={csrfToken}
 				selectFile={selectFile}
 				dialogRef={dialogRef}

client/finder-select.ts

@@ -6,7 +6,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
 	window.customElements.define(
 		'finder-file-select',
 		r2wc(FinderFileSelect, {
-			props: {'base-url': 'string', 'style-url': 'string', realm: 'string'},
+			props: {'base-url': 'string', 'style-url': 'string', realm: 'string', 'mime-types': 'string'},
 			shadow: 'open',
 		}),
 	);

finder/browser/views.py

@@ -6,7 +6,6 @@
 from django.utils.html import strip_spaces_between_tags
 from django.utils.safestring import mark_safe
 from django.views import View
-from django.views.decorators.http import last_modified
 
 from finder.lookups import annotate_unified_queryset, lookup_by_label, sort_by_attribute
 from finder.models.file import FileModel
@@ -154,6 +153,8 @@ def list(self, request, folder_id):
         offset = int(request.GET.get('offset', 0))
         recursive = 'recursive' in request.GET
         lookup = lookup_by_label(request)
+        if mime_types := request.GET.getlist('mimetypes'):
+            lookup['mime_types'] = mime_types
         if recursive:
             descendants = FolderModel.objects.get(id=folder_id).descendants
             if isinstance(descendants, QuerySet):

finder/forms/fields.py

@@ -6,6 +6,17 @@
 
 class FinderFileField(UUIDField):
     widget = FinderFileSelect
+    mime_types = None
+    realm = 'admin'
+
+    def __init__(self, mime_types=None, *args, **kwargs):
+        if isinstance(mime_types, (list, tuple)):
+            self.mime_types = mime_types
+        super().__init__(*args, **kwargs)
+
+    def widget_attrs(self, widget):
+        widget.mime_types = self.mime_types
+        return super().widget_attrs(widget)
 
 
 class LabelsChoiceField(ModelMultipleChoiceField):

finder/forms/widgets.py

@@ -12,6 +12,8 @@
 
 class FinderFileSelect(TextInput):
     template_name = 'finder/widgets/finder_file_select.html'
+    mime_types = None
+    realm = 'admin'
 
     class Media:
         css = {'all': ['finder/css/finder-select.css']}
@@ -39,6 +41,8 @@ def get_context(self, name, value, attrs):
             realm='admin',
             style_url=static('finder/css/finder-browser.css'),
         )
+        if isinstance(self.mime_types, (list, tuple)) and self.mime_types:
+            context['mime_types'] = ','.join(self.mime_types)
         return context
 
     def format_value(self, value):

finder/templates/finder/widgets/finder_file_select.html

@@ -1 +1 @@
-<finder-file-select base-url="{{ base_url }}" style-url="{{ style_url }}" realm="{{ realm }}">{% include "django/forms/widgets/input.html" %}</finder-file-select>
+<finder-file-select base-url="{{ base_url }}" style-url="{{ style_url }}" realm="{{ realm }}"{% if mime_types %} mime-types="{{ mime_types }}"{% endif %}>{% include "django/forms/widgets/input.html" %}</finder-file-select>