JSS: File [DAM]

This is an example implementation. Adapt the component, helper usage, styling, fallback behavior, and rendering logic to fit your own JSS application.

Parse the XML-wrapped JSON field value and render the selected file as a download link.

DamFile.tsx

import React from 'react';
import { Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { getFieldFile, getSingleAsset } from '@/lib/bynder-xm-xp-headless';
 
type DamFileProps = {
  fields: {
    file?: Field<string>;
  };
};
 
const DamFile = ({ fields }: DamFileProps) => {
  const asset = getSingleAsset(fields.file);
  const file = getFieldFile(fields.file);
 
  if (!file?.url) {
    return null;
  }
 
  return <a href={file.url}>{asset?.name || file.name || 'Download file'}</a>;
};
 
export default withDatasourceCheck()<DamFileProps>(DamFile);

General Link Extension methods