resources/views/modals/media-file-fields.phtml
<?php
declare(strict_types=1);
use Fisharebest\Webtrees\Elements\SourceMediaType;
use Fisharebest\Webtrees\Http\RequestHandlers\AutoCompleteFolder;
use Fisharebest\Webtrees\I18N;
use Fisharebest\Webtrees\MediaFile;
use Fisharebest\Webtrees\Tree;
/**
* @var string $max_upload_size
* @var MediaFile|null $media_file
* @var array<int|string,string> $media_types
* @var Tree $tree
* @var array<string,string> $unused_files
*/
?>
<div class="row <?= $media_file instanceof MediaFile ? 'd-none' : '' ?>">
<label class="col-form-label col-sm-2" for="file-location">
<?= I18N::translate('Media file') ?>
</label>
<div class="col-sm-10">
<select class="form-select" id="file-location" name="file_location">
<option value="upload">
<?= I18N::translate('A file on your computer') ?>
</option>
<?php if (!empty($unused_files)) : ?>
<option value="unused">
<?= I18N::translate('A file on the server') ?>
</option>
<?php endif ?>
<option value="url">
<?= /* I18N: URL = web address */ I18N::translate('A URL') ?>
</option>
</select>
</div>
</div>
<div class="row file-location file-location-upload <?= $media_file instanceof MediaFile ? 'd-none' : '' ?>">
<label class="col-form-label col-sm-2" for="file">
<?= I18N::translate('A file on your computer') ?>
</label>
<div class="col-sm-10">
<input class="form-control" id="file" name="file" type="file">
<small class="text-muted">
<?= I18N::translate('Maximum upload size: ') ?>
<?= $max_upload_size ?>
</small>
</div>
</div>
<div class="row file-location file-location-upload <?= $media_file instanceof MediaFile && $media_file->isExternal() ? 'd-none' : '' ?>">
<label class="col-form-label col-sm-2" for="folder">
<?= I18N::translate('Filename on server') ?>
</label>
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="radio" name="auto" id="filename-manual" value="0" checked>
<label class="form-check-label input-group" for="filename-manual">
<input class="form-control" id="folder" name="folder" placeholder="<?= I18N::translate('Folder') ?>" type="text" value="<?= e(dirname($media_file instanceof MediaFile ? $media_file->filename() : '') === '.' ? '' : dirname($media_file instanceof MediaFile ? $media_file->filename() : '')) ?>" data-wt-autocomplete-url="<?= e(route(AutoCompleteFolder::class, ['tree' => $tree->name()])) ?>" autocomplete="off">
<span class="input-group-text">/</span>
</label>
</div>
</div>
<div class="col-sm-6">
<input aria-label="<?= I18N::translate('Filename') ?>" class="form-control" name="new_file" type="text" placeholder="<?= I18N::translate('Same as uploaded file') ?>" value="<?= e(basename($media_file ? $media_file->filename() : '')) ?>">
</div>
</div>
<div class="form-text">
<?= I18N::translate('If you have a large number of media files, you can organize them into folders and subfolders.') ?>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="auto" id="filename-auto" value="1">
<label class="form-check-label" for="filename-auto">
<?= I18N::translate('Create a unique filename') ?>
</label>
</div>
</div>
</div>
<div class="row file-location file-location-unused d-none">
<label class="col-form-label col-sm-2" for="unused">
<?= I18N::translate('A file on the server') ?>
</label>
<div class="col-sm-10">
<?= view('components/select', ['name' => 'unused', 'selected' => '', 'options' => $unused_files]) ?>
<small class="text-muted">
</small>
</div>
</div>
<div class="row file-location file-location-url <?= $media_file && $media_file->isExternal() ? '' : 'd-none' ?>">
<label class="col-form-label col-sm-2" for="remote">
<?= I18N::translate('URL') ?>
</label>
<div class="col-sm-10">
<input class="form-control" type="url" id="remote" name="remote" placeholder="https://www.example.com/photo.jpeg" value="<?= e($media_file && $media_file->isExternal() ? $media_file->filename() : '') ?>">
</div>
</div>
<div class="row mb-3">
<label class="col-form-label col-sm-2" for="title">
<?= I18N::translate('Title') ?>
</label>
<div class="col-sm-10">
<input class="form-control" id="title" name="title" type="text" value="<?= e($media_file ? $media_file->title() : '') ?>">
</div>
</div>
<div class="row mb-3">
<label class="col-form-label col-sm-2" for="type">
<?= I18N::translate('Media type') ?>
</label>
<div class="col-sm-10">
<?= (new SourceMediaType(''))->edit('type', 'type', $media_file ? $media_file->type() : '', $tree) ?>
</div>
</div>
<script>
webtrees.autocomplete('#folder');
document.getElementById('file-location').addEventListener('change', function () {
document.querySelectorAll('.file-location').forEach((e) => e.classList.add('d-none'));
document.querySelectorAll('.file-location-' + this.value).forEach((e) => e.classList.remove('d-none'));
});
</script>