import { type BreadcrumbItem } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { X } from 'lucide-react'; import { FormEventHandler, useState } from 'react'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { SaveButton } from '@/components/save-button'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { useTranslation } from '@/hooks/use-translation'; import AppLayout from '@/layouts/app-layout'; interface UploadSettingsProps { max_file_size_mb: number; upload_type_restriction: string; allowed_upload_extensions: string[]; } export default function UploadSettings({ max_file_size_mb, upload_type_restriction, allowed_upload_extensions }: UploadSettingsProps) { const { t } = useTranslation(); const [newExtension, setNewExtension] = useState(''); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Settings'), href: '/system/settings' }, { title: t('Uploads'), href: '/system/settings/uploads' }, ]; const restrictionOptions: { value: string; label: string }[] = [ { value: 'none', label: t('Nobody (no restriction)') }, { value: 'clients', label: t('Clients only') }, { value: 'all', label: t('Everyone') }, ]; const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({ max_file_size_mb: String(max_file_size_mb), upload_type_restriction: upload_type_restriction, allowed_upload_extensions: allowed_upload_extensions, }); const addExtension = () => { const extension = newExtension.trim().toLowerCase().replace(/^\./, ''); if (extension === '' || data.allowed_upload_extensions.includes(extension)) return; setData('allowed_upload_extensions', [...data.allowed_upload_extensions, extension]); setNewExtension(''); }; const removeExtension = (extension: string) => { setData( 'allowed_upload_extensions', data.allowed_upload_extensions.filter((existing) => existing !== extension), ); }; const submit: FormEventHandler = (e) => { e.preventDefault(); patch(route('system-settings.uploads.update')); }; return (
setData('max_file_size_mb', e.target.value)} />

{t('Set to 0 for no limit. Available disk space still applies.')}

{t('Accounts covered by this setting may only upload files whose extension is on the allowed list below.')}

{t('Be careful when changing this list — it can affect the security of this installation.')}

setNewExtension(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addExtension(); } }} className="w-48" />
{data.allowed_upload_extensions.length === 0 && (

{t('No extensions added yet.')}

)} {data.allowed_upload_extensions.map((extension) => ( .{extension} ))}
); }