UX Patterns Guide
Back to compare picker

Bulk import vs File upload vs Drag-and-drop upload vs Multi-step form

Use bulk import when a structured file creates or updates many records and needs mapping, validation, repair, confirmation, and an import report; use file upload or drag-and-drop for attachments, and multi-step form for guided single-record entry.

Bulk import live exampleFile upload live exampleDrag-and-drop upload live exampleMulti-step form live example
Learn the decision

Match the interaction to the person's task

Use bulk import when a structured file creates or updates many records and needs mapping, validation, repair, confirmation, and an import report; use file upload or drag-and-drop for attachments, and multi-step form for guided single-record entry.

Bulk import

Use it when: Users need to create, update, or merge many structured records from CSV, XLSX, TSV, copied spreadsheet data, or another system export.

Make this state clear: Pre-import requirements state with template, accepted file types, encoding, row limit, column limit, required fields, and side effects.

Observe the result: A user uploads contacts.csv, reviews suggested mappings, fixes Department to Team, filters to rows with errors, chooses Import valid rows and export invalid rows, confirms 1138 new and 20 skipped records, then downloads the error report.

Study the full pattern →

File upload

Use it when: The service needs a document, image, scan, spreadsheet, media file, or other original file.

Make this state clear: Empty labelled state with requirements hint and choose-file action.

Observe the result: A user selects bank-statement.pdf, sees it queued, watches progress reach uploaded, removes it to choose another file, then submits after reviewing the rest of the form.

Study the full pattern →

Drag-and-drop upload

Use it when: Users often upload files from a desktop file manager and benefit from dropping one or more files into a visible target.

Make this state clear: Idle drop zone with visible label, requirements, and choose-file fallback.

Observe the result: A user drags two PDFs over the zone, sees the target activate, drops them, reviews both filenames, removes the wrong one, uploads the remaining file, and then continues.

Study the full pattern →

Multi-step form

Use it when: A transaction spans several ordered pages or sections.

Make this state clear: Current step state with heading, saved context, local answer controls, Back, and Continue.

Observe the result: A user completes eligibility and contact details, goes Back from documents, sees contact details still filled, continues, and returns to the same documents step.

Study the full pattern →

Practice the judgment: Imagine this situation: A CSV is accepted like a normal attachment, then silently imports columns into the wrong fields. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.

Review the underlying principle →

Decision dimensions

Dimension Bulk importFile uploadDrag-and-drop uploadMulti-step form
UI or UX UI + UX - Structured file import workflow with mapping, validation, repair, and result reportingUI + UX - File selection and attachment controlUI + UX - Drop-zone file upload enhancement with file input fallbackUI + UX - Multi-page transaction with saved step state
UI guidance Show the import as a staged workflow: template or requirements, file upload, detected headers, column mapping, sample row preview, validation results, duplicate review, confirmation, progress, and final report.Render a visible label, persistent hint, native file chooser or equivalent button, accepted file formats, maximum file size, selected filename, uploaded status, remove control, and field-specific error message.Render a large labelled drop zone with clear copy that says users can drag files there or activate a normal file picker, plus visible format, size, and count requirements.Render each step as a focused page with a clear heading, progress context when useful, Back and Continue controls, local validation, and a final review page before submission.
UX guidance Use bulk import when users need to create or update many structured records from a spreadsheet, and make them prove mapping and validation before the product commits data.Use file upload only when the service needs the original file and make expectations clear before the user opens the file picker.Use drag-and-drop upload as an enhancement for users who can drag files from a file manager, while preserving an equivalent click, keyboard, and mobile path.Use a multi-step form when a transaction is too long, conditional, high-stakes, or hard to recover from as one page, and users need manageable saved progress.
Good UI A contacts importer starts with a downloadable CSV template, then shows Email mapped to Email address, Role mapped to Access role, three sample rows, and a warning that Phone is optional and unmapped.An evidence upload field says Upload bank statement, hints PDF, PNG, or JPG up to 10 MB, shows statement.pdf selected, displays upload progress, and offers Remove.A drop zone says Drag bank statements here or choose files, shows PDF/PNG/JPG up to 10 MB, highlights when files hover over it, lists two dropped filenames, and keeps a Choose files button visible.A benefit application has Eligibility, Contact details, Documents, Review, and Submit pages, with the current step named in the heading and completed steps shown from saved data.
Bad UI A required field is unmapped but the user can still start the import.A failed upload clears other form answers or returns users to the start of the journey.The whole page becomes a hidden drop target that opens the dropped file in the browser when users miss the box.A five-screen flow shows all steps as complete after users only viewed them.
Good UX A user uploads contacts.csv, reviews suggested mappings, fixes Department to Team, filters to rows with errors, chooses Import valid rows and export invalid rows, confirms 1138 new and 20 skipped records, then downloads the error report.A user selects bank-statement.pdf, sees it queued, watches progress reach uploaded, removes it to choose another file, then submits after reviewing the rest of the form.A user drags two PDFs over the zone, sees the target activate, drops them, reviews both filenames, removes the wrong one, uploads the remaining file, and then continues.A user completes eligibility and contact details, goes Back from documents, sees contact details still filled, continues, and returns to the same documents step.
Bad UX A required field is unmapped but the user can still start the import.A user selects a 28 MB scan, clicks Continue, and the page reloads with File failed but the selected filename and other answers are gone.A user drags a file over the page, misses the small target, and the browser navigates to the file, wiping unsaved answers.A browser refresh on step 3 clears steps 1 and 2, forcing the user to start again.
Best fit Users need to create, update, or merge many structured records from CSV, XLSX, TSV, copied spreadsheet data, or another system export.The service needs a document, image, scan, spreadsheet, media file, or other original file.Users often upload files from a desktop file manager and benefit from dropping one or more files into a visible target.A transaction spans several ordered pages or sections.
Avoid when The task needs one document or image attachment rather than parsed record data.A typed answer, reference number, checkbox, or declaration would satisfy the task.A normal file input is sufficient and the extra drop-zone states would add confusion.The fields are short, related, and easier to scan together on one page.
Required state Pre-import requirements state with template, accepted file types, encoding, row limit, column limit, required fields, and side effects.Empty labelled state with requirements hint and choose-file action.Idle drop zone with visible label, requirements, and choose-file fallback.Current step state with heading, saved context, local answer controls, Back, and Continue.
Accessibility burden Use a real file input or button for selecting the import file, even when drag-and-drop is also available.Keep requirements in persistent hint text and associate them with the file input or upload button.Keep a visible label and instructions that name both drag-and-drop and choose-file paths.Use a clear page heading on every step and keep it synchronized with route and progress context.
Common misuse Auto-starting the import immediately after upload.Asking for a file when a typed reference number or simple answer would be enough.Replacing the normal file chooser with a drop zone that only pointer users can operate.Using a multi-step form to hide a short related form that users should review on one page.

