iSmart Apps

Dynamic File Icon Presentation with File Picker and List View

Nagma Mogal

Nagma Mogal

Oracle Cloud Applications Developer

Dynamic File Icon Presentation with File Picker and List View Components

When a user uploads a file, dynamically display the corresponding icon based on the file type.

Whether it’s a PDF, Word document, image, spreadsheet, or presentation, each icon represents a different file type, facilitating quick navigation and retrieval.

To achieve this dynamic display of icons for uploaded files based on their types, follow these steps:

Step 1: Incorporate a file picker enabling users to select their files.

Step 2: Utilise the List View component to present file details, including file type icons and names.

These file type icons can be dynamically controlled based on the selected file.

Implement the following expression within the class attribute of a span component, which can be placed within any of the slots in the List View.

Expression:

$current.data.type === “application/pdf” ? “oj-ux-ico-file-pdf” :($current.data.type === “application/msword” || $current.data.type === “application/vnd.openxmlformats-officedocument.wordprocessingml.document” ? “oj-ux-ico-file-word” :($current.data.type === “application/vnd.ms-excel” || $current.data.type === “application/vnd.openxmlformats-officedocument.spreadsheetml.sheet” ? “oj-ux-ico-file-excel” :($current.data.type.startsWith(“image/”) ? “oj-ux-ico-file-image” :($current.data.type === “text/plain” ? “oj-ux-ico-file-text” :($current.data.type === “text/csv” ? “oj-ux-ico-file-csv” :”oj-ux-ico-default-file”)))))

Nagma Mogal
Oracle Cloud Applications Developer

Nagma Mogal
Oracle Cloud Applications Developer

Nagma Mogal

Nagma is an Oracle Certified Cloud Applications Expert with a focus on Oracle Visual Builder and HR Help Desk.

She has a strong track record of creating innovative, cost-efficient applications for large enterprises using Oracle technology.

Additionally, has proven expertise  in React.js and has delivered web and mobile apps for small businesses.

Share this article on

You might like