@nexusui/components/core/FilePicker/FilePicker.component.js

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

import{jsxs as o,jsx as r}from"react/jsx-runtime";import{useDropzone as e}from"react-dropzone";import t from"@mui/material/Box";import{baseStyle as i}from"./FilePicker.styles.js";import{DropOverlay as p}from"./components/DropOverlay/DropOverlay.js";import{FilePickerBlock as n}from"./components/FilePickerBlock/FilePickerBlock.js";const s="NexusFilePicker",a=a=>{const{dropZoneOptions:m,onDropped:l,DropZoneComponent:c=n,DropZoneComponentProps:d,DropOverlayComponent:u=p,DropOverlayComponentProps:y,sx:D,...P}=a,{sx:f,...x}=d??{},k=e({...m,onDrop:l}),{getRootProps:v,getInputProps:O,isDragActive:j}=k,A=v({sx:[i,...Array.isArray(D)?D:[D]],"data-testid":`${s}-root`,className:`${s}-root`,...P});return o(t,{justifyContent:"center",alignItems:"center",...A,children:[r("input",{...O(),"data-testid":`${s}-input`,className:`${s}-input`,"aria-label":"File picker input"}),j&&r(u,{dropZoneOptions:m,...y}),r(c,{dropZoneProps:{...k,...m},sx:[{visibility:j?"hidden":"visible"},...Array.isArray(f)?f:[f]],...x})]})};export{a as default,s as prefix};