Bulk import

UI or UX
UI + UX - Structured file import workflow with mapping, validation, repair, and result reporting
UI guidance
Show the import as a staged workflow: template or requirements, file upload, detected headers, column mapping, sample row preview, validation results, duplicate review, confirmation, progress, and final report.
UX guidance
Use bulk import when users need to create or update many structured records from a spreadsheet, and make them prove mapping and validation before the product commits data.
Good UI
A contacts importer starts with a downloadable CSV template, then shows Email mapped to Email address, Role mapped to Access role, three sample rows, and a warning that Phone is optional and unmapped.
Bad UI
A required field is unmapped but the user can still start the import.
Good UX
A user uploads contacts.csv, reviews suggested mappings, fixes Department to Team, filters to rows with errors, chooses Import valid rows and export invalid rows, confirms 1138 new and 20 skipped records, then downloads the error report.
Bad UX
A required field is unmapped but the user can still start the import.
Best fit
Users need to create, update, or merge many structured records from CSV, XLSX, TSV, copied spreadsheet data, or another system export.
Avoid when
The task needs one document or image attachment rather than parsed record data.
Required state
Pre-import requirements state with template, accepted file types, encoding, row limit, column limit, required fields, and side effects.
Accessibility burden
Use a real file input or button for selecting the import file, even when drag-and-drop is also available.
Common misuse
Auto-starting the import immediately after upload.

File upload

UI or UX
UI + UX - File selection and attachment control
UI guidance
Render a visible label, persistent hint, native file chooser or equivalent button, accepted file formats, maximum file size, selected filename, uploaded status, remove control, and field-specific error message.
UX guidance
Use file upload only when the service needs the original file and make expectations clear before the user opens the file picker.
Good UI
An evidence upload field says Upload bank statement, hints PDF, PNG, or JPG up to 10 MB, shows statement.pdf selected, displays upload progress, and offers Remove.
Bad UI
A failed upload clears other form answers or returns users to the start of the journey.
Good UX
A user selects bank-statement.pdf, sees it queued, watches progress reach uploaded, removes it to choose another file, then submits after reviewing the rest of the form.
Bad UX
A user selects a 28 MB scan, clicks Continue, and the page reloads with File failed but the selected filename and other answers are gone.
Best fit
The service needs a document, image, scan, spreadsheet, media file, or other original file.
Avoid when
A typed answer, reference number, checkbox, or declaration would satisfy the task.
Required state
Empty labelled state with requirements hint and choose-file action.
Accessibility burden
Keep requirements in persistent hint text and associate them with the file input or upload button.
Common misuse
Asking for a file when a typed reference number or simple answer would be enough.

