Using FileManager as file manager for TinyMCE 5/6

1 Answer 890 Views
FileManager
Raymond
Top achievements
Rank 1
Raymond asked on 29 Jun 2022, 05:55 PM | edited on 29 Jun 2022, 05:56 PM

Hello,

I am trying to use FileManager as the file manger for TinyMCE 6. I have been able to successfully get it to load in TinyMCE's windowManager dialog.  All of the features of the FileManager work, except for uploading files. When I click on the Upload button, or drag and drop a file into the FileManager, nothing happens. When I view the browser console, I see a warning that says: The uploadDialog dialog is not available!

What will cause the uploadDialog to not be able to show?

I am using the FileManager in a plain .html file like so:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.bootstrap.min.css" />
<link href="https://cdn.kendostatic.com/2022.2.621/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="telerik-file-manager.min.css" />

<script src="https://kendo.cdn.telerik.com/2022.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="filemanager"></div>
<script src="telerik-file-manager.min.js"></script>
</body>
</html>

The jQuery code that I'm using to initialize the FileManager is:

$('#filemanager').kendoFileManager({
initialView: 'grid',
draggable: 'true',
resizeable: 'false',
dataSource: {
schema: kendo.data.schemas.filemanager,
uploadUrl: '/api/telerik-file-manager/upload',
transport: {
read: {
url: `/api/telerik-file-manager/read?filter=${filter}`,
method: 'GET'
},
create: {
url: '/api/telerik-file-manager/create',
method: 'GET'
},
update: {
url: '/api/telerik-file-manager/update',
method: 'GET'
},
destroy: {
url: '/api/telerik-file-manager/delete',
method: 'GET'
}
}
},
contextMenu: {
items: [
{ name: "select", text: "Select File", command: "SelectFile", spriteCssClass: "k-icon k-i-hyperlink-open" },
{ name: "rename" },
{ name: "delete" },
]
}
});

I am using ASP.NET Core 6 and I have the FileManager completely working great on a Razor Page, but I can't get the Upload feature to work when loading it into a TinyMCE windowManager dialog.

Any suggestions would be appreciated.

1 Answer, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 04 Jul 2022, 01:37 PM

Hi Raymond,

The warning mentioned would be console logged only when the uploadDialog field is unavailable in the FileManager instance. If you do not experience that problem when using the FileManager outside the TinyMCE, it is probably something that TinyMCE overrides the FileManager instance or the field. However, as TinyMCE is not part of our product I can only make assumptions about why it would mess with the client-side instance. 

Can you provide some more details on the integration with the TinyMCE or showcase it somehow in a GitHub repo, runnable sample project or something else?  

Regards,
Ianko
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
FileManager
Asked by
Raymond
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or