How to implement jQuery Filer Plugin?

Question

I’m trying to implement a component for uploading images with thumbnails, and I’ve spent a lot of time looking for one that suits my needs. After a day of searching I found jQuery Filer.

Anyway, I’m having difficulties in the implementation, mainly because I can not use PHP in my solution.

There is a possibility to do this with a generic controller (.ashx) of ASP.NET?

My HTML:

<form action="GenericHandler" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" id="input_file" multiple="multiple">
    <input type="submit">
</form>

My Javascript:

$('#input_file').filer({
    limit: 10,
    maxSize: 10,
    extensions: null,
    changeInput: true,
    showThumbs: true,
    appendTo: null,
    theme: "default",
    templates: {
        box: '<ul class="jFiler-item-list"></ul>',
        item: '<li class="jFiler-item">\
                    <div class="jFiler-item-container">\
                        <div class="jFiler-item-inner">\
                            <div class="jFiler-item-thumb">\
                                <div class="jFiler-item-status"></div>\
                                <div class="jFiler-item-info">\
                                    <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
                                </div>\
                                {{fi-image}}\
                            </div>\
                            <div class="jFiler-item-assets jFiler-row">\
                                <ul class="list-inline pull-left">\
                                    <li>{{fi-progressBar}}</li>\
                                </ul>\
                                <ul class="list-inline pull-right">\
                                    <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                </ul>\
                            </div>\
                        </div>\
                    </div>\
                </li>',
        itemAppend: '<li class="jFiler-item">\
                    <div class="jFiler-item-container">\
                        <div class="jFiler-item-inner">\
                            <div class="jFiler-item-thumb">\
                                <div class="jFiler-item-status"></div>\
                                <div class="jFiler-item-info">\
                                    <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
                                </div>\
                                {{fi-image}}\
                            </div>\
                            <div class="jFiler-item-assets jFiler-row">\
                                <ul class="list-inline pull-left">\
                                    <span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span>\
                                </ul>\
                                <ul class="list-inline pull-right">\
                                    <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                </ul>\
                            </div>\
                        </div>\
                    </div>\
                </li>',
        progressBar: '<div class="bar"></div>',
        itemAppendToEnd: false,
        removeConfirmation: true,
        _selectors: {
            list: '.jFiler-item-list',
            item: '.jFiler-item',
            progressBar: '.bar',
            remove: '.jFiler-item-trash-action',
        }
    },
    uploadFile: {
        //AQUI REFERENCIA O HANDLER
        url: 'HANDLER',
        data: {},
        type: 'POST',
        enctype: 'multipart/form-data',
        beforeSend: function () { },
        success: function (data, el) {
            var parent = el.find(".jFiler-jProgressBar").parent();
            el.find(".jFiler-jProgressBar").fadeOut("slow", function () {
                $("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
            });
        },
        error: function (el) {
            var parent = el.find(".jFiler-jProgressBar").parent();
            el.find(".jFiler-jProgressBar").fadeOut("slow", function () {
                $("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
            });
        },
        statusCode: {},
        onProgress: function () { },
        onComplete: function () { }
    },
    dragDrop: {
        dragEnter: null,
        dragLeave: null,
        drop: null,
    },
    addMore: true,
    clipBoardPaste: true,
    excludeName: null,
    files: null,
    beforeShow: function () { return true },
    onSelect: function () { },
    afterShow: function () { },
    onRemove: function () { },
    onEmpty: function () { },
    captions: {
        button: "Choose Files",
        feedback: "Choose files To Upload",
        feedback2: "files were chosen",
        drop: "Drop file here to Upload",
        removeConfirmation: "Are you sure you want to remove this file?",
        errors: {
            filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
            filesType: "Only Images are allowed to be uploaded.",
            filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
            filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
        }
    }
});

Answer 1

Still need to install the Backload. It does asynchronous management with Javascript plugins, be it jQuery Filter or jQuery Upload Plugin.

To learn how to use Backload, open a new project and install this Nuget package. Run the examples and see how it is implemented.

Then go back to your solution and install only the Core package. Use the sample project to configure your project.