multiple image upload using wp_enqueue_media

Question

I have created a custom plugin and there has an image upload option.

In view page:
<div class="form-group"> <label class="control-label col-sm-2">Trade Photo:</label> <div class="col-sm-10"> <input type="button" class="btn btn-info" id="t_photo" value="Upload Photo" required> <span id="show-image"></span> <input type="hidden" id="trade_pic" name="trade_pic"> </div> </div>

And is js area:

   var image = wp.media.frames.file_frame = wp.media({
        title: 'Upload Image for Trade Details',
        button: {
          text: 'Choose Image'
        },
        multiple: true
      });
      image.on('select', function() {
        var selection = image.state().get('selection');
        selection.map( function( getImage ) {
            getImage = getImage.toJSON();
            jQuery("#show-image").after("<img src=" +getImage.url+" style='height:50px;width:50px;'/>");
            jQuery("#trade_pic").val(getImage.url);
        });
      });
      image.open();

How to upload multiple images using this method? I got all images but in value, it returns only the first image? How to get all images URL with separated (,)

Answer 1

I solved it here is my code:

      image.on('select', function() {
        let selection = image.state().get('selection');

        let _getImage = [];

        selection.map( function( getImage ) {
            _getImage.push(getImage.toJSON())

            getImage = getImage.toJSON();

            jQuery("#show-image").after("<img src=" +getImage.url+" style='height:50px;width:50px;'/>");

        })

        jQuery("#trade_pic").after("<input type='hidden' name='trade_pic' value='"+_getImage.map(val=> val.url)+"'/>")

      });

      image.open();