Image Editor not loading from CDN package

Uppy
#1

Hi,

I’m very much new to this stuff, so please excuse when I’m totaly wrong. But please can you confirm that the ImageEditor is part of the CDN package (1.20.1)

Im loading the https://transloadit.edgly.net/releases/uppy/v1.20.1/uppy.min.js via a script tag. And I can load any plugin by unsing it like in the dokumentation noted but when
I want to load the ImageEditor I receive the following error:

Uncaught TypeError: Expected a plugin class, but got undefined. Please verify that the plugin was imported and spelled correctly.

My used code is this:

<script src="https://transloadit.edgly.net/releases/uppy/v1.20.1/uppy.min.js"></script>
<script src="https://transloadit.edgly.net/releases/uppy/locales/v1.16.4/de_DE.min.js"></script>
<script>
  const uppy = Uppy.Core({
     locale: Uppy.locales.de_DE
     })
  const Dashboard = Uppy.Dashboard
  const ImageEditor = Uppy.ImageEditor
  const XHRUpload = Uppy.XHRUpload
      
  uppy.use(Dashboard, {
     target: '#drag-drop-area',
     inline: true,
     showProgressDetails: true
     })
  uppy.use(ImageEditor, { target: Dashboard })
  uppy.use(XHRUpload, {
     endpoint: 'save_file.php',
     fieldName: 'files'
     })
</script>
1 Like
#2

I am experiencing the same issue and looking at Uppy.* in browser console makes no reference to the image editor. Thanks.

#3

For anyone interested, I was able to change my CDN reference to version v1.18.0 and the imageEditor is there for testing purposes.

				.use(Uppy.ImageEditor, {
				target: Uppy.Dashboard,
				id: 'pteImageEditor',
				quality: 0.8,
				cropperOptions: {
					dragMode: 'none',
					viewMode: 0,
					background: false,
					autoCropArea: 0.75,
					autoCrop: 1,
					initialAspectRatio: 1,
					aspectRatio: 1,
					responsive: true,
					movable: false,
					rotatable: true,
					scalable: true,
					zoomOnTouch: false,
					zoomOnWheel: false
				}
			})
#4

Hey! I’m facing the same issue with v1.20.2. Changing the version to v1.18.0 didn’t help me though.

#5

I was able to switch to 1.18.0 and got it working with a bit of difficulty wrangling script. Hope this helps others.

Below if the full markup minus the css file.

<script src="https://transloadit.edgly.net/releases/uppy/v1.18.0/uppy.min.js"></script>
    <script>
      var uppy = Uppy.Core({
        meta : {
          author : <?php echo cms_get_current_userid(); ?>
        }
      })
        .use(Uppy.Webcam)
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area',
          width: '100%',
          height: 350,
          plugins: ['Webcam'],
          metaFields: [
            { id: 'name', name: 'Name', placeholder: 'file name' },
            { id: 'license', name: 'License', placeholder: 'specify license' },
            { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' },
            { id: 'public', name: 'Public', render: function({value, onChange}, h) {
              return h('input', { type: 'checkbox', onChange: (ev) => onChange(ev.target.checked ? 'on' : 'off'), defaultChecked: value === 'on' })
            } }
          ]
        })
        .use(Uppy.ImageEditor, {
            target: Uppy.Dashboard,
            quality: 0.8
          })
        .use(Uppy.XHRUpload, { endpoint: '<?php echo SITE_URL; ?>/cms-admin/handle-upload.php', method: 'post' })
        .run()
        .on('upload-success', function (fileId, data) { console.log("Uploaded!"); });
        // .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'})

      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })
    </script>
#6

I posted a bug report of this on GitHub

Hopefully they’ll be able to troubleshoot it soon.

Btw @nwdigital your code didn’t work for me. I even tried changing the version and adding cropper library on my own. Nothing worked.

#7

The image editor is in beta, and not added to the CDN package yet for versioning reasons. We expect that there may be breaking changes before stabilising it. Because the CDN package is actually the uppy npm package but pre-bundled, a breaking change to the image editor API would require a major version bump for Uppy as a whole. For the moment, @uppy/image-editor can only be used from npm. Sorry for the trouble!