> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Manage App Storage in JavaScript

> Learn how to use the JavaScript App Storage client library to manage files from your Replit App.

This guide demonstrates how to use the JavaScript client library to upload, list, download, and delete files in your App Storage bucket.

<Note>
  This client library, written in TypeScript, can be used for projects that use JavaScript runtimes such as Bun, Deno, and Node.js 14 and later.
</Note>

## Create a TypeScript Replit App

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/create-app-icon.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=cc16ebed380bbd324dafaa2c93a91a66" alt="plus sign" width="16" height="16" data-path="images/icons/create-app-icon.svg" /> **Create App** from the home screen.
2. Navigate to the **Choose a Template** tab.
3. Type "TypeScript" in the template search field and select it as shown below:
   <Frame>
     <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=20d5c2a7d84cafe0bbcb2488abad6623" alt="TypeScript template selection screen" width="2590" height="1064" data-path="images/tutorials/typescript-template.png" />
   </Frame>
4. Select <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/create-app-icon.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=cc16ebed380bbd324dafaa2c93a91a66" alt="plus sign" width="16" height="16" data-path="images/icons/create-app-icon.svg" /> **Create App**.

## Install the official client library

To install the client library, follow the one-click setup or package manager instructions below.

<Tabs>
  <Tab title="One-click setup">
    <Steps>
      <Step title="Access the App Storage tool">
        1. Navigate to the **App Storage** tab.
        2. Select the <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/angled-brackets.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=70ef5c07b2ba71181e96357f854e696a" alt="angled brackets icon" width="16" height="16" data-path="images/icons/angled-brackets.svg" /> **Commands** view in the **App Storage** tab.

        The installation screen should resemble the following screenshot:

        <Frame>
          <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/install-javascript-object-storage.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=ea700a62d5ea5818372343210d0e832c" alt="screenshot of App Storage dependencies installation" width="2428" height="648" data-path="images/tutorials/install-javascript-object-storage.png" />
        </Frame>
      </Step>

      <Step title="Install the dependencies">
        1. Select "JavaScript" from the programming language dropdown on the top left.
        2. Select **Install @replit/object-storage package**.
        3. When completed, the button text should read **Package installed**.
      </Step>
    </Steps>
  </Tab>

  <Tab title="npm">
    Use this option if your Replit App uses Node Package Manager (`npm`) to manage its dependencies.

    Open the **Shell** tool in the Project Editor and enter the following command:

    ```sh theme={null}
    npm install @replit/object-storage
    ```
  </Tab>

  <Tab title="yarn">
    Use this option if your Replit App uses `yarn` to manage its dependencies.

    Open the **Shell** tool in the Project Editor and enter the following command:

    ```sh theme={null}
    yarn add @replit/object-storage
    ```
  </Tab>
</Tabs>

## Create a bucket

Before storing files, you must create a bucket. Follow the steps below to create a new bucket:

1. Navigate to the **App Storage** tool
2. Select **Create new bucket**
3. Enter a name for the bucket in the **Name** field
4. Select **Create bucket**

## Add and run the example code

<Steps>
  <Step title="Locate index.ts">
    Open the <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/files-icon.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=4b9ac8b70c07960d9f9a3f6eacee4ab6" alt="files icon" width="16" height="16" data-path="images/icons/files-icon.svg" /> **Files** tool from the left dock.

    Select `index.ts` to open it in a file editor.
  </Step>

  <Step title="Add the client code">
    Replace the contents of `index.ts` with the following code:

    ```javascript theme={null}
    import { Client } from "@replit/object-storage";
    const client = new Client();

    // Upload a text file that contains the text "Hello, World!"
    const { ok: uploadOk, error: uploadError } = await client.uploadFromText(
      "file.txt",
      "Hello World!",
    );
    if (!uploadOk) console.error("Upload failed:", uploadError);

    // List the files in the bucket
    const { ok: listOk, value: listValue, error: listError } = await client.list();
    if (!listOk) console.error("List failed:", listError);
    else console.log("Bucket contents:", listValue);

    // Retrieve and print the contents of the uploaded file
    const {
      ok: downloadOk,
      value,
      error: downloadError,
    } = await client.downloadAsText("file.txt");
    if (!downloadOk) console.error("Download failed:", downloadError);
    else console.log("file.txt contents:", value);
    ```
  </Step>

  <Step title="Run the app">
    Select **Run** to execute the example code.

    Navigate to the **Console** tab to view the output, which should resemble the output below:

    ```
    Bucket contents: [ { name: 'file.txt' } ]
    file.txt contents: Hello World!
    ```

    Confirm that the `file.txt` file appears in your bucket in the **Objects** view of the
    **App Storage** tool.

    <Tip>
      Reload the page to update the object list if `file.txt` fails to appear.
    </Tip>
  </Step>
</Steps>

## Delete the object

To remove the `file.txt` file from the bucket,

1. Replace the content of `index.ts` with the following code:

   ```javascript theme={null}
   import { Client } from "@replit/object-storage";
   const client = new Client();

   // Delete file.txt from the bucket
   const { ok: deleteOk, error: deleteError } = await client.delete("file.txt");
   if (!deleteOk) console.error("Delete failed:", deleteError);
   else console.log("Delete succeeded");
   ```
2. Select **Run** to execute the example code.
3. Navigate to the **Console** tab to view the output, which should resemble the output below:
   ```
   Delete succeeded
   ```
4. Verify that the `file.txt` object no longer appears in the bucket.

## Next steps

To learn more about Replit App Storage, see the following resources:

* [App Storage](/cloud-services/storage-and-databases/object-storage/): Learn more about the App Storage feature and how to use it in the Project Editor
* [App Storage JavaScript SDK](/reference/object-storage-javascript-sdk): Learn about the `Client` class and its methods
