1<?php 2 3use Fisharebest\Webtrees\Http\RequestHandlers\CreateMediaObjectAction; 4use Fisharebest\Webtrees\I18N; 5use Fisharebest\Webtrees\Tree; 6 7/** 8 * @var string $max_upload_size 9 * @var array<string> $media_types 10 * @var Tree $tree 11 * @var array<string> $unused_files 12 */ 13 14?> 15 16<form method="post" action="<?= e(route(CreateMediaObjectAction::class, ['tree' => $tree->name()])) ?>" id="wt-modal-form"> 17 <?= csrf_field() ?> 18 19 <?= view('modals/header', ['title' => I18N::translate('Create a media object')]) ?> 20 21 <div class="modal-body"> 22 <?= view('modals/media-object-fields', ['max_upload_size' => $max_upload_size, 'media_types' => $media_types, 'unused_files' => $unused_files, 'tree' => $tree]) ?> 23 </div> 24 25 <?= view('modals/footer-save-cancel') ?> 26</form> 27 28<script> 29 // Submit the modal form using AJAX 30 document.getElementById("wt-modal-form").addEventListener("submit", function (event) { 31 event.preventDefault(); 32 let form = event.target; 33 let modal_content = document.querySelector("#wt-ajax-modal .modal-content"); 34 let select = document.getElementById(modal_content.dataset.selectId); 35 36 $.ajax({ 37 url: form.action, 38 type: form.method, 39 data: new FormData(form), 40 async: false, 41 cache: false, 42 contentType: false, 43 processData: false, 44 success: function (data) { 45 if (select) { 46 // If this modal was activated by the "new" button in a select2 47 // edit control, then insert the result and select it. 48 let option = new Option(data.text, data.id, true, true); 49 option.innerHTML = option.innerText; 50 51 $(select) 52 .select2({ escapeMarkup: (x) => x }) 53 .empty() 54 .append(option) 55 .trigger("change"); 56 57 $("#wt-ajax-modal").modal("hide"); 58 } else { 59 modal_content.innerHTML = data.html; 60 } 61 }, 62 failure: function (data) { 63 modal_content.innerHTML = data.html; 64 }, 65 }); 66 }); 67</script> 68