Rename Files Before Uploading

ProNew

Each chosen file shows an editable name (the extension is locked), names are cleaned of unsafe characters, duplicates get a number, and the sanitised name is what gets uploaded. Use this when file names become part of URLs or records.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

File names are shown to others or used in links, and people should be able to fix them before they are saved.

Do not use it when: If you store files under generated ids, the original name only needs to be kept as metadata.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onSend`	`(files: { file, name }[]) => void \| Promise<void>`	The files with the names to save them under.

sanitizeName, splitName and uniqueNames are exported; apply the same rules on the server.

Accessibility

Each name field has a label that includes the original file ("Name for My Report (final).pdf"); the extension is shown next to it but hidden from assistive technology because it cannot be edited, and the final name is linked as the description.
The result of the cleaning is visible before upload ("Will be saved as ..."), so the change is never a surprise.
Letters from every language are kept; only characters that break URLs and file systems are removed.

Testing

The pattern ships with a Testing Library test (upload-rename-before-send.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

File names are shown to others or used in links, and people should be able to fix them before they are saved.

Do not use it when: If you store files under generated ids, the original name only needs to be kept as metadata.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onSend`	`(files: { file, name }[]) => void \| Promise<void>`	The files with the names to save them under.

sanitizeName, splitName and uniqueNames are exported; apply the same rules on the server.

Accessibility

Each name field has a label that includes the original file ("Name for My Report (final).pdf"); the extension is shown next to it but hidden from assistive technology because it cannot be edited, and the final name is linked as the description.
The result of the cleaning is visible before upload ("Will be saved as ..."), so the change is never a surprise.
Letters from every language are kept; only characters that break URLs and file systems are removed.

Testing

The pattern ships with a Testing Library test (upload-rename-before-send.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.