Extras - Community Posting

Add a pdf upload field

Through Supersparks, you can allow users upload a pdf for an pdf field when a new CMS item gets created from the community post form. This is great for allowing users to provide a viewable and downloadable pdf with their post - for example, allowing job hunters to share a resume on a recruitment platform.

Create a file field

To get started, create a CMS field in the collection where Supersparks is creating new CMS items for posts.

Select the file field in Supersparks

Next, go to Supersparks extra features library, select the file field you just created in the dropdown, and click save.

Paste the upload component into your rich text form

After, you can select a component for the upload input and then copy & paste it into your Supersparks rich text form in Webflow.

Copying the pdf upload component
Pasting the pdf upload component into the community posting form

⚠️ Please note, copy & pasting components will not work on Safari. Be sure to use any other browser for this action. ⚠️

Once pasted, you can adapt the styling. Try to avoid removing any elements or attributes as they are likely essential to the functionality of the pdf upload functionality. After publishing, when a user uploads a pdf to the new field, the file will get added to the pdf field when a new CMS item gets created from the rich text form.

A user uploading a resume to the community post form
PDF added to file field field after creating a new post

Display PDF

If you would like to display the pdf on a page, we recommend using the embed element to dynamically load the pdf in an iframe. Below is some code you can use:

<iframe src="{{file-field}}">
</iframe>

Then you would add the file field to the quotation marks above. See an example below:

Video tutorial

// Optional: Add this CSS to your project's custom code section