{"componentChunkName":"component---src-pages-experimental-import-pattern-index-mdx","path":"/experimental/import-pattern/","result":{"pageContext":{"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":"12190d1e-c9ee-555a-9eea-9422ca3614fe","children":[],"parent":"ac58abb8-5d5b-51ad-a688-6266e42890e3","internal":{"content":"---\ntitle: Import pattern\ndescription: The import action transfers data or objects from an external source into a system.\n---\n\n\n\nThe import action transfers data or objects from an external source into a system.\n\n\n\n#### Status:\n\n[Experimental](experimental/about)\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson)\n\n\n\nExample of an import modal\n\n## Choose a file (modal)\n\nWhere a single file is imported, import can take place in a modal.\n\nWhen importing, users should have the option of uploading a local file using the file upload component, offering file drag and drop and the ability to browse locally to select a file. Additionally, provide the ability to add a file from an external resource.\n\nIf additional actions (e.g. adding metadata) are required to be performed on the file(s), consider whether it would be more appropriate to use a side panel or full page instead of a modal.\n\n\n\n\n\n\nExample of an import modal\n\n\n
\n\n\n\n\n\n\nExample of drag and drop file import\n\n\n
\n\n\n\n\n\n\nExample of a loaded file in the import modal\n\n\n
\n\n### Import from a URL (modal)\n\nIf your product supports importing from a URL, use this method.\n\n\n\n\n\n\nExample of importing with a URL\n\n\n
\n\n\n\n\n\nExample of a file imported by URL\n\n\n
\n\n## Choose a file (full page or side-panel)\n\nUse the drag and drop file upload component and offer the option to browse locally to select a file. Note that file selection should be restricted to allowed file types.\n\nIf additional actions (e.g. adding metadata) are required to be performed on the file(s) they should be done separately to the file upload, prior to the import action being completed. This could be in a subsequent step or if there is sufficient space include those actions in a single step.\n\n\n\n\n\n\nExample of an import dialog in a full page view\n\n\n
\n\n\n\n\n\n\nExample of drag and drop file import in a Slide over panel\n\n\n
\n\n\n\n\n\n\nExample of files loading into the import dialog\n\n\n
\n\n\n\n\n\nExample of files loaded in the import dialog\n\n\n
\n\n### Import from a URL (full page or side-panel)\n\nIf your product supports importing from a URL, use this method.\n\n\n\n\n\n\nExample of importing with a URL\n\n\n
\n\n\n\n\n\n\nExample of importing with a URL\n\n\n
\n","type":"Mdx","contentDigest":"6f8d38f8e3f02b108b9e25e84061831a","counter":1629,"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\n\nThe import action transfers data or objects from an external source into a system.\n\n\n\n#### Status:\n\n[Experimental](experimental/about)\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson)\n\n\n\nExample of an import modal\n\n## Choose a file (modal)\n\nWhere a single file is imported, import can take place in a modal.\n\nWhen importing, users should have the option of uploading a local file using the file upload component, offering file drag and drop and the ability to browse locally to select a file. Additionally, provide the ability to add a file from an external resource.\n\nIf additional actions (e.g. adding metadata) are required to be performed on the file(s), consider whether it would be more appropriate to use a side panel or full page instead of a modal.\n\n\n\n\n\n\nExample of an import modal\n\n\n
\n\n\n\n\n\n\nExample of drag and drop file import\n\n\n
\n\n\n\n\n\n\nExample of a loaded file in the import modal\n\n\n
\n\n### Import from a URL (modal)\n\nIf your product supports importing from a URL, use this method.\n\n\n\n\n\n\nExample of importing with a URL\n\n\n
\n\n\n\n\n\nExample of a file imported by URL\n\n\n
\n\n## Choose a file (full page or side-panel)\n\nUse the drag and drop file upload component and offer the option to browse locally to select a file. Note that file selection should be restricted to allowed file types.\n\nIf additional actions (e.g. adding metadata) are required to be performed on the file(s) they should be done separately to the file upload, prior to the import action being completed. This could be in a subsequent step or if there is sufficient space include those actions in a single step.\n\n\n\n\n\n\nExample of an import dialog in a full page view\n\n\n
\n\n\n\n\n\n\nExample of drag and drop file import in a Slide over panel\n\n\n
\n\n\n\n\n\n\nExample of files loading into the import dialog\n\n\n
\n\n\n\n\n\nExample of files loaded in the import dialog\n\n\n
\n\n### Import from a URL (full page or side-panel)\n\nIf your product supports importing from a URL, use this method.\n\n\n\n\n\n\nExample of importing with a URL\n\n\n
\n\n\n\n\n\n\nExample of importing with a URL\n\n\n
\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/experimental/import-pattern/index.mdx"}}}}