Fix multi-image selection when mime type is missing
This commit is contained in:
@@ -147,4 +147,20 @@ describe('UploadScreen', () => {
|
|||||||
});
|
});
|
||||||
expect(addToQueueMock).not.toHaveBeenCalled();
|
expect(addToQueueMock).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('accepts image files with empty mime type when extension is valid', async () => {
|
||||||
|
const { container } = render(
|
||||||
|
<EventDataProvider token="token">
|
||||||
|
<UploadScreen />
|
||||||
|
</EventDataProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
const input = container.querySelector('input[type="file"]') as HTMLInputElement;
|
||||||
|
const file = new File(['rawdata'], 'from-library.jpg', { type: '' });
|
||||||
|
|
||||||
|
fireEvent.change(input, { target: { files: [file] } });
|
||||||
|
|
||||||
|
expect(await screen.findByLabelText('Remove photo')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('{count} photos selected')).toBeInTheDocument();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -25,6 +25,16 @@ type SelectedPreview = {
|
|||||||
url: string;
|
url: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const IMAGE_FILE_EXTENSION_PATTERN = /\.(avif|bmp|gif|heic|heif|jpeg|jpg|png|webp)$/i;
|
||||||
|
|
||||||
|
function isImageFile(file: File): boolean {
|
||||||
|
if (typeof file.type === 'string' && file.type.toLowerCase().startsWith('image/')) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return IMAGE_FILE_EXTENSION_PATTERN.test(file.name);
|
||||||
|
}
|
||||||
|
|
||||||
function getTaskValue(task: TaskItem, key: string): string | undefined {
|
function getTaskValue(task: TaskItem, key: string): string | undefined {
|
||||||
const value = task?.[key as keyof TaskItem];
|
const value = task?.[key as keyof TaskItem];
|
||||||
if (typeof value === 'string' && value.trim() !== '') return value;
|
if (typeof value === 'string' && value.trim() !== '') return value;
|
||||||
@@ -374,7 +384,7 @@ export default function UploadScreen() {
|
|||||||
const handleFiles = React.useCallback(
|
const handleFiles = React.useCallback(
|
||||||
async (fileList: FileList | null) => {
|
async (fileList: FileList | null) => {
|
||||||
if (!fileList) return;
|
if (!fileList) return;
|
||||||
const files = Array.from(fileList).filter((file) => file.type.startsWith('image/'));
|
const files = Array.from(fileList).filter((file) => isImageFile(file));
|
||||||
if (files.length === 0) {
|
if (files.length === 0) {
|
||||||
setError(t('uploadV2.errors.invalidFile', 'Please choose a photo file.'));
|
setError(t('uploadV2.errors.invalidFile', 'Please choose a photo file.'));
|
||||||
return;
|
return;
|
||||||
|
|||||||
Reference in New Issue
Block a user