Drag-and-drop upload

UI or UX
UI + UX - Drop-zone file upload enhancement with file input fallback
UI guidance
Render a large labelled drop zone with clear copy that says users can drag files there or activate a normal file picker, plus visible format, size, and count requirements.
UX guidance
Use drag-and-drop upload as an enhancement for users who can drag files from a file manager, while preserving an equivalent click, keyboard, and mobile path.
Good UI
A drop zone says Drag bank statements here or choose files, shows PDF/PNG/JPG up to 10 MB, highlights when files hover over it, lists two dropped filenames, and keeps a Choose files button visible.
Bad UI
The whole page becomes a hidden drop target that opens the dropped file in the browser when users miss the box.
Good UX
A user drags two PDFs over the zone, sees the target activate, drops them, reviews both filenames, removes the wrong one, uploads the remaining file, and then continues.
Bad UX
A user drags a file over the page, misses the small target, and the browser navigates to the file, wiping unsaved answers.
Best fit
Users often upload files from a desktop file manager and benefit from dropping one or more files into a visible target.
Avoid when
A normal file input is sufficient and the extra drop-zone states would add confusion.
Required state
Idle drop zone with visible label, requirements, and choose-file fallback.
Accessibility burden
Keep a visible label and instructions that name both drag-and-drop and choose-file paths.
Common misuse
Replacing the normal file chooser with a drop zone that only pointer users can operate.

Multi-step form

UI or UX
UI + UX - Multi-page transaction with saved step state
UI guidance
Render each step as a focused page with a clear heading, progress context when useful, Back and Continue controls, local validation, and a final review page before submission.
UX guidance
Use a multi-step form when a transaction is too long, conditional, high-stakes, or hard to recover from as one page, and users need manageable saved progress.
Good UI
A benefit application has Eligibility, Contact details, Documents, Review, and Submit pages, with the current step named in the heading and completed steps shown from saved data.
Bad UI
A five-screen flow shows all steps as complete after users only viewed them.
Good UX
A user completes eligibility and contact details, goes Back from documents, sees contact details still filled, continues, and returns to the same documents step.
Bad UX
A browser refresh on step 3 clears steps 1 and 2, forcing the user to start again.
Best fit
A transaction spans several ordered pages or sections.
Avoid when
The fields are short, related, and easier to scan together on one page.
Required state
Current step state with heading, saved context, local answer controls, Back, and Continue.
Accessibility burden
Use a clear page heading on every step and keep it synchronized with route and progress context.
Common misuse
Using a multi-step form to hide a short related form that users should review on one page.
Decision rules
  • Prefer bulk import when the file contains multiple structured records, not just one attachment, and the product must parse rows into domain objects.
  • Prefer file upload when the service needs the original document, image, or spreadsheet as evidence and does not need to map columns into editable records.
  • Prefer drag-and-drop upload when dropping files is a convenience enhancement around the same attachment queue, not when users need row repair and import results.
  • Prefer multi-step form when one user is entering one record or application through guided pages instead of preparing a spreadsheet offline.
  • Bulk import must include a template or format requirements before upload, then expose detected headers, required fields, inferred mappings, unmapped columns, and sample row previews.
  • Bulk import must validate before commit: show row numbers, field names, duplicate matches, missing required values, type/date/enum errors, and whether valid rows can proceed while invalid rows are excluded.
  • Bulk import must make create/update/merge behavior explicit, including which identifiers match existing records and which blank values overwrite or preserve existing data.
  • Bulk import needs a final confirmation that summarizes new, updated, skipped, invalid, duplicate, and warning counts before it changes data.
  • Bulk import should produce a result report or error export so users can correct only failed rows instead of rebuilding the entire file.
  • Do not represent bulk import as a generic drop zone, because users need mapping, preview, repair, side-effect review, import status, and post-import auditability.
Inspect live examples
Bulk importFile uploadDrag-and-drop uploadMulti-step form
Failure modes
  • A CSV is accepted like a normal attachment, then silently imports columns into the wrong fields.
  • The product starts importing immediately after upload without showing mappings, duplicate rules, or overwrite behavior.
  • Errors say invalid file but omit row numbers, column names, required fields, accepted values, or a downloadable error report.
  • Blank cells overwrite existing data because the update mode and preserve-empty behavior were not visible.
  • The user cannot tell whether valid rows were imported, skipped, queued, or rolled back after some rows fail.
  • A large file freezes in a loading state with no progress, cancel path, import history, or recovery from partial failure.

Saved items