Animated File Upload

Renders an animated drag-and-drop file upload area with file previews. It scales on drag, shows a bounce animation on drop, and slides files in and out. Use when allowing file selection with visual feedback and animations.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/animated-file-upload

npx layro-cli add @educlopez/animated-file-upload

npx layro-cli add @educlopez/animated-file-upload

bunx layro-cli add @educlopez/animated-file-upload

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useCallback, useRef, useState } from "react";

export interface AnimatedFileUploadProps {
  accept?: string;
  className?: string;
  disabled?: boolean;
  maxSize?: number;
  multiple?: boolean;
  onFilesSelected: (files: File[]) => void;