📂 refactor: File Type Inference for Frontend File Validation (#10807)
Some checks failed
Docker Dev Branch Images Build / build (Dockerfile, lc-dev, node) (push) Waiting to run
Docker Dev Branch Images Build / build (Dockerfile.multi, lc-dev-api, api-build) (push) Waiting to run
Docker Dev Images Build / build (Dockerfile, librechat-dev, node) (push) Has been cancelled
Docker Dev Images Build / build (Dockerfile.multi, librechat-dev-api, api-build) (push) Has been cancelled
Sync Locize Translations & Create Translation PR / Sync Translation Keys with Locize (push) Has been cancelled
Sync Locize Translations & Create Translation PR / Create Translation PR on Version Published (push) Has been cancelled

- Introduced `inferMimeType` utility to improve MIME type detection for uploaded files, including support for HEIC and HEIF formats.
- Updated DragDropModal to utilize the new inference logic for validating file types, ensuring compatibility with various document upload providers.
- Added comprehensive tests for `inferMimeType` to cover various scenarios, including handling of unknown extensions and preserving browser-provided types.
This commit is contained in:
Danny Avila 2025-12-04 14:24:10 -05:00 committed by GitHub
parent 754b495fb8
commit f55bd6f99b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 101 additions and 19 deletions

View file

@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { OGDialog, OGDialogTemplate } from '@librechat/client';
import {
inferMimeType,
EToolResources,
EModelEndpoint,
defaultAgentCapabilities,
@ -56,18 +57,26 @@ const DragDropModal = ({ onOptionSelect, setShowModal, files, isVisible }: DragD
const _options: FileOption[] = [];
const currentProvider = provider || endpoint;
/** Helper to get inferred MIME type for a file */
const getFileType = (file: File) => inferMimeType(file.name, file.type);
// Check if provider supports document upload
if (isDocumentSupportedProvider(endpointType) || isDocumentSupportedProvider(currentProvider)) {
const isGoogleProvider = currentProvider === EModelEndpoint.google;
const validFileTypes = isGoogleProvider
? files.every(
(file) =>
file.type?.startsWith('image/') ||
file.type?.startsWith('video/') ||
file.type?.startsWith('audio/') ||
file.type === 'application/pdf',
)
: files.every((file) => file.type?.startsWith('image/') || file.type === 'application/pdf');
? files.every((file) => {
const type = getFileType(file);
return (
type?.startsWith('image/') ||
type?.startsWith('video/') ||
type?.startsWith('audio/') ||
type === 'application/pdf'
);
})
: files.every((file) => {
const type = getFileType(file);
return type?.startsWith('image/') || type === 'application/pdf';
});
_options.push({
label: localize('com_ui_upload_provider'),
@ -81,7 +90,7 @@ const DragDropModal = ({ onOptionSelect, setShowModal, files, isVisible }: DragD
label: localize('com_ui_upload_image_input'),
value: undefined,
icon: <ImageUpIcon className="icon-md" />,
condition: files.every((file) => file.type?.startsWith('image/')),
condition: files.every((file) => getFileType(file)?.startsWith('image/')),
});
}
if (capabilities.fileSearchEnabled && fileSearchAllowedByAgent) {