# Quickstart with uppy

**URL:** <https://community.transloadit.com/t/quickstart-with-uppy/16610>\
**Category:** Uppy\
**Created:** [May 12, 2023, 4:02pm UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610 "2023-05-12T16:02:11Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![umbebern](https://avatars.discourse-cdn.com/v4/letter/u/439d5e/32.png) [@umbebern](https://community.transloadit.com/u/umbebern)\
**Post date:** [May 12, 2023, 4:02pm UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610/1 "2023-05-12T16:02:11Z")

</div>

Hello!  
I’m a realy noob but I can’t undesrtand how to run a simple example like this one I found here…

> **[Uppy Drag & Drop - CodeSandbox](https://codesandbox.io/s/uppy-drag-drop-gyewzx?file=%2Findex.html)**
>
> Uppy Drag & Drop by Murderlon using @uppy/aws-s3, @uppy/aws-s3-multipart, @uppy/core, @uppy/drag-drop, @uppy/status-bar, @uppy/tus, @uppy/xhr-upload, parcel-bundler

a simple drag and drop page…  
I’ve installed every modules with npm but if I put the index.html and the src folder in /var/www/html/ under my apache webserver I obtain only a blank page.

can someone help me?

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [May 15, 2023, 7:20am UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610/2 "2023-05-15T07:20:08Z")

</div>

Hi, this seems like a specific issue to your setup, not and with Uppy, and without any context it’s hard to help.

---

<div class="post-metadata">

**Author:** ![umbebern](https://avatars.discourse-cdn.com/v4/letter/u/439d5e/32.png) [@umbebern](https://community.transloadit.com/u/umbebern)\
**Post date:** [May 15, 2023, 9:32am UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610/3 "2023-05-15T09:32:59Z")

</div>

Hi, what I’m asking I’ts the most newbie question 😄

what I need to run and display an Uppy page on my server?

Only an apache server or ngnix?

node.js?  
something else?

the documentation says everything but is missing the basic part…How to start

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [May 15, 2023, 9:46am UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610/4 "2023-05-15T09:46:10Z")

</div>

Depends which plugins you use. If you use `@uppy/xhr-upload` you need your own server to accept uploads.

You need to load Uppy on the client, not server-side render it. In your case the easiest thing to get started might be using the CDN:

```js
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.7.0/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
  import { Uppy, DragDrop } from "https://releases.transloadit.com/uppy/v3.7.0/uppy.min.js"
  const uppy = new Uppy()
  uppy.use(DragDrop, { target: '#uppy' })
</script>

```

Note that you are loading many plugins you won’t be using with the CDN. So ideally you move to npm modules when possible.

---

<div class="post-metadata">

**Author:** ![vaporizel](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/vaporizel/32/878_2.png) [@vaporizel](https://community.transloadit.com/u/vaporizel)\
**Post date:** [June 21, 2023, 8:23am UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610/5 "2023-06-21T08:23:19Z")

</div>

i have some problem too, based on CDN effort, how do i use certain uppy plugin ? my system doesnt use Node/React

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [June 21, 2023, 8:30am UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610/6 "2023-06-21T08:30:05Z")

</div>

Read the docs of which plugin you want to use and click the “CDN” tab.

---

<div class="post-metadata">

**Author:** ![karakal](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/karakal/32/888_2.png) [@karakal](https://community.transloadit.com/u/karakal)\
**Post date:** [July 14, 2023, 9:43am UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610/7 "2023-07-14T09:43:28Z")

</div>

Unfortunately the described methods via CDN are not working as there is always an error like:

uppy.min.js’ does not provide an export named ‘Dashboard’ or whatever other plugin you would like to use…

So the documentation is either wrong or useless…

---

<div class="post-metadata">

**Author:** ![aduh95](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/aduh95/32/490_2.png) [@aduh95](https://community.transloadit.com/u/aduh95)\
**Post date:** [July 14, 2023, 9:55am UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610/8 "2023-07-14T09:55:05Z")

</div>

> [@Merlijn](#):
>
> ```auto
> <!-- 1. Add CSS to `<head>` -->
> <link href="https://releases.transloadit.com/uppy/v3.7.0/uppy.min.css" rel="stylesheet">
> 
> <!-- 2. Initialize -->
> <div id="uppy"></div>
> 
> <script type="module">
> import { Uppy, DragDrop } from "https://releases.transloadit.com/uppy/v3.7.0/uppy.min.js"
> const uppy = new Uppy()
> uppy.use(DragDrop, { target: '#uppy' })
> </script>
> 
> ```

There’s a typo in the code snippet, the import should use the `.mjs` extension, not `.js`. Here’s the correct one:

```html
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.12.0/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
  import { Uppy, DragDrop } from "https://releases.transloadit.com/uppy/v3.12.0/uppy.min.mjs"
  const uppy = new Uppy()
  uppy.use(DragDrop, { target: '#uppy' })
</script>

```

---

<div class="post-metadata">

**Author:** ![noxxer](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/noxxer/32/1012_2.png) [@noxxer](https://community.transloadit.com/u/noxxer)\
**Post date:** [December 6, 2023, 7:50am UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610/9 "2023-12-06T07:50:27Z")

</div>

How to use the locale pack from CDN in this case?

```auto
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.20.0/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script src="https://releases.transloadit.com/uppy/locales/v3.3.1/ru_RU.min.js"></script>
<script type="module">
  import { Uppy, DragDrop } from "https://releases.transloadit.com/uppy/v3.20.0/uppy.min.mjs"
  const uppy = new Uppy({
		debug: true,
		locale: Uppy.locales.ru_RU,
	})
  uppy.use(DragDrop, { target: '#uppy' })
</script>

```

undefined is not an object (evaluating ‘Uppy.locales.ru\_RU’)

---

<div class="post-metadata">

**Author:** ![noxxer](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/noxxer/32/1012_2.png) [@noxxer](https://community.transloadit.com/u/noxxer)\
**Post date:** [December 7, 2023, 9:36am UTC](https://community.transloadit.com/t/quickstart-with-uppy/16610/10 "2023-12-07T09:36:29Z")

</div>

working example:

```auto
<div id="upload-container"></div>
  <script src="https://releases.transloadit.com/uppy/v3.20.0/uppy.min.js"></script>
  <script src="https://releases.transloadit.com/uppy/locales/v3.3.1/ru_RU.min.js"></script>
  <script>
    const uppy = new Uppy.Uppy({
      debug: true,
      locale: Uppy.locales.ru_RU,
    });

    uppy.use(Uppy.Dashboard, {
      target: '#upload-container', inline: true,
    });
    uppy.use(Uppy.Url, {target: Uppy.Dashboard, companionUrl: 'https://your-companion.com'});
    uppy.use(Uppy.Audio, {target: Uppy.Dashboard});
  </script>

```
