Is there a better way to display filenames of multiple files?

[Nayjay]

I’m using the file picker with a multiple file column to allow the user to upload multiple documents. The only method I have found to give the user the option to view the documents is the ‘Link’ component. However with this option, it adds ‘%20’ in place of spaces in the filename. The link component also cuts off the end of the filename if it is too long, i.e. it doesn’t wrap. Both of these things create a negative user experience and make viewing a file difficult for the user. Is there a better way to view a file that is uploaded as part of a multiple file column? Thanks!

[Harsh_Ganatra]

You can use a href tag instead of using the link component,

You can paste this in richtext component and should look alot more cleaner

[Nayjay]

Thank you! I’m still struggling to figure out a way to display the filenames of each file though with that method. For example, say a user uploads three files. The multiple files column has the data as an array of three links. I’ve put together a bunch of template columns to get the rich text that is close to what I want, but not exactly. I’m looking for clickable links of all documents uploaded, with the display text being the filename.

[ThinhDinh]

Here’s my approach.

function generateLinksHTML(urlString) {
  // Splits the comma-delimited string into an array of URLs
  const urls = urlString.split(',');

  // Decodes URL-encoded characters using decodeURIComponent
  const decodeUrls = urls.map(url => decodeURIComponent(url));

  // Defines the inline CSS for the pill-style links
  const linkStyle = 'padding: 8px 15px; background-color: #613DC7; color: white; text-decoration: none; border-radius: 20px; margin: 5px; display: inline-block; font-size: 14px;';

  // Creates an HTML string with anchor tags for each URL, including the ↗ emoji
  const linksHTML = decodeUrls.map(url => {
    const fileName = url.split('/').pop();
    return `<a href="${url}" target="_blank" style="${linkStyle}">↗ ${fileName}</a>`;
  }).join('');

  // Returns the full HTML string
  return `<div class="links-component" style="margin-bottom: 10px;">${linksHTML}</div>`;
}

return generateLinksHTML(p1)

[Nayjay]

This is awesome, thank you so much!