Как передать данные из dropzone в свой ajax запрос?

Question

[Юрий Янин]

У меня есть форма обратной связи, которая при нажатии button отправляет данные в ajax конструкцию из неё в обработчик и ответ назад на фронт. Я решил добавить dropzone.js чтобы удобнее загружать изображения и столкнулся с такой проблемой, dropzone создает div'ы с информацией о файлах, а не input. Соответственно я не могу передать эту информацию со своей формой в свой ajax запрос, каким образом я могу отправить данные из dropbox вместе с остальными моими данными в мой ajax?

Answer 1

[WP Panda]

Примерно так:
После загрузки файла передаете его id в скрытое поле вашей формы.

success: function (file, response) {
            file.previewElement.classList.add("dz-success");
            file['attachment_id'] = response;
            var ids = $('#img-id').val() + ',' + response;
            $('#img-id').val(ids);
        },

а id уже передавайте с формой

Comments

[Юрий Янин]

Разве input tipe file перезаписываемый?

[WP Panda]

Там в 2 этапа,
1 обработчик для Dropzone - загружаете файл и отдаете его id как я показал выше
2 обработчик самой формы

[Юрий Янин]

WP Panda, я правильно понял? С помощью dropzone загружаем файлы заранее в wp (куда не понял), возвращаем id в обычный input text hidden. Потом при нажатии на сабмит уже в обработчике с помощью php достаем необходимые нам фото из базы wp?

[WP Panda]

Да. Именно так.
Загружаем куда захотите. Лично я для таких целей переопределяю в обработчике dropzone директорию загрузки, для загрузки картинок такого типа в отдельную папку.
А после отправки формы удаляю загруженные файлы.

[Юрий Янин]

А как должен выглядеть обработчик для dropzone в таком случае? Мне же необходимо как-то записать эти картинки в базу данных media wp и вернуть id в обратку.

[WP Panda]

В самом простом виде как то так это просто пример за 2 минуты на коленке сейчас, работать он будет, но использовать его в продакшене не стоит. Ну и вообще, что бы реализовать это, вы должны иметь представление о том, что вы делаете, направить вас тут направят, но полный код вам писать никто не будет тут.

function dropzone_loader_callback() {
		$newupload = 0;
		
		if ( ! empty( $_FILES ) ) {
			$files = $_FILES;
			foreach ( $files as $file ) {
				$newfile = array(
					'name' => $file[ 'name' ],
					'type' => $file[ 'type' ],
					'tmp_name' => $file[ 'tmp_name' ],
					'error' => $file[ 'error' ],
					'size' => $file[ 'size' ]
				);
				
				$_FILES = array( 'upload' => $newfile );
				foreach ( $_FILES as $file => $array ) {
					$newupload = media_handle_upload( $file, 0 );
				}
			}
		}
		
		echo $newupload;
		
		die();
	}

[Юрий Янин]

WP Panda, у меня тупо нет представления как работает dropzone. Увидел media_handle_upload( $file, 0 ); и всё сразу встало на место. Это и была недостающая деталь из-за которой я не мог понять как данные получить. Тут собственно еще нужно будет массив пересобрать. У меня большое количество фото будет за раз загружаться. Хотя... можно просто очередь составить.

[Юрий Янин]

WP Panda, я не могу понять как заставить dropzone отправить данные в нужную мне функцию обработчик. Если в своем ajax я вызываю её с помощью дополнительного параметра action: , то как это происходит тут?

[Юрий Янин]

WP Panda, окей. Проблему с подключением я решил. Но возникла другая. Media_handle_upload возвращает error WP_Error Object без какой либо ошибки внутри.

[WP Panda]

Юрий Янин, А в $_FILES в обработчике, что у Вас лежит?