Flag of Ukraine   We stand with the brave people of Ukraine. Stop the war. Find out how you can help.

CDN & Locales Example

Here you’ll see a demo of how you might use internationalization (i18n) in Uppy, as well as how to load Uppy using a pre-bundled version (CDN).

Uploaded files:

    Console output:

    To load the pre-built bundle (from a CDN) we’re using the following HTML and JavaScript:

    <!-- Load Uppy CSS bundle. It is advisable to install Uppy
      from npm/yarn instead, and pick and choose the plugins/styles you need.
      But for experimenting, you can use Transloadit’s CDN, Edgly: -->
    <link rel="stylesheet" href="https://releases.transloadit.com/uppy/v3.4.0/uppy.min.css">
    <div class="UppyDragDrop"></div>
    <div class="for-ProgressBar"></div>
    <div class="uploaded-files">
      <h5>Uploaded files:</h5>
    <!-- Load Uppy JS bundle. -->
    <script src="https://releases.transloadit.com/uppy/v3.4.0/uppy.min.js" type="module"></script>
    <script src="https://releases.transloadit.com/uppy/v3.4.0/uppy.legacy.min.js" nomodule></script>
    <script src="https://releases.transloadit.com/uppy/locales/v3.0.5/ru_RU.min.js"></script>
    window.addEventListener('DOMContentLoaded', function () {
      'use strict';
      var uppy = new Uppy.Uppy({
        debug: true,
        autoProceed: true,
        locale: Uppy.locales.ru_RU
      uppy.use(Uppy.DragDrop, {
        target: '.UppyDragDrop',
        // We are using the ru_RU locale pack (set above in Uppy class options),
        // but you can also override specific strings like so:
        locale: {
          strings: {
            browse: 'выберите ;-)'
      uppy.use(Uppy.ProgressBar, {
        target: '.for-ProgressBar',
         hideAfterFinish: false
      uppy.use(Uppy.Tus, { endpoint: 'https://tusd.tusdemo.net/files/' });
      uppy.on('upload-success', function (file, response) {
        var url = response.uploadURL
        var fileName = file.name
        document.querySelector('.uploaded-files ol').innerHTML +=
          '<li><a href="' + url + '" target="_blank">' + fileName + '</a></li>'
      console.log('--> Uppy pre-built version with Tus, DragDrop & Russian language pack has loaded');
      window.uppy = uppy;

    Please see documentation for details.

    Hey there stranger! Uppy is actively developed and the example section is our playground. Things might not work, but we're working hard to improve.

    We're on a monthly release cycle and our latest version is v3.4.0, but the example pages reflect the latest work in our main branch. Here's what changed in main since v3.4.0 in terms of commits, while the CHANGELOG provides a higher level view of the things planned for our next release.

    Files from the examples are uploaded to our test servers and deleted every 24-72 hours.