Adding files to web apps

This guide describes adding different file formats such as PDF, ZIP, GIF, and more to your web application using Prepr.

Introduction

Prepr allows you to add several file formats to a web application. You can use popular file types like PDF and ZIP, for example, to publish a Press kit, Terms of use, or any other document you want your website visitors to download.

Prerequisites

You need to have the following setup before you can embed downloadable files in your web application.

A free Prepr account
At least one content model in your environment.

For more information on how to set up a content model in Prepr, check out the content modeling basics. If you’re still unsure about how to structure your content, check out our example models for inspiration.

Adding downloadable files to your web application

The steps below make use of the example of downloadable files in blog articles.

Define the Assets field in your model

To allow editors to add files to content items, you need to add the Assets field to the corresponding model as follows:

Click the Schema tab and click the model you want to update.

Define file asset field in model

Drag the Assets field from the list of field types to the position you want it in your model.
Following this example, choose the Multi-asset field. This means content editors can add multiple files to a blog article content item.
Enter the Display name and make sure only the File asset type is enabled.
Click the Settings tab to enable the Caption, for example. Then click the Save button. For more information on different settings, check out the Field types guide.

Now, content editors can add and configure a file when they create or edit a blog article content item.

Add files to a content item

Now that you’ve allowed content editors to add files to content items for a model, let’s look at the typical steps a content editor follows to do this.

Navigate to the Content tab. You can either create a new content item or open an existing one.

add files to content item

In the content item, you can simply drag multiple files from your local storage to the asset block or choose existing files in the Media library.
Add a caption, if needed. The required configuration depends on the settings defined in the previous step.

The content editor can configure the asset with the following options if these are enabled in the settings of the Assets field:

Setting alignment to define the position (left, right or center) on a web page.
Adding captions to provide a comprehensive description of your files. If you run a multi-language application, you can easily localize image captions.

Now that you have content items with downloadable files, let’s look at how to request those content items and files using API requests.

Retrieve files using the API

Now that you have content items with files, let’s look at how to request those content items and files using API requests.

The following GraphQL query shows how to retrieve downloadable files. You may want to add or remove fields according to your desired set-up. For more information, see the GraphQL API reference.

QUERY


query {
	BlogArticle (id: "36136491-a333-44be-a53f-111ef7597") { 
		_id
		title
		_slug
		downloads {
      _id
      url
    	caption
    	alignment
    	mime_type
		}
	}
}

Please check out the Connecting front-end apps guide to learn more about retrieving content in a specific front-end framework.

That’s it. Once you publish your content item, your file becomes available in your web application for download.

Want to learn more?

Check out the following guides to learn how to add other asset types to your web application: