File Item

  • A static component to preview files fetched from the url or download to user’s machine locally if file originates from the same domain.
  • Allows files from the same origin to be downloaded.
  • Allows showing previews of the files supported by respective browsers.
  • By default, files of type PDF, IMAGES(.img/.png/.jpeg) are shown in the preview. For not supported file types like xls,ppt the file will be automatically downloaded to the user’s machine.

Files are automatically rendered inside the browser if the browser can view those files. A file preview will only be shown of the file types which are supported by the browsers. To make the file downloadable, make sure it is from the same origin.

The parameters for FileItem are:

Name Type Default Values Description
icon string ftblank ftblank, ftexcel, ftword, ftpdf the icon to display for the file type
url string - # the url of the file being downloaded/opened
alt string File to Download - the alternate text to display if your file is not rendered by the browser
title string Download File - the name of your file
linkOpenTarget string tab tab, download whether the file should be downloaded or opened in a new tab
showPreview boolean false true, false whether the file preview should be shown for the supported files. Files of type pdf, images are supported.
mimeType string - application/pdf, image/png, etc mimeType is needed to preview the file. A valid mimeType should be passed. Reference https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

An example of FileItem markup is (with preview):

<TimelineMessage>
  <FileItem icon="ftpdf"
    url="https://servisbot.com/wp-content/uploads/2019/08/ServisBOT_AA_CaseStudy.pdf"
    alt="information file"
    title="Please download this file for more information."
    linkOpenTarget="download" showPreview="true"
    mimeType="application/pdf" />
</TimelineMessage>

An example of FileItem markup is (without preview):

<TimelineMessage>
  <FileItem icon="ftpdf"
    url="https://servisbot.com/wp-content/uploads/2019/08/ServisBOT_AA_CaseStudy.pdf"
    alt="information file"
    title="Please download this file for more information."
    linkOpenTarget="download"
    mimeType="application/pdf" />
</TimelineMessage>