# File upload 01

> Card form with a "Studio Name" text input, a single file input (file picker), and action buttons to upload or cancel.

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/file-upload-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/file-upload-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/file-upload-01-light-d2b5e6e62ce279c8.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/file-upload-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/file-upload-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `card`, `input`, `label`, `button`

## Files

### `src/registry/new-york/blocks/dashboard-and-application/file-upload/file-upload-01/page.tsx`

```tsx
import FileUpload from '@/registry/new-york/components/blocks/file-upload-01/file-upload-01'

const FileUploadPage = () => {
  return (
    <div className='py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
        <div className='flex justify-center'>
          <FileUpload />
        </div>
      </div>
    </div>
  )
}

export default FileUploadPage
```

### `src/registry/new-york/components/blocks/file-upload-01/file-upload-01.tsx`

```tsx
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'
import { Input } from '@/registry/new-york/ui/input'
import { Label } from '@/registry/new-york/ui/label'
import { Button } from '@/registry/new-york/ui/button'

function FileUpload() {
  return (
    <Card className='w-full max-w-lg'>
      <CardHeader>
        <CardTitle>Set up your first Studio</CardTitle>
        <CardDescription>Set up your Studio to start managing your projects efficiently.</CardDescription>
      </CardHeader>
      <CardContent className='space-y-4 text-sm'>
        <div className='w-full space-y-2'>
          <Label htmlFor='studio-name' className='gap-1'>
            Studio Name <span className='text-destructive'>*</span>
          </Label>
          <Input id='studio-name' type='text' placeholder='Studio Name' required />
        </div>
        <div className='w-full space-y-2'>
          <Label htmlFor='studio-input' className='gap-1'>
            Upload File <span className='text-destructive'>*</span>
          </Label>
          <Input
            id='studio-input'
            type='file'
            className='text-muted-foreground file:border-input file:text-foreground p-0 pr-3 italic file:mr-3 file:h-full file:border-0 file:border-r file:border-solid file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic'
          />
          <p className='text-muted-foreground text-xs'>You can upload a file here.</p>
        </div>
        <div className='flex justify-end gap-2 max-sm:justify-center'>
          <Button className='max-sm:flex-1' variant='outline'>
            Cancel
          </Button>
          <Button className='max-sm:flex-1' type='submit'>
            Upload
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

export default FileUpload
```