I want to display attachment details after I upload the attachment. unable to find a good example

There is plenty discussions covering this topic here.

In short, document information is only available after submit. For your use case, create a second interface showing your grid and enable chaining in the process model to forward the user directly to this interface.

Additionally, here's some sample code to display document details in a grid fashion utilizing the folder ID to retrieve documents (how we typically do it):

a!localVariables(
  local!docs: fn!folder(500170,"documentChildren"),
  
  a!gridLayout(
    headerCells: a!forEach(
      items: {"Name","Type","Size","Uploaded By","Date"}, 
      expression: a!gridLayoutHeaderCell(label: fv!item)
    ),
    columnConfigs:  a!forEach(
      items: fn!repeat(5,"DISTRIBUTE"), 
      expression: a!gridLayoutColumnConfig(width: fv!item)
    ),
    rows: a!forEach(
      items: local!docs,
      expression: a!gridRowLayout(
        id: fv!index,
        contents: {
          a!richTextDisplayField(
            value: document(fv!item,"name")
          ),
          a!richTextDisplayField(
            value: document(fv!item,"extension")
          ),
          a!richTextDisplayField(
            value: document(fv!item,"size")
          ),
          a!richTextDisplayField(
            value: document(fv!item,"lastUserToModify")
          ),
          a!richTextDisplayField(
            value: document(fv!item,"dateCreated")
          )
        }
      )
    )
  )
)

thank you all

document() can help you