DropZone.mdx

import {Layout} from '../../src/Layout'; export default Layout;

import docs from 'docs:react-aria-components'; import '../../tailwind/tailwind.css';

export const tags = ['file', 'drag', 'dnd', 'upload'];

DropZone

{docs.exports.DropZone.description}

```tsx render type="vanilla" files={["starters/docs/src/DropZone.tsx", "starters/docs/src/DropZone.css"]} "use client"; import {DropZone} from 'vanilla-starter/DropZone'; import {Text} from 'react-aria-components'; import {useState} from 'react';

function Example() { let [content, setContent] = useState(null); return ( <DropZone // Determine whether dragged content should be accepted. getDropOperation={types => ( ['text/plain', 'image/jpeg', 'image/png', 'image.gif'].some(t => types.has(t)) ? 'copy' : 'cancel' )} onDrop={async (event) => { // Find the first accepted item. let item = event.items.find(item => ( (item.kind === 'text' && item.types.has('text/plain')) || (item.kind === 'file' && item.type.startsWith('image/')) ));

      if (item?.kind === 'text') {
        let text = await item.getText('text/plain');
        setContent(text);
      } else if (item?.kind === 'file') {
        let file = await item.getFile();
        let url = URL.createObjectURL(file);
        setContent(<img src={url} alt={item.name} style={{maxHeight: 100, maxWidth: '100%'}} />)
      }
    }}>
    <Text slot="label">
      {content || "Drop or paste text or images here"}
    </Text>
  </DropZone>
);

}

```tsx render type="tailwind" files={["starters/tailwind/src/DropZone.tsx"]}
"use client";
import {DropZone} from 'tailwind-starter/DropZone';
import {Text} from 'react-aria-components';
import {useState} from 'react';

function Example() {
  let [content, setContent] = useState(null);
  return (
    <DropZone
      // Determine whether dragged content should be accepted.
      getDropOperation={types => (
        ['text/plain', 'image/jpeg', 'image/png', 'image/gif'].some(t => types.has(t)) ? 'copy' : 'cancel'
      )}
      onDrop={async (event) => {
        // Find the first accepted item.
        let item = event.items.find(item => (
          (item.kind === 'text' && item.types.has('text/plain')) ||
          (item.kind === 'file' && item.type.startsWith('image/'))
        ));

        if (item?.kind === 'text') {
          let text = await item.getText('text/plain');
          setContent(text);
        } else if (item?.kind === 'file') {
          let file = await item.getFile();
          let url = URL.createObjectURL(file);
          setContent(<img src={url} alt={item.name} style={{maxHeight: 100, maxWidth: '100%'}} />)
        }
      }}>
      <Text slot="label">
        {content || "Drop or paste text or images here"}
      </Text>
    </DropZone>
  );
}

Examples

API

<DropZone>
  <Text slot="label" />
</DropZone>

DropZone