# File Upload File upload allows users to upload and attach one or more files. It shows the upload progress and status of each file. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-file-upload--introduction ## Variants documented in Storybook - EntryStates: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-file-upload--entrystates - UploadedAndErrorStates: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-file-upload--uploadedanderrorstates ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for File Upload. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Entry States — Entry States HTML: ```html
``` React: ```jsx import React from 'react'; const FileUploadExample1Demo = () => ( <> {/* Variant: File Upload - default */}
cloud_upload

Drop file here

File type: PDF JPG PNG Max size: 5 MB

Or

error_outline

{/* Variant: File Upload - default VLE */}
cloud_upload

Upload or scan document

File type: PDF JPG PNG Max size: 5 MB

error_outline

{/* Variant: File Upload - Selecting File */}
cloud_upload

Drop file here

File type: PDF JPG PNG Max size: 5 MB

error_outline

{/* Variant: File Upload - Scanning VLE */}

Scanning

error_outline

); export default FileUploadExample1Demo; ``` Angular: ```html
``` ### 2. Introduction — Introduction HTML: ```html
Components

File Upload

File upload allows users to upload and attach one or more files. It shows the upload progress and status of each file.

Default

    Default VLE

      ``` React: ```jsx import React from 'react'; const FileUploadExample2Demo = () => ( <>
      Components

      File Upload

      File upload allows users to upload and attach one or more files. It shows the upload progress and status of each file.

      Default

      cloud_upload

      Drop file here

      File type: PDF JPG PNG Max size: 5 MB

      Or

      error_outline

        Default VLE

        cloud_upload

        Upload or scan document

        File type: PDF JPG PNG Max size: 5 MB

        error_outline

          ); export default FileUploadExample2Demo; ``` Angular: ```html
          Components

          File Upload

          File upload allows users to upload and attach one or more files. It shows the upload progress and status of each file.

          Default

            Default VLE

              ``` ### 3. Uploaded And Error States — Uploaded And Error States HTML: ```html
              ``` React: ```jsx import React from 'react'; const FileUploadExample3Demo = () => ( <> {/* Variant: File Upload - With Uploaded Files */}
              cloud_upload

              Drop file here

              File type: PDF JPG PNG Max size: 5 MB

              Or

              error_outline

              {/* Variant: File Upload - With Uploaded Files VLE */}
              cloud_upload

              Upload or scan document

              File type: PDF JPG PNG Max size: 5 MB

              error_outline

              {/* Variant: File Upload - Error VLE */}
              error_outline

              Could not scan

              [File Name] exceeds the 5MB upload limit. Please compress it or select a smaller file.

              {/* Variant: File Upload - Uploading Row */}
              {/* Variant: File Upload - Error Row */}
              ); export default FileUploadExample3Demo; ``` Angular: ```html
              ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.