addMore does not work (for me)

[cracker182]

Dear Team,

I'm facing an issue, which leads to an error regarding addMore option.

Config:

                $(document).ready(() => {
                    $('#images').fileuploader({
                        theme: 'gallery',
                        sorter: true,
                        limit: 30,
                        changeInput: "fileuploader-input-button",
                        extensions: ['jpg', 'jpeg'],
                        addMore: true,
                        files: this.fields.images,
                        thumbnails: {
                            box: '<div class="fileuploader-items">' +
                                '<ul class="fileuploader-items-list">' +
                                '<li class="fileuploader-input"><button type="button" class="fileuploader-input-inner"><i class="fileuploader-icon-main"></i> <span>${captions.feedback}</span></button></li>' +
                                '</ul>' +
                                '</div>',
                            item: '<li class="fileuploader-item">' +
                                '<div class="fileuploader-item-inner">' +
                                '<div class="actions-holder">' +
                                '<button type="button" class="fileuploader-action fileuploader-action-sort" title="${captions.sort}"><i class="fileuploader-icon-sort"></i></button>' +
                                '<button type="button" class="fileuploader-action fileuploader-action-remove" title="${captions.remove}"><i class="fileuploader-icon-remove"></i></button>' +
                                '<div class="gallery-item-dropdown">' +
                                '<a class="fileuploader-action-popup">${captions.setting_edit}</a>' +
                                '<a class="gallery-action-rename">${captions.setting_rename}</a>' +
                                '<a class="gallery-action-asmain">${captions.setting_asMain}</a>' +
                                '</div>' +
                                '</div>' +
                                '<div class="thumbnail-holder">' +
                                '${image}' +
                                '<span class="fileuploader-action-popup"></span>' +
                                '<div class="progress-holder"><span></span>${progressBar}</div>' +
                                '</div>' +
                                '<div class="content-holder"><h5 title="${name}">${name}</h5><span>${size2}</span></div>' +
                                '<div class="type-holder">${icon}</div>' +
                                '</div>' +
                                '</li>',
                            item2: '<li class="fileuploader-item file-main-${data.isMain}">' +
                                '<div class="fileuploader-item-inner">' +
                                '<div class="actions-holder">' +
                                '<button type="button" class="fileuploader-action fileuploader-action-sort" title="${captions.sort}"><i class="fileuploader-icon-sort"></i></button>' +
                                '<button type="button" class="fileuploader-action fileuploader-action-remove" title="${captions.remove}"><i class="fileuploader-icon-remove"></i></button>' +
                                '<div class="gallery-item-dropdown">' +
                                '<a href="${data.url}" target="_blank">${captions.setting_open}</a>' +
                                '<a href="${data.url}" download>${captions.setting_download}</a>' +
                                '<a class="fileuploader-action-popup">${captions.setting_edit}</a>' +
                                '<a class="gallery-action-rename">${captions.setting_rename}</a>' +
                                '<a class="gallery-action-asmain">${captions.setting_asMain}</a>' +
                                '</div>' +
                                '</div>' +
                                '<div class="thumbnail-holder">' +
                                '${image}' +
                                '<span class="fileuploader-action-popup"></span>' +
                                '</div>' +
                                '<div class="content-holder"><h5 title="${name}">${name}</h5><span>${size2}</span></div>' +
                                '<div class="type-holder">${icon}</div>' +
                                '</div>' +
                                '</li>',
                            onImageLoaded: function (item, listEl, parentEl, newInputEl, inputEl) {
                                var api = $.fileuploader.getInstance(inputEl);

                                // add icon
                                item.image.find('.fileuploader-item-icon i').html('')
                                    .addClass('fileuploader-icon-' + (['image', 'video', 'audio'].indexOf(item.format) > -1 ? item.format : 'file'));

                                // check the image size
                                if (item.format == 'image' && item.upload && !item.imU) {
                                    if (item.reader.node && (item.reader.width < 100 || item.reader.height < 100)) {
                                        alert(api.assets.textParse(api.getOptions().captions.imageSizeError, item));
                                        return item.remove();
                                    }

                                    item.image.hide();
                                    item.reader.done = true;
                                    item.upload.send();
                                }

                            },
                            onItemRemove: function (html) {
                                html.fadeOut(250);
                            },
                            onSelect: function (item, listEl, parentEl, newInputEl, inputEl) {
                                console.log('onSelect');
                            }
                        },
                        dragDrop: {
                            container: '.fileuploader-theme-gallery .fileuploader-input'
                        },
                        afterRender: function (listEl, parentEl, newInputEl, inputEl) {
                            var api = $.fileuploader.getInstance(inputEl),
                                $plusInput = listEl.find('.fileuploader-input');

                            // bind input click
                            $plusInput.on('click', function () {
                                var elem = document.getElementById('images');
                                if (elem && document.createEvent) {
                                    var evt = document.createEvent("MouseEvents");
                                    evt.initEvent("click", true, false);
                                    elem.dispatchEvent(evt);
                                }
                            });
                        },
                        captions: {
                            button: function (options) {
                                return 'Bilder auswählen oder hierhin ziehen';
                            },
                            feedback: vm.getFeedback(),
                            feedback2: function (options) {
                                console.log(options);
                                return options.length + ' ' + (options.length > 1 ? ' Bilder sind' : ' Bild ist') + ' ausgewählt';
                            },
                            confirm: 'Auswählen',
                            cancel: 'Abbrechen',
                            name: 'Name',
                            type: 'Typ',
                            size: 'Dateigröße',
                            dimensions: 'Auflösung',
                            duration: 'Dauer',
                            crop: 'Crop',
                            rotate: 'Rotieren',
                            sort: 'Sortieren',
                            download: 'Download',
                            remove: 'Löschen',
                            drop: 'Hier loslassen zum Hochladen',
                            paste: '<div class="fileuploader-pending-loader"></div> Pasting a file, click here to cancel.',
                            removeConfirmation: 'Möchten Sie das Bild wirklich löschen?',
                            errors: {
                                filesLimit: 'Nur ${limit} Bilder sind erlaubt.',
                                filesType: 'Nur ${extensions} sind erlaubt.',
                                fileSize: '${name} ist zu groß! Bilder dürfen maximal ${fileMaxSize}MB.',
                                filesSizeAll: 'Files that you chose are too large! Please upload files up to ${maxSize} MB.',
                                fileName: 'Datei mit dem Namen ${name} ist bereits ausgewählt.',
                                folderUpload: 'Order können nicht hochgeladen werden.'
                            }
                        }
                    });
                })

my html-element:

 <input type="file" id="images" name="images[]">

The first Upload works, but if I want to add more images (with a second click on the button) the File-Explorer opens but not upload is happening.

Maybe you can support me here? (v2.2) Thanks for your help.

Greetings.

[innostudio]

@cracker182 try to replace the id="images" with class="images"

[cracker182]

thanks for your quick reply. but this does not solve the issue :(

$('.images').fileuploader({//----}) <input type="file" class="images" name="images[]">

Thanks :)

[innostudio]

@cracker182 ok, but you forgot also to modify your changes in afterRender. changeInput is also not our original code.

[cracker182]

Thanks to your help i was able to correct the config. Now it works like charm. Thank you very much and have a nice day.

Greetings