changed upload limit
This commit is contained in:
parent
b59f0e7816
commit
6e8bf31900
4 changed files with 74 additions and 76 deletions
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
1
src/lib/config.ts
Normal file
|
@ -0,0 +1 @@
|
|||
export const UPLOAD_LIMIT_MB = 500;
|
Loading…
Add table
Reference in a new issue