1

I am making a custom Plugin but I found that if I return an html structure to generate a custom icon, it does not interpret the html.

enter image description here

class Cloud extends Plugin {
        
        constructor (uppy, opts) 
        {
            super(uppy, opts)

            this.id = opts.id || 'Cloud' 
            this.title = opts.title || 'Cloud'
            this.type = 'acquirer'
            //this.prepareUpload = this.prepareUpload.bind(this)
            this.icon = () => {
                //aria-controls="uppy-DashboardContent-panel--Cloud"
                console.log('[ pluginCloud ] icon',this);

                let html = `<div>Hola</div>`; 
             
                return html;
            }

            this.defaultLocale = {
                strings: {}
            }

            console.log('[ pluginCloud ] constructor', this);

            this.i18nInit();
            this.install = this.install.bind(this)
            //this.setPluginState = this.setPluginState.bind(this)
            this.render = this.render.bind(this)
        
        }
      
        prepareUpload (fileIDs) {
            console.log('[ pluginCloud ] prepareUpload'); 
            return Promise.resolve()
        }
      
        install () {
            console.log('[ pluginCloud ] install');
            //this.uppy.addPreProcessor(this.prepareUpload)
            const target = this.opts.target
            if (target) {
            this.mount(target, this)
            }
        }
      
        uninstall () {
            console.log('[ pluginCloud ] uninstall');
            //this.uppy.removePreProcessor(this.prepareUpload)
            this.unmount()
        }

        i18nInit () {
            console.log('[ pluginCloud ] Translate');
        }
    }

    let uppy = Uppy.Core();

    // Setting dashboard
    let dashboard = 
    {
        id:'video',
        inline: false,
        target: 'body',
        trigger: '#open_modal_video',
        locale: {strings:UploadFile.LANG_ES},
        metaFields : [ 
            { id :  'name' , name :  'Nombre' , placeholder :  'file name'  }, 
            { id :  'description' , name :  'Descripción' , placeholder :  ''  } 
        ],
        
    }
    

    // Dashboard
    uppy.use(Uppy.Dashboard, dashboard);

    //Custom plugin
    uppy.use(Cloud,{
        target: Uppy.Dashboard,
        companionUrl: 'http://cloud.localhost'
    });

I have also noticed that every time I click the button it is rendered again.

I have tried to do add html directly with JS but it does not solve the problem correctly

JSCode
  • 31
  • 4

1 Answers1

0

I have been able to solve it by adding additional css to display the icon

enter image description here

[aria-controls="uppy-DashboardContent-panel--Cloud"]::before
{
  content: '';
  background: #00BCD4;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  overflow: hidden;
}

I would need to add an image in the 'after' field to show it.

JSCode
  • 31
  • 4