UX Patterns Guide
Back to compare picker

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

Prefer bulk import when the file contains multiple structured records, not just one attachment, and the product must parse rows into domain objects.

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

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 page has a single Upload spreadsheet button and a spinner, then says Import failed without row numbers, column names, or a corrected-file path.A button labelled Browse sits under Documents with no hint about accepted formats, size limit, or whether the selected file was uploaded.A dashed rectangle says Drop here but has no label, no click fallback, no accepted formats, and no state change while files hover over it.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 user uploads a file, the product commits immediately, and only afterward shows that 300 rows were skipped with no file explaining which rows failed.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 user changes an early answer and the form silently submits later answers that no longer apply.
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.The main audience is mobile-only or cannot reasonably drag files from the operating system.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.Not-started state with clear start point and expectation of the steps or sections ahead.
Accessibility burden Use a real file input or button for selecting the import file, even when drag-and-drop is also available.Use a visible label that names the file purpose, not only Browse or Choose file.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 Treating a spreadsheet import like a generic file attachment with no mapping or row validation.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 page has a single Upload spreadsheet button and a spinner, then says Import failed without row numbers, column names, or a corrected-file path.
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 user uploads a file, the product commits immediately, and only afterward shows that 300 rows were skipped with no file explaining which rows failed.
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
Treating a spreadsheet import like a generic file attachment with no mapping or row validation.

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 button labelled Browse sits under Documents with no hint about accepted formats, size limit, or whether the selected file was uploaded.
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
Use a visible label that names the file purpose, not only Browse or Choose file.
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
A dashed rectangle says Drop here but has no label, no click fallback, no accepted formats, and no state change while files hover over it.
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
The main audience is mobile-only or cannot reasonably drag files from the operating system.
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 user changes an early answer and the form silently submits later answers that no longer apply.
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
Not-started state with clear start point and expectation of the steps or sections ahead.
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.