app.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!-- Load Uppy CSS bundle. It is advisable to install Uppy
  2. from npm/yarn instead, and pick and choose the plugins/styles you need.
  3. But for experimenting, you can use Transloadit’s CDN, Edgly: -->
  4. <link rel="stylesheet" href="https://releases.transloadit.com/uppy/v2.13.0/uppy.min.css">
  5. <div class="UppyDragDrop"></div>
  6. <div class="for-ProgressBar"></div>
  7. <div class="uploaded-files">
  8. <h5>Uploaded files:</h5>
  9. <ol></ol>
  10. </div>
  11. <!-- Load Uppy JS bundle. -->
  12. <script src="https://releases.transloadit.com/uppy/v2.13.0/uppy.min.js" type="module"></script>
  13. <script src="https://releases.transloadit.com/uppy/v2.13.0/uppy.legacy.min.js" nomodule></script>
  14. <script src="https://releases.transloadit.com/uppy/locales/v2.1.1/ru_RU.min.js"></script>
  15. <script>
  16. window.addEventListener('DOMContentLoaded', function () {
  17. 'use strict';
  18. var uppy = new Uppy.Core({
  19. debug: true,
  20. autoProceed: true,
  21. locale: Uppy.locales.ru_RU
  22. });
  23. uppy.use(Uppy.DragDrop, {
  24. target: '.UppyDragDrop',
  25. // We are using the ru_RU locale pack (set above in Uppy.Core options),
  26. // but you can also override specific strings like so:
  27. locale: {
  28. strings: {
  29. browse: 'выберите ;-)'
  30. }
  31. }
  32. });
  33. uppy.use(Uppy.ProgressBar, {
  34. target: '.for-ProgressBar',
  35. hideAfterFinish: false
  36. });
  37. uppy.use(Uppy.Tus, { endpoint: 'https://tusd.tusdemo.net/files/' });
  38. uppy.on('upload-success', function (file, response) {
  39. var url = response.uploadURL
  40. var fileName = file.name
  41. document.querySelector('.uploaded-files ol').innerHTML +=
  42. '<li><a href="' + url + '" target="_blank">' + fileName + '</a></li>'
  43. });
  44. console.log('--> Uppy pre-built version with Tus, DragDrop & Russian language pack has loaded');
  45. window.uppy = uppy;
  46. });
  47. </script>