Search code examples
asp.net-mvc-3razortelerik-mvcrich-text-editor

pdf upload functionality in telerik rich text editor


I am using ASP.NET MVC Telerik editor in my project , the telerik editor doesn't support PDF upload functionality, well it supports image upload, is there a way I can include PDF upload functionality or have anyone tried to do something like that?

My settings:

@(Html.Telerik().Editor().Name(clientId)
/*.Encode(false) weird. Settings "Encode(false)" doesn't work on category & product details page
Now we have to manually decode values*/
.Value(Model)
.Tools(tools => tools
.Custom(settings => settings.HtmlAttributes(new { @class = "t-html", onclick = "viewRichHtmlEditorSource" + random + "(event)", title="Edit HTML" })))
.FileBrowser(browser => browser.Browse("Browse", "ImageBrowser")
    .Thumbnail("Thumbnail", "ImageBrowser")
    .Upload("Upload", "ImageBrowser")
    .DeleteFile("DeleteFile", "ImageBrowser")
    .DeleteDirectory("DeleteDirectory", "ImageBrowser")
    .CreateDirectory("CreateDirectory", "ImageBrowser")))

How to add your suggested functionality within it?


Solution

  • Yes it does support pdf, i'm using it for pdf and it works just fine. What you have to look out for is the SIZE of the file, you have to check and make sure it's not over 5MB big

    Here is a sample of what I'm using:

    <div class="editor-field">
        @Html.TextBoxFor(model => model.NewFileName)
        @(Html.Telerik().Upload()
           .Name("attachment")
           .Multiple(false)
           .ClientEvents(events => events.OnSelect("onSelect"))
        )
    </div>
    

    The onSelect script:

    function onSelect(e) {
        if (e.files[0].size > 5000000) {
            alert('The file size is too large for upload');
            e.preventDefault();
            return false;
        }
        // Array with information about the uploaded files
        var files = e.files;
        var ext = $('#attachment').val().split('.').pop().toLowerCase();
        if ($.inArray(ext, ['pdf']) == -1) {
            alert('This type of file is restricted from being uploaded due to security reasons');
            e.preventDefault();
        } else {
            $("#NewFileName").val(files[0].name);
        }
        return false;
    }
    

    The Controller action must receive the attachement in the signature like so:

    public ActionResult EditFile(HttpPostedFileBase attachment) {
    ...
    }