PDF Files

Suggest Edits

Overview

PDF files can be uploaded to Shogun Frontend using the Media type variable, it works for both CMS and Section. You can upload a single or multiple PDF files, by using the Multiple Values feature.

Once a PDF file is uploaded, the returned object shape will be like this:

{
  name: 'Hello World.pdf',
  src: '/path/to/hello_world.pdf',
  alt: 'Use me as thte title field of the file or as a screen reader'
}

📘

What is the alt text field for?

In this case, the alt attribute is used to set a proper title for your uploaded PDF file.

The alt text field in action.

Section - Media Variable

Given this Section variable:

251

A variable called "doc", (type Media). The Multiple Values options is disabled.

We can display the PDF files uploaded to this variable with the following snippets:

import React from 'react'

const Component = ({ doc }) => {
  if (!doc) return null

  return (
    <div>
      <a href={doc.src} title={doc.name || doc.alt}>Download {doc.name}</a>
    </div>
  )
}

export default Component

import React from 'react'

const Component = ({ docs = [] }) => (
  <div>
    {docs.map((doc, i) => (
      <div key={`doc-key-${i}`}>
        <a href={doc.src} title={doc.name || doc.alt}>Download {doc.name}</a>
      </div>
    ))}
  </div>
)

export default Component

CMS - Media Variable

Given the following CMS Group; Books:

389

A CMS Group called "Books", with two fields; a field called "File", (type Media) and another field called "Name", (type Text).

We can create a Reference type variable that targets a specific book:

251

A variable called "Books", (type Reference) with two fields; a field called "File", type Media and another field called "Name", type Text. The Multiple Values option is disabled.

🚧

Don't forget to enable our media field. In our case, the file field.

To display the PDF files uploaded, we can slightly tweak the previous code snippets:

import React from 'react'

const Component = ({ book }) => {
  if (!book) return null

  return (
    <div>
      <a href={book.file.src} title={book.file.alt}>
        Download {book.name}
      </a>
    </div>
  )
}

export default Component

import React from 'react'

const Component = ({ books = [] }) => (
  <div>
    {books.map((book, i) => (
      <div key={`book-key-${i}`}>
        <a href={book.file.src} title={book.file.alt}>
          Download {book.name}
        </a>
      </div>
    ))}
  </div>
)

export default Component

Updated over 1 year ago