Multiple Image upload from frontend in wordpress

 

(function($) {

        // When the DOM is ready.

        $(function() {

            var file_frame; // variable for the wp.media file_frame

            // attach a click event (or whatever you want) to some element on your page

            $('.frontend-button').on('click', function(event) {

                event.preventDefault();

                // if the file_frame has already been created, just reuse it

                if (file_frame) {

                    file_frame.open();

                    return;

                }

                file_frame = wp.media.frames.file_frame = wp.media({

                    title: $(this).data('uploader_title'),

                    button: {

                        text: $(this).data('uploader_button_text'),

                    },

                    multiple: 'false' // set this to true for multiple file selection

                });

                file_frame.on('select', function() {

                    attachment = file_frame.state().get('selection').toJSON();

                    console.log('attachment', attachment);

                    var temp_filename = temp_id = new Array();

                    attachment.forEach((item) => {

                        temp_id = temp_id + ',' + item.id;

                        temp_filename.push(item.filename);

                    });

                    $("#frontend-button-name").html(temp_filename.toString());

                    $("#image_id").val(temp_id.toString());

                });

                file_frame.open();

            });

        });

    })(jQuery);