---
title: Working with files
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

This page is a part of the content management tutorial, which you should follow sequentially from beginning to end. If you haven't completed it yet, go to the first page: [Using the Pages application](https://docs.kentico.com/13tutorial/business-tutorial/web-content-management/using-the-pages-application.md).

## You will learn about:

> **Info:** **Important note**
>
> Dancing Goat is a specific sample website used for the purposes of the tutorial. Your company’s website will be different, and some functionalities may also be changed.

You already know how to work with the content of pages and how you can upload images. Let's take a closer look at what else you can do with images and other files you have created outside of Xperience.

Besides _images_, Xperience allows you to upload any files, such as _videos_, Word or PDF _documents_, or zipped _packages_. Developers will likely limit the types of files you can upload to your website to the most common (images, documents, or videos). You can also preview some of the uploaded files, such as images, directly in the Xperience administration. However, whether you can preview the file or not depends on your web browser capabilities rather than Xperience.

### Files

There are a few ways you can add your files to Xperience. The two most common methods in Xperience are uploading files to _media libraries_ or adding them to pages as _attachments_.

### Media libraries

![](https://docs.kentico.com/docsassets/13tutorial/working-with-files/Media-libraries-icon.png)

You can use the **Media libraries** application to store files of different sizes or types on your Xperience website. Any file put into a media library is called a _media library file_.

![Media libraries application](https://docs.kentico.com/docsassets/13tutorial/working-with-files/Media+library+window+description.png "Media libraries application")

The application's window is divided into two parts. The **folder tree** on the left side displays folders and subfolders with stored media. You can create a **new folder**, **delete a folder**, **copy a folder,** or **move a folder** to a different position in the folder tree.

You can see the list of media files in a chosen folder on the right side, where you can **view**, **edit** or **delete** a file or **select** more of them to work with. You can **update** or **preview** the file by hovering your mouse over the file's icon.

You can change the _display mode_ of the media library using buttons in the upper-right corner. The **listing mode** shows a list of the files with additional details, as you see above. **Thumbnails mode** offers picture previews.

Compared to _page attachments_, media libraries give you many advantages. You can:

- Organize your files in folders in your library.
- Reuse your media library file in different places on your website, so it will update across your website when you update your media library file.
- View locations where the file is used so you can adjust your site before you update or delete your file.

This tutorial does not go into depth on media libraries. Find out more [in our documentation](https://docs.kentico.com/13/managing-website-content/working-with-files/media-library-files.md) and learn how to [create](https://docs.kentico.com/13/managing-website-content/working-with-files/media-library-files/creating-media-libraries.md), [organize](https://docs.kentico.com/13/managing-website-content/working-with-files/media-library-files/inserting-files-into-media-libraries.md), or [delete](https://docs.kentico.com/13/managing-website-content/working-with-files/media-library-files/deleting-media-library-files.md) your media libraries and their files.

#### Editing images

We recommended that you _finalize_ your _images_ (e.g., in Photoshop or another graphic editor) before uploading them to your website. However, the Xperience comes with a built-in image editor you can use to adjust most types of images quickly, e.g., when you are on the go. To preview an uploaded image (e.g., png or jpg) you want to edit, hover the cursor over the file's thumbnail name.

![](https://docs.kentico.com/docsassets/13tutorial/working-with-files/media-libraries-preview-files.png)

Clicking the **Edit** button opens an Xperience built-in **image editor**. You can use it to _crop_, _re-size_, and _rotate_ your images directly in Xperience. On the file's _Properties_ tab, you can edit some metadata. If implemented, _metadata_ will add to the HTML markup of the page where the image is displayed. This will help with image SEO.

🎬 [Video](https://docs.kentico.com/docsassets/13tutorial/working-with-files/working-with-media-libaries-image-editor.mp4)

#### Working with non-image files

Even if you upload a different file-type than a supported image, you can edit some of its _metadata_, such as the file's _name_ or its _description_.

### Page attachments

**Page attachments** are parts of your pages, and you work with them in the **Pages** application. When you attach a file to the page, it becomes bound to it. If you move the page, its attachments move as well. Deleting the pages also deletes all of the attachments.

Xperience does not limit the number of attachments added to a single page. However, suppose you need to add larger files or upload many of them. In that case, we recommend using the **Media libraries** application instead. Why? Because the number and size of attachments influence the page's performance and can cause slower loading times.

#### Uploading page attachments

You can upload page attachments in three ways.

- If  _implemented_, you could use the _file uploader_ on the **Content** tab. For example, the _teaser image_ in Dancing goat's articles is an attachment.

  ![](https://docs.kentico.com/docsassets/13tutorial/working-with-files/tutorial-attached-teaser-image.png)
- The second way is to _upload files_ on the **Attachments** tab in the _Properties_ drop-down menu. To upload a file as an attachment, click the **New attachment** button. On the Dancing goat website, the _Attachments_ tab lists files attached to the page using this approach. To test the feature, try uploading a file to any article on your tutorial website.

  ![](https://docs.kentico.com/docsassets/13tutorial/working-with-files/navigating-to-attachments-property.gif)
- Lastly, developers could also prepare _page builder widgets_ that will allow you to attach files to the page. This approach is not demoed on the Dancing goat website because we don't recommend it. If you want to, for example, display images on a page with page builder, you should use media library files.

The developers define which method you should use in which situations depending on your website's business requirements. You can also _update_, _edit_, or _delete_ your existing attachments either on the _Content_ or _Attachments_ tab. Xperience provides the same editing options to the attached images as it does to the media library files.

** Task:**

You found a picture that would be a great fit for your _Coffee samples_ landing page. You decided to upload it to the _hero image_ widget. The image needs some editing, such as rotating, to display correctly in the _Hero image_ widget. And as you don't plan to use the previous _hero image_ in the future, remove it from the media library.

 **Need help?**

You can always get some help from our step-by-step guide:

1. Open your _Coffee samples_ page under the _Landing pages_ in the **Pages** application.
2. Navigate the cursor into your _hero image_ widget.
3. Upload your new hero image from your computer.
4. Click the **Save** button.
5. Open the **Media libraries** application and **Edit** **()** the _Graphics_ media library to review and edit your image.
6. Click the **Edit** **()** button next to your image to open the _image editor_. (If you are not sure which one it is, remember you can preview images by hovering your cursor over the image icon next to the image name.)
7. Open the _Rotation_ options in the image editor.
8. Select the _Rotate 90° left_ option
9. Click the **Save & Close** button.
10. Go back to the **Pages** application and navigate to the _Coffee samples_ page to see your changes.

Here's some visual help:

🎬 [Video](https://docs.kentico.com/docsassets/13tutorial/working-with-files/working-with-media-library-file-in-page-buider-exercise-720.mp4)

**Next page:** [Adding a new page](https://docs.kentico.com/13tutorial/business-tutorial/web-content-management/adding-a-new-page.md)