Files

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. Besides, you can use the SVG and GIF graphics as a File asset in Prepr.

To add a file to a web application, you need to complete the following steps:

1. First, allow using assets in a model.
2. Next, add a file to a content item.
3. Finally, retrieve a file using the API.

See the detailed instructions below.

Step 1: Add an Assets field to your model

To use assets in your content items, you must first add the Assets field to a content model as follows:

1. Click the Schema tab to open the Schema Editor.
2. Click on a model to open its details.
3. Click or drag the Assets field from the list of field types into your model.

4. Fill in the Assets field settings, then click Save to confirm. For more information, check out the Field types guide.

Once done, you can add a file to your content item.

Step 2: Add a file to a content item

Now that you have allowed using assets in a model, you can add a file to your content item as follows:

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

2. On the Content item page, go to the media placeholder and click the icon.

3. Select one or multiple images from the Media Library or upload new ones.

4. Click Add x items to confirm.

Optionally, you can edit a file in the Prepr Editor interface as follows:

• Add a caption to provide additional information about your file. If you run a multi-language application, you can easily localize image captions.
• Set alignment to define the position of a file on a web page.

On the Content item page, hover over a file and click tthe icon in the top right corner, then select the needed action.

Once done, proceed to the next step.

Step 3: Retrieve a file using the API

Once you have completed the previous steps, you can retrieve your file using the API.

Use the following snippets as a starting point to retrieve an identifier, a URL and the type of your file. You may want to add or remove arguments according to your desired set-up. For more information, see the GraphQL API reference.

query {
Blog (id: "bb6e51df-94bb-4708-8cf8-40229058a2ab") {
 media {
   _id
   url
   mime_type
  }
 }
}

curl --location --request POST 'https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"{Blog (id: \"bb6e51df-94bb-4708-8cf8-40229058a2ab\") { media { _id url mime_type}}}","variables":{}}'

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var graphql = JSON.stringify({
query: "{Blog (id: \"bb6e51df-94bb-4708-8cf8-40229058a2ab\") { media { _id url mime_type}}}",
variables: {}
})
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: graphql,
redirect: 'follow'
};

fetch("https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

// WARNING: For POST requests, body is set to null by browsers.
var data = JSON.stringify({
query: "{Blog (id: \"bb6e51df-94bb-4708-8cf8-40229058a2ab\") { media { _id url mime_type}}}",
variables: {}
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
  console.log(this.responseText);
}
});

xhr.open("POST", "https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>");
xhr.setRequestHeader("Content-Type", "application/json");

xhr.send(data);

<?php
$client = new Client();
$headers = [
'Content-Type' => 'application/json'
];
$body = '{"query":"{Blog (id: \\"bb6e51df-94bb-4708-8cf8-40229058a2ab\\") { media { _id url mime_type}}}","variables":{}}';
$request = new Request('POST', 'https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>', $headers, $body);
$res = $client->sendAsync($request)->wait();
echo $res->getBody();

{
"data": {
  "Blog": {
    "media": [
      {
        "_id": "bb6e51df-94bb-4708-8cf8-40229058a2ab",
        "url": "https://my-test-website-wwwpreprio.files.prepr.io/34lfrtrrnpbl-file.pdf",
        "mime_type": "application/pdf"
      }
    ]
  }
 }
}

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:

• Images
• Video & Audio
• Live video stream