---
title: "Amazon S3 als Object Storage nutzen"
description: "Wie nutzt man Amazon S3 als Object Storage mit LaunchFast Starter Kits?"
source: "https://www.launchfa.st/de/documentation/storage/amazon-s3"
---

> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.

> Sehen Sie sich den Quellcode [hier](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/storage/s3.ts) an.

import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'

LaunchFa.st stellt Ihnen die APIs zur Verfügung, um mit [Amazon S3](https://aws.amazon.com/s3/) zu interagieren, aufgebaut auf Web-Standards.

So richten Sie Amazon S3 für die Nutzung mit LaunchFast ein:

<Steps>
  1. Folgen Sie den Anweisungen in [einem unserer Blogs](https://www.launchfa.st/blog/aws-s3-storage-cloudflare-workers#create-access-keys-for-iam-users), um Amazon S3 einzurichten.
  2. Aktualisieren Sie die Umgebungsvariablen über die folgenden Anweisungen:

      <Tabs>
        <TabItem label="Astro">
            [https://github.com/LaunchFast-Boilerplates/launchfa.st-astro#storage](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro#storage)
        </TabItem>
        <TabItem label="SvelteKit">
            [https://github.com/LaunchFast-Boilerplates/launchfa.st-sveltekit#storage](https://github.com/LaunchFast-Boilerplates/launchfa.st-sveltekit#storage)
        </TabItem>
        <TabItem label="Next.js">
            [https://github.com/LaunchFast-Boilerplates/launchfa.st-nextjs#storage](https://github.com/LaunchFast-Boilerplates/launchfa.st-nextjs#storage)
        </TabItem>
      </Tabs> 
</Steps>

## Die `<Upload />`-Komponente verwenden

Um Datei-Uploads in Ihrer Anwendung einfach umzusetzen, importieren Sie die `Upload`-Komponente in Ihrer Anwendung:

<Tabs>

  <TabItem label="Astro">

    ```astro
    ---
    // File: page.astro

    import Upload from '@/components/Upload.astro'
    ---

    <Upload />
    ```

  </TabItem>

  <TabItem label="SvelteKit">

    ```svelte
    <script lang="ts">
    // File: +page.svelte

    import Upload from '@/components/Upload.svelte'
    </script>

    <Upload />
    ```

  </TabItem>

  <TabItem label="Next.js">

    ```typescript
    // File: page.tsx
    'use client'

    import Upload from '@/components/Upload'

    export default async function () {
      return <Upload />
    }
    ```

  </TabItem>

</Tabs>

## Dateien aus Amazon S3 abrufen (`GET`)

Um Dateien aus Amazon S3 abzurufen, übergeben Sie den Slug der Datei als `file`-searchParam an die Route `/api/storage` wie folgt:

<Tabs>

  <TabItem label="Astro">

    ```astro add={6,7,9-14}
    ---
    // File: page.astro
    ---

    <script>
      const getFile = new URL('/api/storage', window.location.origin)
      getFile.searchParams.set('file', fileURL)

      fetch(getFile.toString())
        .then((res) => res.json())
        .then((res) => {
          const { filePublicURL } = res
          console.log(filePublicURL)
        })
    </script>
    ```

  </TabItem>

  <TabItem label="SvelteKit">

    ```svelte add={6,7,10-15}
    <script lang="ts">
      // File: +page.svelte

      import { onMount } from 'svelte'

      const getFile = new URL('/api/storage', window.location.origin)
      getFile.searchParams.set('file', fileURL)

      onMount(() => {
        fetch(getFile.toString())
          .then((res) => res.json())
          .then((res) => {
            const { filePublicURL } = res
            console.log(filePublicURL)
          })
      })
    </script>
    ```

  </TabItem>

  <TabItem label="Next.js">

    ```typescript add={5-12}
    // File: page.tsx
    'use client'

    useEffect(() => {
      const getFile = new URL('/api/storage', window.location.origin)
      getFile.searchParams.set('file', fileURL)
      fetch(getFile.toString())
        .then((res) => res.json())
        .then((res) => {
          const { filePublicURL } = res
          console.log(filePublicURL)
        })
    }, [])
    ```

  </TabItem>

</Tabs>