website: convert all website examples to ESM (#3957)

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Artur Paikin <artur@arturpaikin.com>

.eslintrc.js

@@ -243,6 +243,7 @@ module.exports = {
         'packages/@uppy/webcam/src/**/*.js',
         'packages/@uppy/xhr-upload/src/**/*.js',
         'packages/@uppy/zoom/src/**/*.js',
+        'website/src/examples/*/*.es6',
       ],
       parser: 'espree',
       parserOptions: {

website/src/examples/dashboard/app.es6

@@ -1,25 +1,25 @@
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const GoogleDrive = require('@uppy/google-drive')
-const Dropbox = require('@uppy/dropbox')
-const Instagram = require('@uppy/instagram')
-const Facebook = require('@uppy/facebook')
-const OneDrive = require('@uppy/onedrive')
-const Zoom = require('@uppy/zoom')
-const Unsplash = require('@uppy/unsplash')
-const Box = require('@uppy/box')
-const ImageEditor = require('@uppy/image-editor')
-const Url = require('@uppy/url')
-const Webcam = require('@uppy/webcam')
-const Audio = require('@uppy/audio')
-const ScreenCapture = require('@uppy/screen-capture')
-const Tus = require('@uppy/tus')
-const DropTarget = require('@uppy/drop-target')
-const GoldenRetriever = require('@uppy/golden-retriever')
-const Compressor = require('@uppy/compressor')
-const localeList = require('../locale_list.json')
-
-const COMPANION = require('../env')
+import Uppy, { debugLogger } from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import GoogleDrive from '@uppy/google-drive'
+import Dropbox from '@uppy/dropbox'
+import Instagram from '@uppy/instagram'
+import Facebook from '@uppy/facebook'
+import OneDrive from '@uppy/onedrive'
+import Zoom from '@uppy/zoom'
+import Unsplash from '@uppy/unsplash'
+import Box from '@uppy/box'
+import ImageEditor from '@uppy/image-editor'
+import Url from '@uppy/url'
+import Webcam from '@uppy/webcam'
+import Audio from '@uppy/audio'
+import ScreenCapture from '@uppy/screen-capture'
+import Tus from '@uppy/tus'
+import DropTarget from '@uppy/drop-target'
+import GoldenRetriever from '@uppy/golden-retriever'
+import Compressor from '@uppy/compressor'
+import localeList from '../locale_list.json'
+
+import COMPANION from '../env.js'
 
 const RTL_LOCALES = ['ar_SA', 'fa_IR', 'he_IL']
 
@@ -37,7 +37,7 @@ function uppyInit () {
   const opts = window.uppyOptions
 
   const uppy = new Uppy({
-    logger: Uppy.debugLogger,
+    logger: debugLogger,
   })
 
   uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })

website/src/examples/dashboard/index.ejs

@@ -21,67 +21,4 @@ Dashboard is the full-featured UI for Uppy that shows nice file previews and up
 
 <blockquote>Note: in this snippet we've omitted the code to toggle options using checkboxes. The behavior of this code may be different from the above example depending on which options you've selected.</blockquote>
 
-{% codeblock lang:js %}
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const GoogleDrive = require('@uppy/google-drive')
-const Dropbox = require('@uppy/dropbox')
-const Unsplash = require('@uppy/unsplash')
-const Box = require('@uppy/box')
-const Instagram = require('@uppy/instagram')
-const Facebook = require('@uppy/facebook')
-const OneDrive = require('@uppy/onedrive')
-const Webcam = require('@uppy/webcam')
-const ScreenCapture = require('@uppy/screen-capture')
-const ImageEditor = require('@uppy/image-editor')
-const Tus = require('@uppy/tus')
-const Url = require('@uppy/url')
-const DropTarget = require('@uppy/drop-target')
-const GoldenRetriever = require('@uppy/golden-retriever')
-const Compressor = require('@uppy/compressor')
-
-const uppy = new Uppy({
-  debug: true,
-  autoProceed: false,
-  restrictions: {
-    maxFileSize: 1000000,
-    maxNumberOfFiles: 3,
-    minNumberOfFiles: 2,
-    allowedFileTypes: ['image/*', 'video/*'],
-    requiredMetaFields: ['caption'],
-  }
-})
-.use(Dashboard, {
-  trigger: '.UppyModalOpenerBtn',
-  inline: true,
-  target: '.DashboardContainer',
-  showProgressDetails: true,
-  note: 'Images and video only, 2–3 files, up to 1 MB',
-  height: 470,
-  metaFields: [
-    { id: 'name', name: 'Name', placeholder: 'file name' },
-    { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
-  ],
-  browserBackButtonClose: false
-})
-.use(GoogleDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
-.use(Dropbox, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
-.use(Box, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
-.use(Instagram, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
-.use(Facebook, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
-.use(OneDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
-.use(Unsplash, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })
-.use(Webcam, { target: Dashboard })
-.use(Audio, { target: Dashboard })
-.use(ScreenCapture, { target: Dashboard })
-.use(ImageEditor, { target: Dashboard })
-.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
-.use(DropTarget, {target: document.body })
-.use(GoldenRetriever)
-.use(Compressor)
-
-uppy.on('complete', result => {
-  console.log('successful files:', result.successful)
-  console.log('failed files:', result.failed)
-})
-{% endcodeblock %}
+{% include_code lang:js dashboard/app.es6 %}

website/src/examples/dragdrop/app.es6

@@ -1,7 +1,7 @@
-const Uppy = require('@uppy/core')
-const DragDrop = require('@uppy/drag-drop')
-const ProgressBar = require('@uppy/progress-bar')
-const Tus = require('@uppy/tus')
+import Uppy from '@uppy/core'
+import DragDrop from '@uppy/drag-drop'
+import ProgressBar from '@uppy/progress-bar'
+import Tus from '@uppy/tus'
 
 // Function for displaying uploaded files
 const onUploadSuccess = (elForUploadedFiles) => (file, response) => {

website/src/examples/markdown-snippets/app.es6

@@ -1,10 +1,10 @@
 /* eslint-env browser */
-const marked = require('marked')
-const dragdrop = require('drag-drop')
+import marked from 'marked'
+import dragdrop from 'drag-drop'
 // Add Robodog JS. It is advisable to install Robodog from npm/yarn.
 // But for experimenting, you can use also Transloadit’s CDN, Edgly:
 // <script src="https://releases.transloadit.com/uppy/robodog/v3.0.0-beta.4/robodog.min.js"></script>
-const robodog = require('@uppy/robodog')
+import robodog from '@uppy/robodog'
 
 const TRANSLOADIT_EXAMPLE_KEY = '35c1aed03f5011e982b6afe82599b6a0'
 const TRANSLOADIT_EXAMPLE_TEMPLATE = '0b2ee2bc25dc43619700c2ce0a75164a'

website/src/examples/statusbar/app.es6

@@ -1,7 +1,7 @@
-const Uppy = require('@uppy/core')
-const FileInput = require('@uppy/file-input')
-const StatusBar = require('@uppy/status-bar')
-const Tus = require('@uppy/tus')
+import Uppy from '@uppy/core'
+import FileInput from '@uppy/file-input'
+import StatusBar from '@uppy/status-bar'
+import Tus from '@uppy/tus'
 
 const uppyOne = new Uppy({ debug: true, autoProceed: true })
 uppyOne

website/src/examples/transloadit/app.es6

@@ -1,11 +1,11 @@
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const Webcam = require('@uppy/webcam')
-const Transloadit = require('@uppy/transloadit')
-const Instagram = require('@uppy/instagram')
-const Facebook = require('@uppy/facebook')
-const Zoom = require('@uppy/zoom')
-const COMPANION = require('../env')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import Webcam from '@uppy/webcam'
+import Transloadit from '@uppy/transloadit'
+import Instagram from '@uppy/instagram'
+import Facebook from '@uppy/facebook'
+import Zoom from '@uppy/zoom'
+import COMPANION from '../env.js'
 
 const enc = new TextEncoder('utf-8')
 async  function sha1 (secret, body) {

website/src/examples/transloadit/index.ejs

@@ -89,80 +89,4 @@ This example demonstrates how to unlock Transloadit’s features within Uppy.
 <hr />
 
 <p>On this page we're using the following JavaScript:</p>
-{% codeblock lang:js %}
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/transloadit')
-const Webcam = require('@uppy/webcam')
-const Transloadit = require('@uppy/transloadit')
-const Instagram = require('@uppy/instagram')
-
-const uppy = new Uppy({
-  debug: true,
-  autoProceed: false,
-  restrictions: {
-    maxFileSize: 1024 * 1024 * 1024,
-    maxNumberOfFiles: 2,
-    minNumberOfFiles: 1,
-    allowedFileTypes: ['image/*']
-  },
-  locale: {
-    strings: {
-      youCanOnlyUploadFileTypes: 'You can only upload images'
-    }
-  }
-})
-
-uppy
-  .use(Transloadit, {
-    params: {
-      auth: {
-        key: YOUR_TRANSLOADIT_API_KEY
-      },
-      // It’s more secure to use a template_id and enable
-      // Signature Authentication
-      steps: {
-        resize: {
-          robot: '/image/resize',
-          width: 250,
-          height: 250,
-          resize_strategy: 'fit',
-          text: [
-            {
-              text: '© Transloadit.com',
-              size: 12,
-              font: 'Ubuntu',
-              color: '#eeeeee',
-              valign: 'bottom',
-              align: 'right',
-              x_offset: 16,
-              y_offset: -10
-            }
-          ]
-        }
-      }
-    },
-    waitForEncoding: true
-  })
-  .use(Instagram, { target: Dashboard, companionUrl: 'https://api2.transloadit.com/companion', companionAllowedHosts: /\.transloadit\.com$/ })
-  .use(Dashboard, {
-    inline: true,
-    maxHeight: 400,
-    target: '#uppy-dashboard-container',
-    note: 'Images and video only, 1–2 files, up to 1 MB'
-  })
-  .use(Webcam, { target: Dashboard })
-  .on('transloadit:result', (stepName, result) => {
-    const file = uppy.getFile(result.localId)
-    var resultContainer = document.createElement('div')
-    resultContainer.innerHTML = `
-      <div>
-        <h3>Name: ${file.name}</h3>
-        <img src="${result.ssl_url}" /> <br />
-        <a href="${result.ssl_url}">View</a>
-      </div>
-    `
-    document
-      .getElementById('uppy-transloadit-result')
-      .appendChild(resultContainer)
-  })
-{% endcodeblock %}
+{% include_code lang:js transloadit/app.es6 %}

website/src/examples/xhrupload/app.es6

@@ -1,7 +1,7 @@
-const Uppy = require('@uppy/core')
-const FileInput = require('@uppy/file-input')
-const XHRUpload = require('@uppy/xhr-upload')
-const ProgressBar = require('@uppy/progress-bar')
+import Uppy from '@uppy/core'
+import FileInput from '@uppy/file-input'
+import XHRUpload from '@uppy/xhr-upload'
+import ProgressBar from '@uppy/progress-bar'
 
 document.querySelector('.Uppy').innerHTML = ''