1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[255],{58860:(e,n,t)=>{t.d(n,{xA:()=>u,yg:()=>g});var o=t(37953);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function a(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,o,r=function(e,n){if(null==e)return{};var t,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=o.createContext({}),l=function(e){var n=o.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):a(a({},n),e)),t},u=function(e){var n=l(e.components);return o.createElement(s.Provider,{value:n},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},m=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),c=l(t),m=r,g=c["".concat(s,".").concat(m)]||c[m]||d[m]||i;return t?o.createElement(g,a(a({ref:n},u),{},{components:t})):o.createElement(g,a({ref:n},u))}));function g(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var i=t.length,a=new Array(i);a[0]=m;var p={};for(var s in n)hasOwnProperty.call(n,s)&&(p[s]=n[s]);p.originalType=e,p[c]="string"==typeof e?e:r,a[1]=p;for(var l=2;l<i;l++)a[l]=t[l];return o.createElement.apply(null,a)}return o.createElement.apply(null,t)}m.displayName="MDXCreateElement"},11053:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>s,default:()=>b,frontMatter:()=>p,metadata:()=>l,toc:()=>c});t(37953);var o=t(58860);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function a(e,n){if(null==e)return{};var t,o,r=function(e,n){if(null==e)return{};var t,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}const p={title:"Chakra UI Import Button | Refine v4 Bulk Data Import",display_title:"Import",sidebar_label:"Import",description:"Learn how to add CSV import functionality to your Chakra UI admin panel. Official documentation for the Import Button in Refine v4.",swizzle:!0},s=void 0,l={unversionedId:"ui-integrations/chakra-ui/components/buttons/import-button/index",id:"version-4.xx.xx/ui-integrations/chakra-ui/components/buttons/import-button/index",title:"Chakra UI Import Button | Refine v4 Bulk Data Import",description:"Learn how to add CSV import functionality to your Chakra UI admin panel. Official documentation for the Import Button in Refine v4.",source:"@site/versioned_docs/version-4.xx.xx/ui-integrations/chakra-ui/components/buttons/import-button/index.md",sourceDirName:"ui-integrations/chakra-ui/components/buttons/import-button",slug:"/ui-integrations/chakra-ui/components/buttons/import-button/",permalink:"/core/docs/4.xx.xx/ui-integrations/chakra-ui/components/buttons/import-button/",draft:!1,editUrl:"https://github.com/refinedev/refine/tree/main/documentation/versioned_docs/version-4.xx.xx/ui-integrations/chakra-ui/components/buttons/import-button/index.md",tags:[],version:"4.xx.xx",lastUpdatedBy:"Alican Erdurmaz",lastUpdatedAt:1768983368,formattedLastUpdatedAt:"Jan 21, 2026",frontMatter:{title:"Chakra UI Import Button | Refine v4 Bulk Data Import",dis
1play_title:"Import",sidebar_label:"Import",description:"Learn how to add CSV import functionality to your Chakra UI admin panel. Official documentation for the Import Button in Refine v4.",swizzle:!0},sidebar:"mainSidebar",previous:{title:"Export",permalink:"/core/docs/4.xx.xx/ui-integrations/chakra-ui/components/buttons/export-button/"},next:{title:"List",permalink:"/core/docs/4.xx.xx/ui-integrations/chakra-ui/components/buttons/list-button/"}},u={},c=[{value:"Properties",id:"properties",level:2},{value:"<code>hideText</code>",id:"hidetext",level:3},{value:"<code>loading</code>",id:"loading",level:3},{value:"API Reference",id:"api-reference",level:2},{value:"Properties",id:"properties-1",level:3}],d=e=>function(n){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),(0,o.yg)("div",n)},m=d("DocThumbsUpDownFeedbackWidget"),g=d("PropsTable"),f={toc:c},h="wrapper";function b(e){var{components:n}=e,t=a(e,["components"]);return(0,o.yg)(h,i(function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(n){r(e,n,t[n])}))}return e}({},f,t),{components:n,mdxType:"MDXLayout"}),(0,o.yg)("p",null,(0,o.yg)("inlineCode",{parentName:"p"},"<ImportButton>")," is compatible with the ",(0,o.yg)("a",{parentName:"p",href:"/core/docs/core/hooks/utilities/use-import"},(0,o.yg)("inlineCode",{parentName:"a"},"useImport"))," hook and is meant to be used as it's upload button."),(0,o.yg)("p",null,"It uses Chakra UI's ",(0,o.yg)("a",{parentName:"p",href:"https://www.chakra-ui.com/docs/components/button#usage"},(0,o.yg)("inlineCode",{parentName:"a"},"<Button>"))," component and native html ",(0,o.yg)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"},(0,o.yg)("inlineCode",{parentName:"a"},"<input>"))," element. It wraps a ",(0,o.yg)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"},(0,o.yg)("inlineCode",{parentName:"a"},"<label>"))," with a ",(0,o.yg)("a",{parentName:"p",href:"https://www.chakra-ui.com/docs/components/button#usage"},(0,o.yg)("inlineCode",{parentName:"a"},"<Button>"))," component and ",(0,o.yg)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"},(0,o.yg)("inlineCode",{parentName:"a"},"<input>"))," element and accepts its own properties separately."),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-tsx",metastring:"live previewHeight=360px hideCode",live:!0,previewHeight:"360px",hideCode:!0},'setInitialRoutes(["/posts"]);\n\n// visible-block-start\nimport { useImport, useNotification } from "@refinedev/core";\nimport { List, ImportButton } from "@refinedev/chakra-ui";\nimport {\n TableContainer,\n Table,\n Thead,\n Tr,\n Th,\n Tbody,\n Td,\n Box,\n Text,\n} from "@chakra-ui/react";\nimport { useTable } from "@refinedev/react-table";\nimport { ColumnDef, flexRender } from "@tanstack/react-table";\n\nconst PostList: React.FC = () => {\n const columns = React.useMemo<ColumnDef<IPost>[]>(\n () => [\n {\n id: "id",\n header: "ID",\n accessorKey: "id",\n },\n {\n id: "title",\n header: "Title",\n accessorKey: "title",\n },\n ],\n [],\n );\n\n const { getHeaderGroups, getRowModel } = useTable({\n columns,\n });\n\n const { open } = useNotification();\n\n const { inputProps, isLoading } = useImport({\n onFinish: () => {\n open?.({\n message: "Import successfully completed",\n type: "success",\n });\n },\n });\n\n return (\n <List\n headerButtons={\n <ImportButton loading={isLoading} inputProps={inputProps} />\n }\n >\n <Box position="relative">\n <TableContainer whiteSpace="pre-line">\n <Table variant="simple">\n <Thead>\n {getHeaderGroups().map((headerGroup) => (\n <Tr key={headerGroup.id}>\n {headerGroup.headers.map((header) => (\n <Th key={header.id}>\n {!header.isPlaceholder &&\n flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </Th>\n ))}\n </Tr>\n ))}\n </Thead>\n <Tbody>\n {getRowModel().rows.map((row) => (\n <Tr key={row.id}>\n {row.getVisibleCells().map((cell) => (\n <Td key={cell.id}>\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </Td>\n ))}\n </Tr>\n ))}\n </Tbody>\n </Table>\n </TableContainer>\n <Box\n position="absolute"\n top={0}\n left={0}\n right={0}\n bottom={0}\n height="100%"\n pointerEvents="none"\n background="linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.1) 95%, rgba(0, 0, 0, 0.2) 100%)"\n />\n <Text\n position="absolute"\n bottom={2}\n left="50%"\n transform="translateX(-50%)"\n color="gray.700"\n fontSize="sm"\n >\n \u2728 Live Preview\n </Text>\n </Box>\n </List>\n );\n};\n\ninterface IPost {\n id: number;\n title: string;\n}\n// visible-block-end\n\nrender(\n <ReactRouter.BrowserRouter>\n <RefineChakraDemo\n resources={[\n {\n name: "posts",\n list: "/posts",\n },\n ]}\n >\n <ReactRouter.Routes>\n <ReactRouter.Route\n path="/posts"\n element={\n <div style={{ padding: 16 }}>\n <ReactRouter.Outlet />\n </div>\n }\n >\n <ReactRouter.Route index element={<PostList />} />\n </ReactRouter.Route>\n </ReactRouter.Routes>\n </RefineChakraDemo>\n </ReactRouter.BrowserRouter>,\n);\n')),(0,o.yg)("admonition",{title:"Good to know",type:"simple"},(0,o.yg)("p",{parentName:"admonition"},"You can swizzle this component to customize it with the ",(0,o.yg)("a",{parentName:"p",href:"/core/docs/packages/list-of-packages"},(0,o.yg)("strong",{parentName:"a"},"Refine CLI")))),(0,o.yg)("h2",{id:"properties"},"Properties"),(0,o.yg)("h3",{id:"hidetext"},(0,o.yg)("inlineCode",{parentName:"h3"},"hideText")),(0,o.yg)(m,{id:"hidetext",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,o.yg)("p",null,(0,o.yg)("inlineCode",{parentName:"p"},"hideText")," is used to show and not show the text of the button. When ",(0,o.yg)("inlineCode",{parentName:"p"},"true"),", only the button icon is visible."),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-tsx",metastring:"live previewHeight=120px",live:!0,previewHeight:"120px"},'setInitialRoutes(["/posts"]);\n\n// visible-block-start\nimport { ImportButton } from "@refinedev/chakra-ui";\nimport { useImport } from "@refinedev/core";\n\nconst MyImportComponent = () => {\n const { inputProps, isLoading } = useImport({\n onFinish: () => {\n console.log("Import completed");\n },\n });\n\n return (\n <ImportButton\n colorScheme="blue"\n hideText={true}\n loading={isLoading}\n inputProps={inputProps}\n />\n );\n};\n// visible-block-end\n\nrender(\n <ReactRouter.BrowserRouter>\n <RefineChakraDemo\n resources={[\n {\n name: "posts",\n list: "/posts",\n },\n ]}\n >\n <ReactRouter.Routes>\n <ReactRouter.Route\n path="/posts"\n element={\n <div style={{ padding: 16 }}>\n <ReactRouter.Outlet />\n </div>\n }\n >\n <ReactRouter.Route index element={<MyImportComponent />} />\n </ReactRouter.Route>\n </ReactRouter.Routes>\n </RefineChakraDemo>\n </ReactRouter.BrowserRouter>,\n);\n'))),(0,o.yg)("h3",{id:"loading"},(0,o.yg)("inlineCode",{parentName:"h3"},"loading")),(0,o.yg)(m,{id:"loading",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,o.yg)("p",null,"It is used to show a loading state on the button when the import process is in progress."),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-tsx",metastring:"live previewHeight=120px",live:!0,previewHeight:"120px"},'setInitialRoutes(["/posts"]);\n\n// visible-block-start\nimport { ImportButton } from "@refinedev/chakra-ui";\nimport { useImport } from "@refinedev/core";\n\nconst MyImportComponent = () => {\n const { inputProps, isLoading } = useImport({\n onFinish: () => {\n console.log("Import completed");\n },\n });\n\n return (\n <ImportButton\n colorScheme="black"\n loading={isLoading}\n inputProps={inputProps}\n />\n );\n};\n// visible-block-end\n\nrender(\n <ReactRouter.BrowserRouter>\n <RefineChakraDemo\n resources={[\n {\n name: "posts",\n list: "/posts",\n },\n ]}\n >\n <ReactRouter.Routes>\n <ReactRouter.Route\n path="/posts"\n element={\n <div style={{ padding: 16 }}>\n <ReactRouter.Outlet />\n </div>\n }\n >\n <ReactRouter.Route index element={<MyImportComponent />} />\n </ReactRouter.Route>\n </ReactRouter.Routes>\n </RefineChakraDemo>\n </ReactRouter.BrowserRouter>,\n);\n'))),(0,o.yg)("h2",{id:"api-reference"},"API Reference"),(0,o.yg)("h3",{id:"properties-1"},"Properties"),(0,o.yg)(m,{id:"properties-1",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,o.yg)(g,{module:"@refinedev/chakra-ui/ImportButton",mdxType:"PropsTable"}),(0,o.yg)("admonition",{title:"External Props",type:"simple"},(0,o.yg)("p",{parentName:"admonition"},"It also accepts all props of Chakra UI ",(0,o.yg)("a",{parentName:"p",href:"https://chakra-ui.com/docs/components/button#props"},"Button"),"."))))}b.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.