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.
Section - Media Variable
Given this Section variable:
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:
Single PDF file
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
Multiple PDF files
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:
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:
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:
CMS - Single PDF file
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
CMS - Multiple PDF Files
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