How to upload documents using asset manager.

[snehlata08]

I want to create a custom block which can be used to upload documents other than images like pdf, docx, excel etc.

I have tried this code as below

gjs.AssetManager.addType('document', {
  view: {
    updateTarget(target) {
      if (target.get('type') == 'image') {
        this.model.set('tagName', 'a')
        target.set({
          type: 'document',
          tagName: 'a',
          href: this.model.get('src'),
          content: this.model.get('name') || 'Download Document'
        });
      }
    },
    getPreview() {
      const src = this.model.get('src');
      const name = this.model.get('name') || 'Document';
      return `<div>
                <a class="gjs-no-pointer" href="${src}" download="${name}">
                  ${name}
                </a>
              </div>`;
    },
    getInfo() {
      return `<div>${this.model.get('name') || 'Document'}</div>`;
    }
  },
  isType(value) {
    if (typeof value == 'string') {
      const valueParts = value.split('.');
      const ext = valueParts[valueParts.length - 1].toLowerCase();
      const validExtensions = ["pdf", "doc", "docx", "xls", "xlsx"];
      if (validExtensions.includes(ext)) {
        return { type: 'document', src: value };
      }
    }
  }
});
gjs.BlockManager.add('document-upload', {
  label: 'Document Upload',
  content: { type: 'document' },
  category: 'Basic',
  attributes: { class: 'fa fa-file' }
});

It creates a block in the block manger but when i drag it to the canvas. It shows nothing. And no asset manager popup opens up. Basically I want use the same thing which is working for images.

[artf]

Your custom component document should have an onActive method in its view, exactly like the image does. Then in the block definition indicate to trigger that method:

gjs.BlockManager.add('document-upload', {
  // ...
  content: { type: 'document' },
  activate: true,
});

[snehlata08]

@artf I tried this. but still it shows an empty div