issue on file upload component and grid

I am currently working on a file upload component and do not require any process model for my use case. I have successfully uploaded an Excel file containing data for five users. To read this data, I have written an expression rule, which is functioning correctly. However, I am encountering an issue: after uploading the Excel file and clicking the submit button, I need to display the data in a read-only grid. Could anyone provide a suggestion or solution for this matter?

Thank you in advance for your assistance.

a!localVariables(
  a!formLayout(
    label: "",
    contents: {
      a!sectionLayout(
        label: "Create Users in Bulk",
        contents: {
          a!linkField(
            instructions: "Add additional rows with user information based on the header",
            links: {
              a!documentDownloadLink(
                label: "CSV Template",
                document: cons!GUM_USER_CSV_DOC
              )
            }
          ),
          a!fileUploadField(
            label: "User List",
            labelPosition: "ABOVE",
            target: cons!TAP_TARGET_FOLDER,
            maxSelections: 1,
            value: ri!excelDocument,
            saveInto: { ri!excelDocument },
            required: true,
            
          )
        }
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Submit",
          value: false,
          saveInto: ri!cancel,
          submit: true,
          style: "SOLID",
          loadingIndicator: true
        )
      },
      secondaryButtons: {
        a!buttonWidget(
          label: "Cancel",
          value: true,
          saveInto: { ri!cancel },
          submit: true,
          style: "OUTLINE",
          validate: false
        )
      }
    )
  ),
  rule!TAP_upload(
    userdata: ri!excelDocument,
    showwhen: ri!cancel = true()
  )
)

#uicode -tap_upload#
a!localVariables(
  local!userData: rule!TAP_ReadUsers(document:ri!userdata),
  
  {
    a!sectionLayout(
      label: "",
      contents: {
        a!gridField(
          data: local!userData,
          columns: {
            a!gridColumn(
              label: "Username",
              sortField: "username",
              value: fv!row.username
            ),
            a!gridColumn(
              label: "First Name",
              sortField: "firstName",
              value: fv!row.firstName
            ),
            a!gridColumn(
              label: "Last Name",
              sortField: "lastName",
              value: fv!row.lastName
            ),
            a!gridColumn(
              label: "Email",
              sortField: "email",
              value: fv!row.email
            )
          }
        )
      },
      showWhen: ri!showwhen
    )
  }
)