{"componentChunkName":"component---src-pages-experimental-import-pattern-index-mdx","path":"/experimental/import-pattern/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Import pattern","description":"The import action transfers data or objects from an external source into a system."},"relativePagePath":"/experimental/import-pattern/index.mdx","titleType":"prepend","MdxNode":{"id":"9678b35a-3542-5edc-99fc-f6995c993019","children":[],"parent":"e3315174-891d-5644-aa42-3b0bbbed3c40","internal":{"content":"---\ntitle: Import pattern\ndescription: The import action transfers data or objects from an external source into a system.\n---\n\n<PageDescription>\n\nThe import action transfers data or objects from an external source into a system.\n\n</PageDescription>\n\n#### Status:\n\n[Experimental](experimental/about)\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson)\n\n![Example of an import modal in context](/images/0.5.png)\n\n<Caption>Example of an import modal in context</Caption>\n\n## Choose a file\n\nWherever possible there should be a drag and drop zone. Use a file drop component and offer the option to browse locally to select a file. Note that file selection should be restricted to allowed file types.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an import modal](/images/2.png)\n\n<Caption>Example of an import modal</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of drag and drop file import](/images/3.png)\n\n<Caption>Example of drag and drop file import</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of loaded files in the import modal](/images/4.png)\n\n<Caption>Example of loaded files in the import modal</Caption>\n\n</Column>\n</Row>\n\n## Import from a URL\n\nIf your product supports importing from a URL, use this method.\n\n<Row>\n<Column colLg={8}>\n\n![Example of importing with a URL](images/5.png)\n\n<Caption>Example of importing with a URL</Caption>\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"2445b24f37fe4e0aef43423090f5ead8","counter":1193,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Import pattern","description":"The import action transfers data or objects from an external source into a system."},"exports":{},"rawBody":"---\ntitle: Import pattern\ndescription: The import action transfers data or objects from an external source into a system.\n---\n\n<PageDescription>\n\nThe import action transfers data or objects from an external source into a system.\n\n</PageDescription>\n\n#### Status:\n\n[Experimental](experimental/about)\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson)\n\n![Example of an import modal in context](/images/0.5.png)\n\n<Caption>Example of an import modal in context</Caption>\n\n## Choose a file\n\nWherever possible there should be a drag and drop zone. Use a file drop component and offer the option to browse locally to select a file. Note that file selection should be restricted to allowed file types.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an import modal](/images/2.png)\n\n<Caption>Example of an import modal</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of drag and drop file import](/images/3.png)\n\n<Caption>Example of drag and drop file import</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of loaded files in the import modal](/images/4.png)\n\n<Caption>Example of loaded files in the import modal</Caption>\n\n</Column>\n</Row>\n\n## Import from a URL\n\nIf your product supports importing from a URL, use this method.\n\n<Row>\n<Column colLg={8}>\n\n![Example of importing with a URL](images/5.png)\n\n<Caption>Example of importing with a URL</Caption>\n\n</Column>\n</Row>\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/experimental/import-pattern/index.mdx"}}}}