How to implement the jQuery Filer Plugin?

2

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

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

Is it possible to do this with an ASP.NET generic (.ashx) controller?

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."
        }
    }
});
    
asked by anonymous 21.09.2015 / 23:04

1 answer

1

The Backload is missing. It does asynchronous management with JavaScript plugins, be it the jQuery Filter or the 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's implemented.

Then go back to your solution and just install the Core package . Use the sample project to set up your project.

    
22.09.2015 / 00:04