In ajax it is posting only newly added images.

[CorbettCloud]

At the time of image selection, if we select 1 or more images (1.jpeg, 2.jpeg) and close the dialog box and again open to select more files (3.jpeg, 4.jpeg) and close the dialog again then preview is showing the previous and new images (1.jpeg, 2.jpeg, 3.jpeg and 4.jpeg) which is OK, but while posting, it is posting only newly added images (2.jpeg, 3.jpeg). I using ajax to submit data.

[christianbayer]

Hi,
thank you for the feedback. I'll take a look at that.

[christianbayer]

@CorbettCloud could you please validate if your problem has been fixed with v1.2.3?

[CorbettCloud]

"Please enter a value with a valid mimetype." getting this message! also tried with mimes: undefined

[christianbayer]

@CorbettCloud this error is caused by the jQuery Validation plugin. When using Image Uploader with jQuery Validation, you must override the "accept" rule with something like this:

$("#myform").validate({
    rules: {  
       // other fields...
       "images[]": {
            // Set as requrired only in the "Create new" mode, not in "Edit mode"
            required: function () {
                return !$('input[type="hidden"][name="preloaded[]"]').length;
            },
            // Override accept validation
            accept: "image/jpeg, image/png, image/gif, image/svg+xml",
            // Validate file size (not necessary, the Image Uploader will handle this also)
            filesize: 5 * 1024 * 1024
        },
    }
});

Try that out. Anyway, the previous problem is solved?

[CorbettCloud]

The Current Problem is solved. But the Previous problem is the same with v1.2.3 also.

In first image I have uploaded 1 pic and return the image values by ajax and got this

in second image I have closed the popup and again added one more image and return the images value by ajax and got this

in third image I have closed the popup again and added third image and return the images value by ajax (each time I'm getting the value of new image only)

in forth image I have removed the last image and returned the value by ajax. In return I've got the value of image that I've removed!

in summery we have to upload the multiple images in one time if we want to remove or add one or more image its not updating the files.

Here is my code:
`//Image Uploader
$(function(){

$('.place-images').imageUploader({
label: 'Drag & Drop Place Images here or click to browse',
imagesInputName: 'place_images',
});
});

$("#addCCPlace").validate({
rules: {
"place_images[]": {
// Set as requrired only in the "Create new" mode, not in "Edit mode"
required: function () {
return !$('input[type="hidden"][name="preloaded[]"]').length;
},
// Override accept validation
accept: "image/jpeg, image/png, image/gif, image/svg+xml",
// Validate file size (not necessary, the Image Uploader will handle this also)
// filesize: 5 * 1024 * 1024
},
place_title: {
required: true,
},
about_card: {
required: true,
rangelength: [10, 145]
},
},
messages: {
place_title: {
required: "Place Title is required",
},
about_card: {
required: "About card is required",
},
},

highlight: function (input) {
  console.log(input);
  $(input).parents('.form-line').addClass('error');
},
unhighlight: function (input) {
  $(input).parents('.form-line').removeClass('error');
},
errorPlacement: function (error, element) {
  $(element).parents('.input-group').append(error);
  $(element).parents('.form-group').append(error);
},
submitHandler: function (form) {

  for (instance in CKEDITOR.instances) {
    CKEDITOR.instances[instance].updateElement();
  }

  var url = "<?php echo base_url();?>";

  $.ajax({
    type: 'POST',
    url: url + 'apps/cc-places/post-process/add-place',
    data: new FormData(form),
                // dataType: 'json',
                contentType: false,
                cache: false,
                processData:false,
                beforeSend: function(){
                  $('.submitBtn').attr("disabled","disabled");
                  $('#addCCPlace').css("opacity",".5");
                },
                success: function(msg){
                  alert(msg);
                  $('.statusMsg').html('');
                  if(msg == 'Place Added'){

                    location.reload();
                  }else{
                    $('.statusMsg').html('<span style="font-size:18px;color:#EA4335">Some problem occurred, please try again.</span>');
                  }
                  $('#addCCPlace').css("opacity","");
                  $(".submitBtn").removeAttr("disabled");
                }
              });

         return false; // required to block normal submit since you used ajax

       }



     });`

[signofsolutions]

any update on this? i have this same issue

[christianbayer]

After some tests, I've found out that everything is working fine, but just in Chrome. This error only occours in Edge. In Firefox, it just won't work, but also does not throw any error. In Safari, does not work either.

This problem is in the same boat as issue #2.

The thing is: to solve this, this plugin will need to be rewrited. There is no workaround on the File API, because there is no common behavior between the browsers. I will think about it and try to get a cross browser solution, but I can not assure you that I'll do it, neither when.

If any of you have any suggestion, feel free to share with me.

[christianbayer]

Just to update this topic:

I've been searching for alternatives in my free time, but still didn't find a cross browser solution. I'm afraid that this won't happen.