changed upload limit

This commit is contained in:
WeeXnes 2025-06-12 15:46:09 +02:00
parent b59f0e7816
commit 6e8bf31900
4 changed files with 74 additions and 76 deletions

View file

@ -1,4 +1,6 @@
import type {NextConfig} from 'next';
import { UPLOAD_LIMIT_MB } from '@/lib/config';
const nextConfig: NextConfig = {
/* config options here */
@ -20,7 +22,7 @@ const nextConfig: NextConfig = {
},
experimental: {
serverActions: {
bodySizeLimit: '50mb',
bodySizeLimit: `${UPLOAD_LIMIT_MB}mb`,
allowedOrigins: [
"https://weexnes.dev",
"https://weexnes.dev:6837",

View file

@ -1,7 +1,7 @@
"use client";
import { useRef, useState, useEffect, useActionState } from 'react'; // Updated import
import { useRef, useState, useEffect, useActionState } from 'react';
import { useFormStatus } from 'react-dom';
import { uploadFileAction } from '@/lib/actions/file.actions';
import { Button } from '@/components/ui/button';
@ -11,6 +11,7 @@ import { Progress } from '@/components/ui/progress';
import { useToast } from '@/hooks/use-toast';
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { UploadCloud, CheckCircle, XCircle, Loader2, File as FileIconLucide } from "lucide-react";
import { UPLOAD_LIMIT_MB } from '@/lib/config';
function SubmitButton() {
const { pending } = useFormStatus();
@ -24,33 +25,29 @@ function SubmitButton() {
export default function FileUploadForm() {
const initialState = { message: null, error: false, file: null };
// Updated to useActionState
const [state, dispatch, isPending] = useActionState(uploadFileAction, initialState);
const { toast } = useToast();
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [uploadProgress, setUploadProgress] = useState(0); // Mock progress
const [uploadProgress, setUploadProgress] = useState(0);
const formRef = useRef<HTMLFormElement>(null);
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file) {
setSelectedFile(file);
setUploadProgress(0); // Reset progress
setUploadProgress(0);
} else {
setSelectedFile(null);
}
};
// Simulate upload progress for UX
useEffect(() => {
let interval: NodeJS.Timeout;
// Check if isPending (from useActionState) is true and selectedFile exists
if (isPending && selectedFile && !state?.message) {
let progress = 0;
// Simulate progress quickly at first, then slower
interval = setInterval(() => {
progress += Math.random() * 15 + 5; // Random progress increment
if (progress >= 95 && !state?.message) { // Stall at 95% if no response yet
progress += Math.random() * 15 + 5;
if (progress >= 95 && !state?.message) {
setUploadProgress(95);
} else if (progress <= 100) {
setUploadProgress(Math.min(progress, 100));
@ -60,10 +57,8 @@ export default function FileUploadForm() {
}
}, 150);
} else if (state?.message && !state.error) {
// If successful, jump to 100%
setUploadProgress(100);
} else if (state?.message && state.error) {
// If error, reset progress or show error state (e.g., 0 or specific error indicator)
setUploadProgress(0);
}
return () => clearInterval(interval);
@ -88,7 +83,6 @@ export default function FileUploadForm() {
formRef.current?.reset();
setSelectedFile(null);
setUploadProgress(100);
// Optionally reset progress to 0 after a short delay if user stays on page
setTimeout(() => setUploadProgress(0), 2000);
}
}
@ -118,7 +112,7 @@ export default function FileUploadForm() {
{selectedFile ? (
<p className="text-xs leading-5 text-muted-foreground mt-1">{selectedFile.name} ({(selectedFile.size / 1024 / 1024).toFixed(2)} MB)</p>
) : (
<p className="text-xs leading-5 text-muted-foreground">PNG, JPG, PDF, MP4 up to 50MB</p>
<p className="text-xs leading-5 text-muted-foreground">PNG, JPG, PDF, MP4 up to {UPLOAD_LIMIT_MB}MB</p>
)}
</div>
</div>

View file

@ -6,8 +6,9 @@ import { revalidatePath } from 'next/cache';
import { z } from 'zod';
import fs from 'node:fs';
import path from 'node:path';
import { UPLOAD_LIMIT_MB } from '@/lib/config';
const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB
const MAX_FILE_SIZE = UPLOAD_LIMIT_MB * 1024 * 1024; // 500MB
// It's generally better to allow a wider range of types and let the application handle them,
// or use more robust server-side type checking if strict limitations are needed.
// For this prototype, we'll be more permissive on the client-side Zod schema for MIME types.
@ -18,7 +19,7 @@ const fileSchema = z.object({
file: z
.custom<File>((val) => val instanceof File, "Input is not a file")
.refine((file) => file.size > 0, "File cannot be empty.")
.refine((file) => file.size <= MAX_FILE_SIZE, `File size should be less than 50MB.`)
.refine((file) => file.size <= MAX_FILE_SIZE, `File size should be less than ${UPLOAD_LIMIT_MB}MB.`)
// .refine((file) => ACCEPTED_FILE_TYPES_REGEX.test(file.type), "Unsupported file type.") // Relaxing this for broader prototype compatibility
});

1
src/lib/config.ts Normal file
View file

@ -0,0 +1 @@
export const UPLOAD_LIMIT_MB = 500;