Как реализовать загрузку нескольких картинок с фронтэнда Wordpress?

Question

[nanny_ogg]

Добрый день. Есть загрузчик изображений из медиабиблиотеки Wordpress.

$user_parameters = parent::getUserParameters();
wp_enqueue_media();?>
		<div class="upload_image">
			<input id="<? echo $type ?>-path" type="hidden" name="<? echo $type ?>_path" value="">
			<input id="user_id" type="hidden" name="user_id" value="<? echo $user_parameters['user_id'] ?>">
			<button class="upload_image_button_<? echo $type ?> button">Загрузить фото</button>
		</div>

$('.upload_image_button').click(function(){
		function handlerRequest(image_type, image_url, user_id){
			$.ajax({
				  url: '/wp-content/themes/theme/include/profile/forms-handler.php',
				  type: 'POST',
				  data: {
				  	image_type: image_type, 
				  	image_url: image_url, 
				  	user_id: user_id
				  },
				  success: function(data, textStatus, xhr) {
				    //called if success
				  },
				  error: function(xhr, textStatus, errorThrown) {
				    //called when there is an error
				  }
				});
		}
		var send_attachment_bkp = wp.media.editor.send.attachment;
		var button = $(this);
		var user_id = $(button).siblings('#user_id').val();
		wp.media.editor.send.attachment = function(props, attachment) {
			console.log(attachment);
			$(button).siblings('#upload_photo-path').val(attachment.url);
			wp.media.editor.send.attachment = send_attachment_bkp;
			// handlerRequest('upload_photo', attachment.url, user_id);
			
		}
		
		wp.media.editor.open(button);
		return false;
	});

В целом, все отлично работает, если загружать только одно изображение. Если выбираешь больше одной, то console.log(attachment) возращает только первый объект. Что тут может быть не так?

Comments

[iwebdesign]

Приветствую!
Ищу решение похожей задачи. Поделись кодом пожалуйста )

Answer 1

[nanny_ogg]

Если кому-то понадобиться такое решение, проблема была в том, что у wp.media параметр multiple по умолчанию false, его надо установить в значение true. Как-то так

$(document).on('click', '.upload_image_button_photo', function(event){
		event.preventDefault();
		var button = $(this);
		var user_id = $(button).siblings('#user_id').val();

	    var custom_uploader = wp.media({
	        button: {
	            text: 'Загрузить'
	        },
	        multiple: true
	    })
	    .on('select', function() {
	        var attachments = custom_uploader.state().get('selection').toJSON();
	        // console.log(attachments);
	        attachments.forEach(function(curVal, index, array) {
	        	// console.log(curVal);
	        	handlerRequestPhoto('upload_photos', 'add', user_id, curVal.url );
	        	setTimeout(function(){
					$('.photos-block').append('<div class="col-sm-3 item"><div class="single-photo"><a class="fancybox" rel="gallery" href="' + curVal.url + '"><img src="' + curVal.url + '"></a></div></div>');
				}, 300);
	        });
	    })
	    .open();
	});