{"componentChunkName":"component---src-pages-components-file-uploader-usage-mdx","path":"/components/file-uploader/usage/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"File uploader","description":"File uploaders allow the user to transfer a file or submit content of their own.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/file-uploader/usage.mdx","titleType":"prepend","MdxNode":{"id":"c15bd604-5429-581e-938f-e3b7bf977f93","children":[],"parent":"aa821661-7208-5d64-a57d-72653e8ce52d","internal":{"content":"---\ntitle: File uploader\ndescription: File uploaders allow the user to transfer a file or submit content of their own.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n<AnchorLinks>\n\n<AnchorLink>General guidance </AnchorLink>\n<AnchorLink>Interaction</AnchorLink>\n<AnchorLink>Upload state</AnchorLink>\n<AnchorLink>Removing files</AnchorLink>\n\n</AnchorLinks>\n\n## General guidance\n\n_File Uploader_ allows the user to transfer a file or submit content of their own.\n\n- A File Uploader is commonly found in forms, but they can also live as stand alone elements.\n- **Add files** is the default text that appears with the File Uploader.\n- A File Uploader should always be accompanied by **Submit** or **Upload**, which is to be styled as a [Primary Button](/components/button).\n- Use an ellipsis (...) if the filename extends beyond the width of its parent element.\n\n<Row>\n<Column colLg={8}>\n\n![file uploader example](images/file-uploader-usage-1.png)\n\n</Column>\n</Row>\n\n## Interaction\n\n1. The user may select 1 or more files to upload at a time. By default, any file type is accepted, but you can add parameters to validate a specific file type.\n2. The action of clicking **Add files** will trigger a browser-specific upload window.\n3. Once the user chooses files to upload, the browser-specific upload window closes and the files will appear below the **Add files** button.\n4. User clicks **Submit** or **Upload** to submit their data.\n5. Any errors that may occur with the file should appear as an inline error\n   [Notification](/components/notification).\n\n<Row>\n<Column colLg={8}>\n\n![file uploader error](images/file-uploader-usage-2.png)\n\n</Column>\n</Row>\n\n## Upload state\n\nDevelopers using File Uploader will be able to use JavaScript to inject a Loading component when selected files are actually being uploaded.\n\n<Row>\n<Column colLg={8}>\n\n![File uploading state](images/file-uploader-usage-3.png)\n\n</Column>\n</Row>\n\n## Removing files\n\nDevelopers will use JavaScript to inject a “close” button on each file that is selected to be uploaded. It's up to the developer to code the logic for removing these files individually. However, keep in mind that this kind of editing isn't supported natively in the browser.\n","type":"Mdx","contentDigest":"841596bdce1cd18f59d6400ca86bd1d3","counter":1116,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"File uploader","description":"File uploaders allow the user to transfer a file or submit content of their own.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: File uploader\ndescription: File uploaders allow the user to transfer a file or submit content of their own.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n<AnchorLinks>\n\n<AnchorLink>General guidance </AnchorLink>\n<AnchorLink>Interaction</AnchorLink>\n<AnchorLink>Upload state</AnchorLink>\n<AnchorLink>Removing files</AnchorLink>\n\n</AnchorLinks>\n\n## General guidance\n\n_File Uploader_ allows the user to transfer a file or submit content of their own.\n\n- A File Uploader is commonly found in forms, but they can also live as stand alone elements.\n- **Add files** is the default text that appears with the File Uploader.\n- A File Uploader should always be accompanied by **Submit** or **Upload**, which is to be styled as a [Primary Button](/components/button).\n- Use an ellipsis (...) if the filename extends beyond the width of its parent element.\n\n<Row>\n<Column colLg={8}>\n\n![file uploader example](images/file-uploader-usage-1.png)\n\n</Column>\n</Row>\n\n## Interaction\n\n1. The user may select 1 or more files to upload at a time. By default, any file type is accepted, but you can add parameters to validate a specific file type.\n2. The action of clicking **Add files** will trigger a browser-specific upload window.\n3. Once the user chooses files to upload, the browser-specific upload window closes and the files will appear below the **Add files** button.\n4. User clicks **Submit** or **Upload** to submit their data.\n5. Any errors that may occur with the file should appear as an inline error\n   [Notification](/components/notification).\n\n<Row>\n<Column colLg={8}>\n\n![file uploader error](images/file-uploader-usage-2.png)\n\n</Column>\n</Row>\n\n## Upload state\n\nDevelopers using File Uploader will be able to use JavaScript to inject a Loading component when selected files are actually being uploaded.\n\n<Row>\n<Column colLg={8}>\n\n![File uploading state](images/file-uploader-usage-3.png)\n\n</Column>\n</Row>\n\n## Removing files\n\nDevelopers will use JavaScript to inject a “close” button on each file that is selected to be uploaded. It's up to the developer to code the logic for removing these files individually. However, keep in mind that this kind of editing isn't supported natively in the browser.\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/file-uploader/usage.mdx"}}}}