> For the complete documentation index, see [llms.txt](https://docs.getseam.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.getseam.xyz/miniapp-creation/uploading-images-videos-and-files.md).

# Uploading Images, Videos, and Files

If your miniapp involves allowing users to upload files, Seam provides a [Firebase](https://firebase.google.com/docs/emulator-suite) storage bucket for our miniapp file upload and storage. This allows you to upload any file (image, video, sounds, 3d images) and not worry about hosting your own backend. Additionally, you can use this simulated testing enviroment when you build you miniapp, without needing to upload to a real server.

#### Getting started: Setting up Firebase locally

To get started uploading files, you'll need to run a local server to simulate the process of uploading and downloading files. Open up a new terminal at your Miniapp Builder SDK directory and run the following command:

```
npx firebase emulators:start
```

Then, you can see a sample file upload bucket at `http://127.0.0.1:4000/storage/demo-seam-miniapp-builder/files`.

#### Uploading Images

To upload images in your miniapp, you can use the `FileUploadComponent` provided to you by Seam, like so:

```
import FileUploadComponent from './utils/FileUploadComponent';

const handleUpdate = (uploadedUrls: string[]) => {
    setPreviewUrls(uploadedUrls);
};

<FileUploadComponent
    fileTypes="image/*"
    label={previewUrls.length > 0 ? "Upload More Images" : "Upload Images"}
    onUpdate={handleUpdate}
    multiple={true}
    maxFiles={10}
/>
```

This gives you a button that when clicked allows the user to pick photos from their camera roll. Check out the `ImageComposerComponent` for a full example.

#### Uploading Videos

To upload videos in your miniapp, you can use the same `FileUploadComponent`, but specify a fileType of video, like so:

```
import FileUploadComponent from './utils/FileUploadComponent';

const [uploadedUrl, setUploadedUrl] = useState(model.data['url'] || "");

const handleUpdate = (urls: string[]) => {
    if (urls.length > 0) {
      setUploadedUrl(urls[0]);
      model.data['url'] = urls[0]; // Only one video is allowed
    }
};

<FileUploadComponent
    fileTypes="video/*"
    label="Upload a Video"
    onUpdate={handleUpdate}
    multiple={false}
    maxFiles={1}
/>
```

This gives you a button that when clicked allows the user to a video from their camera roll. Check out the `VideoBlock` for a full example.

#### Uploading arbitrary files

For any other file types, you can use the Firebase uploader functions yourself. Read more in the [documentation here](https://github.com/capawesome-team/capacitor-firebase/tree/main/packages/storage). The strategy is 1) use the upload component to upload, and then 2) store the URL in your block.

#### Troubleshooting

If you get the error: `Error: firebase-tools no longer supports Java version before 11. Please upgrade to Java version 11 or above to continue using the emulators.`, you unfortunately need to download a new version of the JDK (Java Development Kit). Go to the [Oracle JDK Download page](https://www.oracle.com/java/technologies/downloads/#java11-mac), download the installer, and try starting the emulators again.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.getseam.xyz/miniapp-creation/uploading-images-videos-and-files.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.