### Problem to solve 1. Currently, when a user uploads a file to import a group, they must manually type the `Group name` and `Group URL`. The system should be able to detect and autofill the name of the group based on the file name. 2. We need to update the file upload component to follow the [Pajamas file upload](https://design.gitlab.com/components/file-uploader) pattern. ### User experience goal Give the user as few steps as possible to import their group. By prepopulating the name and URL fields saves time and prevents the user from potentially typing in the incorrect information. ### Proposal | (Old) Empty state | (Updated) Empty state | | ------ | ------ | |  |  | Actions: | (Updated) File attached | (Updated) Hover state | Prototype | | ------ | ------ | ------ | |  |  | :eye: **View [prototype](https://www.figma.com/proto/172xfiDoBgsQH2jwZbFZFw/Import-groups-auto-fill?node-id=94%3A3732&scaling=min-zoom) to see the interaction.** |