{"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":"71748f2b-28e1-544c-a85b-595b2be7da62","children":[],"parent":"2c9a8a49-4cdc-58ee-8258-0d5cc0aecb73","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<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  <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  <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":"b66cf334a86b5b48b85249a373a2848f","counter":1479,"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<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  <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  <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/26e993f/src/pages/components/file-uploader/code.mdx"}}}}