{"componentChunkName":"component---src-pages-components-file-uploader-code-mdx","path":"/components/file-uploader/code/","result":{"pageContext":{"frontmatter":{"title":"File uploader","description":"File uploaders allow the user to transfer a file or submit content of their own.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/file-uploader/code.mdx","titleType":"prepend","MdxNode":{"id":"8e77ff4d-dc14-56f3-9ed9-2099cd655337","children":[],"parent":"0ee1ef1f-e3e8-597e-b8b0-caefd34d257e","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\", \"Accessibility\"]\n---\n\n## File uploader\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/fileuploader--fileuploader\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=file-uploader\",\n  }}\n  knobs={{ FileUploader: [\"multiple\"] }}\n>\n  {`\n<div className=\"bx--file__container\">\n  <FileUploader\n    accept={[\n      '.jpg',\n      '.png'\n    ]}\n    buttonKind=\"primary\"\n    buttonLabel=\"Add files\"\n    filenameStatus=\"edit\"\n    iconDescription=\"Clear file\"\n    labelDescription=\"only .jpg files at 500mb or less\"\n    labelTitle=\"Upload\"\n  />\n</div>\n  `}\n</ComponentDemo>\n\n## Drag and drop\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/fileuploader--drag-and-drop-upload-container-example-application\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--drag-and-drop\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=file-uploader\",\n  }}\n  knobs={{ FileUploaderDropContainer: [\"multiple\", \"disabled\"] }}\n>\n  {`\n  <div className=\"bx--file__container\">\n    <strong className='bx--file--label'>Account photo</strong>\n    <p className='bx--label-description'>\n      Only .jpg and .png files. 500kb max file size\n    </p>\n    <FileUploaderDropContainer\n      accept={[\n        'image/jpeg',\n        'image/png'\n      ]}\n      labelText=\"Drag and drop files here or click to upload\"\n      tabIndex={0}\n    />\n  </div>\n  `}\n</ComponentDemo>\n\n## Upload states\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/fileuploader--fileuploaderitem\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=file-uploader\",\n  }}\n  knobs={{ FileUploaderItem: [\"status\", \"invalid\"] }}\n>\n  {`\n  <div className=\"bx--file__container\">\n    <FileUploaderItem name='color.jpg' errorSubject='File size exceeds limits' errorBody='500 kb max file size. Select a new file and try again.'/>\n  </div>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"67f07f81184d70be324a863e6d4e53e6","counter":1486,"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","Accessibility"]},"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\", \"Accessibility\"]\n---\n\n## File uploader\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/fileuploader--fileuploader\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=file-uploader\",\n  }}\n  knobs={{ FileUploader: [\"multiple\"] }}\n>\n  {`\n<div className=\"bx--file__container\">\n  <FileUploader\n    accept={[\n      '.jpg',\n      '.png'\n    ]}\n    buttonKind=\"primary\"\n    buttonLabel=\"Add files\"\n    filenameStatus=\"edit\"\n    iconDescription=\"Clear file\"\n    labelDescription=\"only .jpg files at 500mb or less\"\n    labelTitle=\"Upload\"\n  />\n</div>\n  `}\n</ComponentDemo>\n\n## Drag and drop\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/fileuploader--drag-and-drop-upload-container-example-application\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--drag-and-drop\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=file-uploader\",\n  }}\n  knobs={{ FileUploaderDropContainer: [\"multiple\", \"disabled\"] }}\n>\n  {`\n  <div className=\"bx--file__container\">\n    <strong className='bx--file--label'>Account photo</strong>\n    <p className='bx--label-description'>\n      Only .jpg and .png files. 500kb max file size\n    </p>\n    <FileUploaderDropContainer\n      accept={[\n        'image/jpeg',\n        'image/png'\n      ]}\n      labelText=\"Drag and drop files here or click to upload\"\n      tabIndex={0}\n    />\n  </div>\n  `}\n</ComponentDemo>\n\n## Upload states\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/fileuploader--fileuploaderitem\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-file-uploader--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=file-uploader\",\n  }}\n  knobs={{ FileUploaderItem: [\"status\", \"invalid\"] }}\n>\n  {`\n  <div className=\"bx--file__container\">\n    <FileUploaderItem name='color.jpg' errorSubject='File size exceeds limits' errorBody='500 kb max file size. Select a new file and try again.'/>\n  </div>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/file-uploader/code.mdx"}}}}