---
title: "How to Upload Interactives"
canonical: "https://docs.pbs.org/space/DLM/3578222/How+to+Upload+Interactives"
format: markdown
---
Interactives are comprised of one single file or multiple file types. Files can include anything from html to css and js. Download all of your interactive media files using an [Amazon Simple Storage Service (S3)](http://aws.amazon.com/s3/faqs/) compatible file transfer client and then paste the generated link into the PBS LearningMedia CMS as a pointer media. 

This page demonstrates how to upload your interactive media.

> Macro (toc)

## What kind of files should I use?

Interactives can include an assortment of file types including html, css, jpg, js, and mp4.  [View media format guidelines](https://docs.pbs.org/space/DLM/3577864/Media+Format+Guidelines)

A typical file structure might look like this:

![image](media://9e610901-4955-4d44-80e7-b4fcab5f4f04)

> ⚠️ ### Important Notes
> ⚠️ 
> ⚠️ When creating your interactive file folders:
> ⚠️ 
> ⚠️ - Create filenames that DO NOT contain spaces.
> ⚠️   - **Correct:** MyPBSStation or My-PBS-Station
> ⚠️   - **Incorrect:** My PBS Station
> ⚠️ - Include either an index.html page or a home.html page. You must have a parent page from which all other interactive subpages are accessible.
> ⚠️ - To help keep things organized, name folders in a way that they match your content project and asset codes on PBS LearningMedia. While not technically required, it makes the organization of the server much clearer and easier to associate with PBS LearningMedia records.
> ⚠️   - For example, [this interactive](https://mass.pbslearningmedia.org/resource/buac20-35-sci-ps-makingwaves/making-waves/) resource's content project code is **buac20** and the asset code for the interactive is **buac20-int-makewave**
> ⚠️   - The file path and folder names for the interactive on the pbslm-contrib server is as follows: /WGBH/buac20/buac20-int-makewave/index.html

## Types of S3 clients

Download one of the following S3 clients to begin the file transfer process:

- [http://cyberduck.ch/](http://cyberduck.ch/)
- [http://s3browser.com/](http://s3browser.com/)
- [http://www.bucketexplorer.com/](http://www.bucketexplorer.com/)
- [http://www.cloudberrylab.com/free-amazon-s3-explorer-cloudfront-IAM.aspx](http://www.cloudberrylab.com/free-amazon-s3-explorer-cloudfront-IAM.aspx)

## How to download an S3 client

- **Open** a search engine such as Google and type the term “S3 Client” into the search box.
- Click **one of the choices** presented in the search results or choose one of the **following options**:
  - [http://cyberduck.ch/](http://cyberduck.ch/)
  - [http://s3browser.com/](http://s3browser.com/)
  - [http://www.bucketexplorer.com/](http://www.bucketexplorer.com/)
  - [http://www.cloudberrylab.com/free-amazon-s3-explorer-cloudfront-IAM.aspx](http://www.cloudberrylab.com/free-amazon-s3-explorer-cloudfront-IAM.aspx)
- Click the download link that is provided on the site.  Sometimes there are different links for Windows and Mac so be sure to click the appropriate one.
- Follow the **prompts** provided.
- **Open** the S3 client on your computer.

## Transferring files

When your interactive files are ready, transfer your files to the PBS server via the S3 compatible file transfer client.  This section demonstrates how to extract files from a .zip folder and upload your content to the PBS server.

- **Open** your S3 client.
- Enter the following information into each corresponding field (Figure 1):

| **Field** | **Code** |
| --- | --- |
| **Server** | <span style="color: #1f497d">http://d3tt741pwxqwm0.cloudfront.net</span> |
| **User (Access Key) ** | Contact your PBS LearningMedia content team trainer for this information. |
| **Pass (Secret Access Key)** | Contact your PBS LearningMedia content team trainer for this information. |

  
<span style="color: #000000">Figure 1</span>

![image](media://c200eb87-3d33-4817-b493-9adeb965e24d)

- **Connect**.
- Locate the folder that holds the files you want to upload and right click on the **folder**.
- Click **WinZip**.
- Click **Extract to Folder C:Users/YourName/Desktop/Filename.zip **(Figure 2).** **:info: Choosing this option keeps all of your files in the same folder when extracted.

Figure 2

![image](media://c475fb31-12c4-44b2-9797-6a451aa438d1)

- Go to your S3 client and open the folder that displays your station call letters (e.g., WGBH) on the "*pbslm-contrib*" drive. **This folder should have already been set up for you.**
- Click the **folder** on your desktop that holds all of your files and drag it to the associated folder on the S3 client.

![image](media://e67a8242-239b-4014-acc8-afb51f569153)

## How to generate a URL for your pointer media

- <span style="color: #000000">After you have uploaded your files, open a browser and type or copy and paste </span><span style="color: #000000">[http://d3tt741pwxqwm0.cloudfront.net](http://d3tt741pwxqwm0.cloudfront.net/)</span><span style="color: #000000"> into the address bar.</span>
- <span style="color: #000000">Append the </span><span style="color: #000000">**folder name**</span><span style="color: #000000"> and the </span><span style="color: #000000">**filename of the root file **</span><span style="color: #000000">(i.e.: myfolder/index.html) to the end of the URL string.  Example (the portion in red represents what is manually appended):  </span>http://d3tt741pwxqwm0.cloudfront.net/<span style="color: #ff0000">myfolder/index.html</span>

| :warning:** Important Tips** | **Example** |
| --- | --- |
| Write out the complete file name at the end of the URL.  Include the file extension (i.e.:.html) | https://contrib.pbslearningmedia.org/myfolder/index.html |
| Folders are case-sensitive. Be sure to type the folder name *exactly as it appears* in the S3 client. | Folder name: https://contrib.pbslearningmedia.org/myfolder/index.html<br>Typing folder name:<br>https://contrib.pbslearningmedia.org/myfolder/index.html |

## Next steps

After uploading your interactive media, it’s time to create the interactive lesson. Interactive lessons are like any asset and resource, however, there are specific fields that are unique to the interactive lesson. [Learn how to create an interactive lesson](https://docs.pbs.org/space/DLM/3582688/How+to+Create+an+Interactive+Lesson)