Upload obrázků s náhledem a možnosti vymazaní

gonner47

Ahoj, chtěl bych si do folmuláře přidat upload který po nahrátí obrázku zobrazí náhle a možnost smazat náhled. Znažil jsem se z provoznit tento uploader. Ale vůbec si stím nevím rady nemáte s tím někdo nějaký zkušenosti? Popřípadě poradit nějaký jiný uploader který by měl jednodušší impletaci do projektu? Děkuji

GEpic

A hází to nějakou chybu někde? Dev console?

gonner47

Abych pravdu řekl tak vůbec nevím jak to zprovoznit :(

MW

Zkus toto.

gonner47

@MW Super díky moc to je přesně to co jsem hledal! Jen se teď trošku peru s mazáním náhedu, pokud smažu náhled a odešlu formulář (protože upload souborů řeším až při ukládání dat) ve $valuesmám stejně všechny ty obrázky. protože se mi v inputu nezmažou. Mohl by jsi mi prosím tě poradit jak to řešíš ty děkuji?

MW

Pošli kód…
Tohle ten uploader neděla ani v demu, co tam mají…

gonner47

@MW můj konfigurační kód vypadá takto:

$(".image-upload").filer({
        limit: 1,
        maxSize: null,
        extensions: null,
        changeInput: '<div class="row"><div class="col-md-6"><div class="jFiler-input-dragDrop upload-image"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Přetáhněte obzázek zde</h3> <span style="display:inline-block; margin: 15px 0">nebo</span></div><a class="jFiler-input-choose-btn blue">Vyberet obrázek</a></div></div></div>',
        showThumbs: true,
        theme: "dragdropbox",
        templates: {
            box: '<ul class="jFiler-items-list jFiler-items-grid image-view"></ul></div>',
            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>\
                                        <span class="jFiler-item-others">{{fi-size2}}</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">Smazat</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>\
                                            <span class="jFiler-item-others">{{fi-size2}}</span>\
                                        </div>\
                                        {{fi-image}}\
                                    </div>\
                                    <div class="jFiler-item-assets jFiler-row">\
                                        <ul class="list-inline pull-left">\
                                            <li><span class="jFiler-item-others">{{fi-icon}}</span></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>',
            progressBar: '<div class="bar"></div>',
            itemAppendToEnd: false,
            removeConfirmation: true,
            _selectors: {
                list: '.jFiler-items-list',
                item: '.jFiler-item',
                progressBar: '.bar',
                remove: '.jFiler-item-trash-action'
            }
        },
        dragDrop: {
            dragEnter: null,
            dragLeave: null,
            drop: null,
        },
        uploadFile: {

            //upload obrázku na server mám až po uložení dat do DTB

        },
        files: null,
        addMore: false,
        clipBoardPaste: true,
        excludeName: null,
        beforeRender: null,
        afterRender: null,
        beforeShow: null,
        beforeSelect: null,
        onSelect: null,
        afterShow: null,
        onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){

            // zde jsem se snažil javasctiprem mazat obrázek z hodnoty value v inputu ale nijak se mi to nepodařilo

        },
        onEmpty: null,
        options: null,
        captions: {
            button: "Choose Files",
            feedback: "Choose files To Upload",
            feedback2: "files were chosen",
            drop: "Drop file here to Upload",
            removeConfirmation: "Opravnu si přejete odebrat obrázek?",
            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."
            }
        }
    });

Už vážně nevím jak na to. Budu ti vděčnej za každou radu.

MW

Vem to postupně…
S tímhle se to chova stejně?

$('#filer_input').filer({
    limit: 3,
    maxSize: 3,
    extensions: ['jpg', 'jpeg', 'png', 'gif'],
    changeInput: true,
    showThumbs: true
});

Editoval MW (13. 1. 2016 14:21)

gonner47

@MW jo když odešlu formulář tak mám ve $values všechny obrázky.. Snažl jsem se to vyřešit nějak javascriptem ale jelikož moc JS neovládám tak je tohle asi blbost:

onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){
            var file = file.name;
            //console.log(file);
            var files = document.getElementById("frm-newsForm-gallery").files;
            for (var i = 0; i < files.length; i++) {
                if(files[i].name == file) {
                    remove(files,i);
                }
            }
            console.log(files);
            document.getElementById("frm-newsForm-gallery").files = files;
        },

MW

Napada me jedine zkusit v tom onRemove volat nejaky handle a invalidovat snipet s formulářem.

Editoval MW (13. 1. 2016 20:56)

gonner47

@Mw Ani invalidování snipetu s formulářen nepomohlo. Nemělo by se to opravdu řešit nějak pomocí javascriptu? Zkoušel jsem to takto:

var fileName = file.name;
            var files = document.getElementById("frm-newsForm-gallery").files;
            for (var i = 0; i < files.length; i++) {
                if(files[i].name == fileName) {
                    var position = i;
                }
            }
            var newFiles = files.splice(position,1);
            console.log(newFiles);

Ale v konzoli mám tuto chybu:
Uncaught TypeError: files.splice is not a function

Nevíš čím by to mohlo být? Našel jsem si přesně jak se používá splice na internetu ale stejně mi to háže tu chybu. Díky za radu.