Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data array with duplicated items #67

Open
AFMW opened this issue Jan 8, 2021 · 1 comment
Open

Data array with duplicated items #67

AFMW opened this issue Jan 8, 2021 · 1 comment

Comments

@AFMW
Copy link

AFMW commented Jan 8, 2021

When Im doing the request to the server the plugin is sending duplicated items of the Images array.
For example: If i upload 3 images the plugin is sending those 3 images duplicated to the server.

This is the server response:

array(5) {
    ["name"]=>
    array(6) {
      [0]=>
      string(20) "aaa-inmobiliaria.png"
      [1]=>
      string(23) "alexandra-bolivar-2.png"
      [2]=>
      string(22) "Área4_Transparent.png"
      [3]=>
      string(20) "aaa-inmobiliaria.png"
      [4]=>
      string(23) "alexandra-bolivar-2.png"
      [5]=>
      string(22) "Área4_Transparent.png"
    }

JS implementation of the plugin:

/// PROJECT IMAGES -  fileInput_project
        $('#fileInput_project').fileuploader({
            // Options will go here
            limit: 20,
            maxSize: 50,

                extensions: null,
                changeInput: ' ',
            theme: 'thumbnails',
                enableApi: true,
            addMore: true,
            thumbnails: {
              box: '<div class="fileuploader-items">' +
                              '<ul class="fileuploader-items-list">' +
                        '<li class="fileuploader-thumbnails-input"><div class="fileuploader-thumbnails-input-inner"><i>+</i></div></li>' +
                              '</ul>' +
                          '</div>',
              item: '<li class="fileuploader-item">' +
                       '<div class="fileuploader-item-inner">' +
                                   '<div class="type-holder">${extension}</div>' +
                                   '<div class="actions-holder">' +
                           '<button type="button" class="fileuploader-action fileuploader-action-remove" title="${captions.remove}"><i class="fileuploader-icon-remove"></i></button>' +
                                   '</div>' +
                                   '<div class="thumbnail-holder">' +
                                       '${image}' +
                                       '<span class="fileuploader-action-popup"></span>' +
                                   '</div>' +
                                   '<div class="content-holder"><h5>${name}</h5><span>${size2}</span></div>' +
                                   '<div class="progress-holder">${progressBar}</div>' +
                               '</div>' +
                          '</li>',
              item2: '<li class="fileuploader-item">' +
                       '<div class="fileuploader-item-inner">' +
                                   '<div class="type-holder">${extension}</div>' +
                                   '<div class="actions-holder">' +
                           '<a href="${file}" class="fileuploader-action fileuploader-action-download" title="${captions.download}" download><i class="fileuploader-icon-download"></i></a>' +
                           '<button type="button" class="fileuploader-action fileuploader-action-remove" title="${captions.remove}"><i class="fileuploader-icon-remove"></i></button>' +
                                   '</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="progress-holder">${progressBar}</div>' +
                               '</div>' +
                           '</li>',
              startImageRenderer: true,
                    canvasImage: false,
              _selectors: {
                list: '.fileuploader-items-list',
                item: '.fileuploader-item',
                start: '.fileuploader-action-start',
                retry: '.fileuploader-action-retry',
                remove: '.fileuploader-action-remove'
              },
              onItemShow: function(item, listEl, parentEl, newInputEl, inputEl) {
                var plusInput = listEl.find('.fileuploader-thumbnails-input'),
                            api = $.fileuploader.getInstance(inputEl.get(0));
               
                        plusInput.insertAfter(item.html)[api.getOptions().limit && api.getChoosedFiles().length >= api.getOptions().limit ? 'hide' : 'show']();
               
                if(item.format == 'image') {
                  item.html.find('.fileuploader-item-icon').hide();
                }

                // add sorter button to the item html
                        item.html.find('.fileuploader-action-remove').before('<button type="button" class="fileuploader-action fileuploader-action-sort" title="Sort"><i class="fileuploader-icon-sort"></i></button>');
              },
                    onItemRemove: function(html, listEl, parentEl, newInputEl, inputEl) {
                        var plusInput = listEl.find('.fileuploader-thumbnails-input'),
                    api = $.fileuploader.getInstance(inputEl.get(0));
                   
                        html.children().animate({'opacity': 0}, 200, function() {
                            html.remove();
                           
                            if (api.getOptions().limit && api.getChoosedFiles().length - 1 < api.getOptions().limit)
                                plusInput.show();
                        });
                    }
            },

                dragDrop: {
              container: '.fileuploader-thumbnails-input'
            },
            afterRender: function(listEl, parentEl, newInputEl, inputEl) {
              var plusInput = listEl.find('.fileuploader-thumbnails-input'),
                api = $.fileuploader.getInstance(inputEl.get(0));
           
              plusInput.on('click', function() {
                api.open();
              });
                   
                    api.getOptions().dragDrop.container = plusInput;
            },

            sorter: {
              selectorExclude: null,
              placeholder: null,
              scrollContainer: window,
              onSort: function(list, listEl, parentEl, newInputEl, inputEl) {
                        // onSort callback
                        console.log(list);
                        console.log(listEl);
                        console.log(parentEl);
                        console.log(newInputEl);
                        console.log(inputEl);
              }
            },
            files: [{
                name: 'janeSmith.jpg', // file name
                size: 15.237, // file size in bytes
                type: 'image/jpg', // file MIME type
                file: 'https://gloho.com/cdn/utilidades/janeSmith.jpg', // file path
                // local: 'img/janeSmith.jpg', // file path in listInput (optional)
                data: {
                  url: "https://gloho.com/cdn/utilidades/janeSmith.jpg",
                    thumbnail: 'https://gloho.com/cdn/utilidades/janeSmith.jpg', // item custom thumbnail; if false will disable the thumbnail (optional)
                    readerCrossOrigin: 'anonymous', // fix image cross-origin issue (optional)
                    readerForce: true, // prevent the browser cache of the image (optional)
                    readerSkip: true, // skip file from reading by rendering a thumbnail (optional)
                    popup: true, // remove the popup for this file (optional)
                    listProps: {}, // custom key: value attributes in the fileuploader's list (optional)

                    your_own_attribute: 'your own value'
                }
            }],
        });//Fin plugin

JS form submit:

var $form = $("#form_MediaUnits");

       $form.on('submit', function(e) {

         e.preventDefault();
         console.log("pasamos si señor");

         var formData = new FormData(), _fileuploaderFields = [];
    
         // append inputs to FormData
         $.each($form.serializeArray(), function(key, field) {
           formData.append(field.name, field.value);
         });

         // append file inputs to FormData
         $.each($form.find("input:file"), function(index, input) {
             var $input = $(input),
                 name = $input.attr('name'),
             files = $input.prop('files'),
             api = $.fileuploader.getInstance($input);
                    
             // add fileuploader files to the formdata
             if (api) {
               if ($.inArray(name, _fileuploaderFields) > -1)
                 return;
               files = api.getChoosedFiles();
               _fileuploaderFields.push($input);
             }

             for(var i = 0; i<files.length; i++) {
               formData.append(name, (files[i].file ? files[i].file : files[i]), (files[i].name ? files[i].name : false));
             }
         });

         $.ajax({
           url: "mjs/do.php?idu="+sessionStorage.getItem("idUnidad")+"&tkn="+btoa(sessionStorage.getItem("token"))+"&pm="+sessionStorage.getItem("nombredelproyecto")+"&tp=unidad_planos&idp="+sessionStorage.getItem("idProyecto")+"&idu="+sessionStorage.getItem("id_constructora"),
           data: formData,
           type: $form.attr('method') || 'POST',
           enctype: $form.attr('enctype') || 'multipart/form-data',
           cache: false,
           contentType: false,
           processData: false,
           beforeSend: function() {
               $form.find('.form-status').html('<div class="progressbar-holder"><div class="progressbar"></div></div>');
               $form.find('input[type="submit"]').attr('disabled', 'disabled');
           },
           xhr: function() {
               var xhr = $.ajaxSettings.xhr();
              
               if (xhr.upload) {
                   xhr.upload.addEventListener("progress", this.progress, false);
               }
              
               return xhr;
           },
           success: function(result, textStatus, jqXHR) {
               // update input values
             try {
             var data = JSON.parse(result);
             for(var key in data) {
               var field = data[key],api;
               // if fileuploader input
               if (field.files) {
                   var input = _fileuploaderFields.filter(function(element) {
                     return key == element.attr('name').replace('[]', '');
                   }).shift(),
                   api = input ? $.fileuploader.getInstance(input) : null;
                   if (field.hasWarnings) {
                     for (var warning in field.warnings) {
                         alert(field.warnings[warning]);
                     }
                     return this.error ? this.error(jqXHR, textStatus, field.warnings) : null;
                   }  
                   if (api) {
                       // update the fileuploader's file names
                       for (var i = 0; i<field.files.length; i++) {
                           $.each(api.getChoosedFiles(), function(index, item) {
                               if (field.files[i].old_name == item.name) {
                                   item.name = field.files[i].name;
                                   item.html.find('.column-title > div:first-child').text(field.files[i].name).attr('title', field.files[0].name);
                               }
                               item.data.uploaded = true;
                           });
                       }
                       api.updateFileList();
                   }
               }
               else {
                   $form.find('[name="'+ key +'"]:input').val(field);
               }
             }
           }
           catch (e) {}
               $form.find('.form-status').html('<p class="text-success">Success!</p>');
               $form.find('input[type="submit"]').removeAttr('disabled');
           },
           error: function(jqXHR, textStatus, errorThrown) {
               $form.find('.form-status').html('<p class="text-error">Error!</p>');
               $form.find('input[type="submit"]').removeAttr('disabled');
           },
           progress: function(e) {
               if (e.lengthComputable) {
                   var t = Math.round(e.loaded * 100 / e.total).toString();
                   $form.find('.form-status .progressbar').css('width', t + '%');
               }
           }
       });


       })
@onesideat
Copy link

@AFMW instead of addMore: true, set upload: true

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants