Zenko

let data = new FormData();


data.append('file', input.files[0]);

const options = {
  method: 'POST',
  body: data	
}

const response = await fetch('url', options);
const res = await response.json();
console.log(res);

Есть смысл сгенерировать картинку в формате строки base64 и потом JSON-ом передавать на бекенд?

Думаю, смысл есть. Нужно знать контекст. Смотря что разрабатываете. Смотря что ожидает сервер. Смотря, как хранятся данные. Скажем, если у Вас RestFull API, и общение с сервером происходит на основе JSON, то я бы и картинку передавал в JSON, как Вы и написали. Если же это "доделка" к, скажем, WordPress, или другой CMS, и она ожидает именно картинку, то см. ответ Выше (Tim).

Не надо никакого mouseup. Открываем документацию к используемому плагину, смотрим, какие доступны обработчики событий, выбираем подходящий:

$('#sortable').sortable({
  stop() {
    const values = $('input[name="slider-id"]', this).get().map(n => n.value);
  },
});

Можно сделать функцию:

function createMailHtml($data = []) {
    ob_start();
    extract($data);
    require_once('views/templates/confirm_email_template.php');
    $html = ob_get_clean();
    return $html;
}

В которую передаем массив с переменными, например:

$data = ['title' => 'Заголовок', 'content' => 'Основной текст'];

а в шаблоне письма 'views/templates/confirm_email_template.php' подставляем эти переменные:

<h1><?=$title?></h1>
<p><?=$content?></p>

результат функции можно присвоить переменной или вывести:

$mailbody = createMailHtml($data);

//выводим на экран
echo $mailbody;

тыц