Для начала решите, что вам на самом деле нужно - предварительный просмотр изображения (чтобы выглядело как будто картинка загружена, пользователь видел ее в контенте который пишет) или реальная загрузка изображения на сервер. В зависимости от ответа будет разная техника.
Осознанно учтите и взвесьте основные минусы загрузки на сервер. Самая главная - картинки на сервере будут накапливаться и вам придется разрабатывать систему определения "нужных" и "ненужных" а также механизм автоматического удаления ненужных. Потому что мусора будет много. Кто-то писал черновик и не опубликовал / закрыл окно и забил, а картинка (или даже несколько) уже загружена. Кто-то загрузил одну картинку, посмотрел, не понравилось, выбрал и загрузил другую. И так 10 раз подряд пока не подобрал картинку которая нравится. А у вас 9 ненужных картинок на сервере загружено. Через некоторое время у вас папка с загрузками вырастает до гигабайтов / тысяч файлов, вы смотрите на это и реально не понимаете что из этого используется, а что нет.
Исходя из этого, в большинстве случае все, что вам нужно это предварительный просмотр на клиенте с помощью javascript. Это можно сделать ванильным js или использовать адекватную библиотеку типа
https://github.com/blueimp/JavaScript-Load-Image которая уже решает кучу мелких задач, о которых вы еще даже не догадываетесь (например автоматический поворот по метаданным, ресайз превью в целях оптимизации производительности, crossorigin и тд).
Если же все-таки вы решите грузить из сразу на сервер, то начните с минимального ТЗ. Используете ли вы какую-то CMS или фреймворк. Куда и как будете загружать файлы. Как будете хранить историю загруженных и очищать ненужные. И так далее. Сам процесс загрузки тривиален - у вас должен быть URL который методом PUT или POST принимает данные (изображение + любую полезную инфу, например ID/UUID черновика записи к которому картинка загружена), обрабатывает их и возвращает URL изображения. Аяксом туда шлете картинку, получаете ответ с адресом картинки на сервере, вставляете его в DOM.