Files
Helpers to make working with file data easierAccessibility
When handling file dropping, we recommend that you also add a native input for file uploads
<input type="file" />This will help enable folks leveraging assistive technologies to perform file uploads.
Drop some images on me!
containsFiles
Useful to know whether file(s) are being dragged. Keep in mind that multiple pieces of native data can be dragged at once.
import { containsFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
dropTargetForExternal({
element: myElement,
canDrop: containsFiles,
});
monitorForExternal({
canMonitor: containsFiles,
});getFiles
A helper to extract files from drop data. An empty array ([]) will be returned if there were no
files being dragged.
import { getFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
dropTargetForExternal({
element: myElement,
onDrop({ source }) {
const files: File[] = getFiles({ source });
},
});
monitorForExternal({
onDrop({ source }) {
const files: File[] = getFiles({ source });
},
});