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
<code>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' }
});
</code>
<code>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' }
});
</code>
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.