Quickstart with uppy

Uppy
1

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

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?

2

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

3

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

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

4

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:

<!-- 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.

1 Like
5

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

6

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

7

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…

8

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

<!-- 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>
9

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

<!-- 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’)

10

working example:

<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>