diff --git a/content/docs/forms/file-input.mdx b/content/docs/forms/file-input.mdx new file mode 100644 index 000000000..2f33e709a --- /dev/null +++ b/content/docs/forms/file-input.mdx @@ -0,0 +1,54 @@ +--- +title: React File Input - Flowbite +description: Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes +--- + +The `` component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for dark mode. + +Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the `` component. + +To start using the component make sure that you have imported it from Flowbite React: + +```jsx +import { FileInput } from 'flowbite-react'; +``` + +## File upload example + +Get started with a simple `` component to let users upload one single file. + + + +## Helper text + +Add a descriptive helper text to inform users the allowed extensions and sizes of the files. + + + +## Multiple files + +Apply the multiple attribute to the `` component to allow more files to be uploaded. + + + +## Sizes + +Choose from the small, default, and large `` sizing options. + + + +## Dropzone + +The dropzone `` component can be used to upload one or more files by clicking anywhere in the area. + + + +## Theme + +To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). + + + +## References + +- [Flowbite File Input](https://flowbite.com/docs/forms/file-input/) diff --git a/data/components.tsx b/data/components.tsx index ac2411d62..4965bed62 100644 --- a/data/components.tsx +++ b/data/components.tsx @@ -210,13 +210,13 @@ export const COMPONENTS_DATA: Component[] = [ // link: `/docs/forms/input-field`, // classes: 'w-40' // }, - // { - // name: 'File Input', - // image: '/images/components/file-input.svg', - // imageDark: '/images/components/file-input-dark.svg', - // link: `/docs/forms/file-input`, - // classes: 'w-48' - // }, + { + name: 'File Input', + image: '/images/components/file-input.svg', + imageDark: '/images/components/file-input-dark.svg', + link: `/docs/forms/file-input`, + classes: 'w-48', + }, // { // name: 'Search Input', // image: '/images/components/search-input.svg', diff --git a/data/docs-sidebar.ts b/data/docs-sidebar.ts index 474a396d9..939c65422 100644 --- a/data/docs-sidebar.ts +++ b/data/docs-sidebar.ts @@ -71,7 +71,10 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ { title: 'forms', href: '/forms/', - items: [{ title: 'Floating Label', href: '/docs/forms/floating-label', isNew: true }], + items: [ + { title: 'File Input', href: '/docs/forms/file-input' }, + { title: 'Floating Label', href: '/docs/forms/floating-label', isNew: true }, + ], }, { title: 'typography', diff --git a/examples/fileInput/fileInput.dropzone.tsx b/examples/fileInput/fileInput.dropzone.tsx new file mode 100644 index 000000000..ae2a68680 --- /dev/null +++ b/examples/fileInput/fileInput.dropzone.tsx @@ -0,0 +1,133 @@ +import { type CodeData } from '~/components/code-demo'; +import { FileInput, Label } from '~/src'; + +const code = ` +'use client'; + +import { FileInput, Label } from 'flowbite-react'; + +function Component() { + return ( +
+ +
+ ); +} +`; + +const codeRSC = ` + +import { FileInput, Label } from 'flowbite-react'; + +function Component() { + return ( +
+ +
+ ); +} +`; + +function Component() { + return ( +
+ +
+ ); +} + +export const dropzone: CodeData = { + type: 'single', + code: [ + { + fileName: 'client', + language: 'tsx', + code, + }, + { + fileName: 'server', + language: 'tsx', + code: codeRSC, + }, + ], + githubSlug: 'fileInput/fileInput.dropzone.tsx', + component: , +}; diff --git a/examples/fileInput/fileInput.helper.tsx b/examples/fileInput/fileInput.helper.tsx new file mode 100644 index 000000000..9d2b3140c --- /dev/null +++ b/examples/fileInput/fileInput.helper.tsx @@ -0,0 +1,64 @@ +import { type CodeData } from '~/components/code-demo'; +import { FileInput, Label } from '~/src'; + +const code = ` +'use client'; + +import { FileInput, Label } from 'flowbite-react'; + +function Component() { + return ( +
+
+
+ +
+ ); +} +`; + +const codeRSC = ` + +import { FileInput, Label } from 'flowbite-react'; + +function Component() { + return ( +
+
+
+ +
+ ); +} +`; + +function Component() { + return ( +
+
+
+ +
+ ); +} + +export const helper: CodeData = { + type: 'single', + code: [ + { + fileName: 'client', + language: 'tsx', + code, + }, + { + fileName: 'server', + language: 'tsx', + code: codeRSC, + }, + ], + githubSlug: 'fileInput/fileInput.helper.tsx', + component: , +}; diff --git a/examples/fileInput/fileInput.multiple.tsx b/examples/fileInput/fileInput.multiple.tsx new file mode 100644 index 000000000..8a4d0c739 --- /dev/null +++ b/examples/fileInput/fileInput.multiple.tsx @@ -0,0 +1,64 @@ +import { type CodeData } from '~/components/code-demo'; +import { FileInput, Label } from '~/src'; + +const code = ` +'use client'; + +import { FileInput, Label } from 'flowbite-react'; + +function Component() { + return ( +
+
+
+ +
+ ); +} +`; + +const codeRSC = ` + +import { FileInput, Label } from 'flowbite-react'; + +function Component() { + return ( +
+
+
+ +
+ ); +} +`; + +function Component() { + return ( +
+
+
+ +
+ ); +} + +export const multiple: CodeData = { + type: 'single', + code: [ + { + fileName: 'client', + language: 'tsx', + code, + }, + { + fileName: 'server', + language: 'tsx', + code: codeRSC, + }, + ], + githubSlug: 'fileInput/fileInput.multiple.tsx', + component: , +}; diff --git a/examples/fileInput/fileInput.root.tsx b/examples/fileInput/fileInput.root.tsx new file mode 100644 index 000000000..26d5c6111 --- /dev/null +++ b/examples/fileInput/fileInput.root.tsx @@ -0,0 +1,64 @@ +import { type CodeData } from '~/components/code-demo'; +import { FileInput, Label } from '~/src'; + +const code = ` +'use client'; + +import { FileInput, Label } from 'flowbite-react'; + +function Component() { + return ( +
+
+
+ +
+ ); +} +`; + +const codeRSC = ` +function Component() { + + import { FileInput, Label } from 'flowbite-react'; + + return ( +
+
+
+ +
+ ); +} +`; + +function Component() { + return ( +
+
+
+ +
+ ); +} + +export const root: CodeData = { + type: 'single', + code: [ + { + fileName: 'client', + language: 'tsx', + code, + }, + { + fileName: 'server', + language: 'tsx', + code: codeRSC, + }, + ], + githubSlug: 'fileInput/fileInput.root.tsx', + component: , +}; diff --git a/examples/fileInput/fileInput.sizes.tsx b/examples/fileInput/fileInput.sizes.tsx new file mode 100644 index 000000000..1c5d8ea63 --- /dev/null +++ b/examples/fileInput/fileInput.sizes.tsx @@ -0,0 +1,106 @@ +import { type CodeData } from '~/components/code-demo'; +import { FileInput, Label } from '~/src'; + +const code = ` +'use client'; + +import { FileInput, Label } from 'flowbite-react'; + +function Component() { + return ( +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ ); +} +`; + +const codeRSC = ` + +import { FileInput, Label } from 'flowbite-react'; + +function Component() { + return ( +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ ); +} +`; + +function Component() { + return ( +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ ); +} + +export const sizes: CodeData = { + type: 'single', + code: [ + { + fileName: 'client', + language: 'tsx', + code, + }, + { + fileName: 'server', + language: 'tsx', + code: codeRSC, + }, + ], + githubSlug: 'fileInput/fileInput.sizes.tsx', + component: , +}; diff --git a/examples/fileInput/index.ts b/examples/fileInput/index.ts new file mode 100644 index 000000000..2bb4fd950 --- /dev/null +++ b/examples/fileInput/index.ts @@ -0,0 +1,5 @@ +export { root } from './fileInput.root'; +export { helper } from './fileInput.helper'; +export { multiple } from './fileInput.multiple'; +export { sizes } from './fileInput.sizes'; +export { dropzone } from './fileInput.dropzone'; diff --git a/examples/index.ts b/examples/index.ts index 504aaea50..e4e2dddc5 100644 --- a/examples/index.ts +++ b/examples/index.ts @@ -11,6 +11,7 @@ export * as card from './card'; export * as carousel from './carousel'; export * as datepicker from './datepicker'; export * as dropdown from './dropdown'; +export * as fileInput from './fileInput'; export * as floatingLabel from './floatingLabel'; export * as footer from './footer'; export * as forms from './forms'; diff --git a/public/images/components/file-input-dark.svg b/public/images/components/file-input-dark.svg new file mode 100644 index 000000000..2653e6b4d --- /dev/null +++ b/public/images/components/file-input-dark.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/components/file-input.svg b/public/images/components/file-input.svg new file mode 100644 index 000000000..283396c12 --- /dev/null +++ b/public/images/components/file-input.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +