Надим

Я тут вижу две возможные причины причины, почему не работает.

1. У текущего документа и картинки разный источник, т. е. не совпадает протокол/адрес/порт
2. Картинка не успевает загрузится, нужно немного выждать, чтобы не получать пустоту

Вы можете использовать CSS-селекторы соседей. JavaScript здесь не нужен.

Пример:

В консоли можно писать сложный код, для переноса строки зажимайте шифт и только потом жмете интер, но обычно для запуска JavaScript на сайтах использую специальные браузерные расширения. Через консоль конечно тоже можно запускать и парсить, но это банально неудобно.

Попробуйте так:

function asd() {
  return new Promise (function(resolve, reject) {
    socket.on('событие', data => {
      resolve(data);
    });
  });
}

test = await asd();
console.log(test);

Не совсем понятно, где выполняется код.

Если код выполняется в браузере, то файл можно подгрузить в поле так:

async function pasteAudio() {
	
	var blob = await (await fetch('https://ссылка_на_ваш_аудиофайл')).blob();
	
	var dt = new DataTransfer();
	dt.items.add(new File([blob], 'audio_name.mp3', {type: 'audio/mpeg'}));
	document.getElementById("fileInput").files = dt.files;
	
	document.getElementById("fileInput").dispatchEvent(new Event('change'));
	
}

pasteAudio();

Предполагается, что ваше аудио доступно по ссылке и находится на том же сайте, на котором вы выполняйте код.

P. S. Кстати, поле выбора файлов здесь использовать вовсе не обязательно, можно его исключить при желании.

Пример функции для выборочного обновления контента:

async function elementUpdate(selector) {
	try {
		var html = await (await fetch(location.href)).text();
		var newdoc = new DOMParser().parseFromString(html, 'text/html');
		document.querySelector(selector).outerHTML = newdoc.querySelector(selector).outerHTML;
		console.log('Элемент '+selector+' был успешно обновлен');
		return true;
	} catch(err) {
		console.log('При обновлении элемента '+selector+' произошла ошибка:');
		console.dir(err);
		return false;
	}
}

Вызывайте функцию elementUpdate() передав внутрь него CSS-селектор того элемента, который вы хотите обновить. Например, если взять таблицу, которая имеет id равное test, то достаточно выполнить:
elementUpdate('table#test');

Если хотите привязать это действие к кнопке, то можете сделать так:

<button onclick="elementUpdate('table#test');">Нажми меня, чтобы обновить таблицу</button>

Нашел в сети упоминание, что у конструктора new URLSearchParams() имеются встроенные методы для получения строки запроса, то есть мы можем используя чисто нативные методы сформировать тело запроса:

var objeto = { 'raz' : 'Первое свойство', 'dva' : 'Второе свойство' };

var params = new URLSearchParams();

for (var prop in objeto) {
	params.append(prop, objeto[prop]);
}

console.log(params.toString());

Способ хорош, но он не позволяет преобразовывать вложенные объекты, в этом его минус.

Используя этот метод за основу написал рекурсивный конвертер, который может преобразовывать в строку запроса объекты любого уровня вложенности сколь бы сложные они не были:

// Функция для преобразования объекта
// в строку формата x-www-form-urlencoded:

function httpBuildQuery(object_to_convert) {
	
	var params = new URLSearchParams();
	
	var paramsGenerator = function(parent_key, iterate_object) {
		
		for (var current_key in iterate_object) {
			
			if (typeof iterate_object[current_key] == 'string' || typeof iterate_object[current_key] == 'number') {
				
				if (parent_key.length > 0) {
					var property_path = parent_key + '[' + current_key + ']';
				} else {
					var property_path = current_key;
				}
				
				params.append(property_path, iterate_object[current_key]);
				
			} else if (typeof iterate_object[current_key] == 'object') {
				
				if (parent_key.length > 0) {
					var property_path = parent_key + '[' + current_key + ']';
				} else {
					var property_path = current_key;
				}
				
				paramsGenerator(property_path, iterate_object[current_key]);
				
			}
			
		}
		
	}
	
	paramsGenerator('', object_to_convert);
	
	return params.toString();
	
}

// Потестируем работу функции на примере:

var test_object = {
	'raz' : 'Первое свойство',
	'dva' : 'Второе свойство',
	'tri' : {
		'test' : 'Тест',
		'proverka' : 'Проверка',
		'massiv' : [
			'aaa',
			'bbb',
			'ccc',
			{
				'lalala' : 'lololo',
				'tratata' : 'trototo'
			},
			123,
			345,
			567
		]
	}
};

var send_string = httpBuildQuery(test_object);

var response = await (await fetch('https://nadim.work/post_view.php', {
	method: 'POST',
	headers: {
		'Content-Length' : send_string.length,
		'Content-Type' : 'application/x-www-form-urlencoded'
	},
	body: send_string
})).text();

console.log(response);

Если забьете этот код в консоль увидите, что функция прекрасно справляется с преобразованием. Оставляю код для будущих поколений, надеюсь он еще много кому пригодится, особенно если вам нужно отправить типовой POST-запрос именно через fetch() не используя конструктор new FormData() совсем.

Для того, чтобы сработала отправка сообщения, нужно вызывать на кнопке SEND событие MOUSEDOWN:

document.querySelector('span[data-content="Send"]').dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));

Вы должны в поле ввода вызвать клавиатурные события отвечающие за ввод, чтобы страница увидела изменения:

var span = document.querySelector('span[data-text="true"]');

span.focus();
span.innerHTML = 'Новый текст';
span.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true }));
span.dispatchEvent(new KeyboardEvent('keypress', { bubbles: true }));
span.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));
span.dispatchEvent(new Event('input', { bubbles: true }));
span.dispatchEvent(new Event('change', { bubbles: true }));

Лайфхак для создания коллекции файлов FileList:

// Создадим простой текстовый файл:
var data = 'Здесь текст для файла или положите в переменную Blob';
var file = new File([data], 'primer.txt', {type: 'text/plain'});

// Создаем коллекцию файлов:
var dt = new DataTransfer();
dt.items.add(file);
var file_list = dt.files;

console.log('Коллекция файлов создана:');
console.dir(file_list);

// Вставим созданную коллекцию в реальное поле:
document.querySelector('input[type="file"]').files = file_list;

В переменную data вместо текста, можно положить в том числе и Blob - это особенность функции new File() которая первым параметром может принять как массив из текстов, так и массив из Blob.

Фактически лайфхак выше позволяет нам JavaScript-ом скачать любой какой угодно файл со своего сайта и вставить его абсолютно в любое поле <input type="file"> - что просто архиполезно для браузерных ботов.

Также способ выше можно применить для редактирования уже выбранных пользователем файлов. Например, если надо из поля выбора файлов убрать какие-то определенные файлы и при этом не фиктивно, а реально.

Огромное спасибо пользователю Mmx Symfony, который нарыл это решение где-то в недрах иностранных сайтов. Сам я в свое время сколько не искал везде был ответ, что это невозможно, а оказалось, что нихрена подобного =)

Как программно вставить файлы в input?

Предпочитаю использовать IndexedDB.

Только для работы с ней использую специальную библиотеку, которая упрощает ввод и вывод:

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.js"></script>

Далее, чтобы сохранить какие-то данные достаточно выполнить в консоли браузера:

result = await localforage.setItem('key', save_data);
console.log('Данные успешно сохранены:');
console.dir(result);

Где в save_data лежат сохраняемые данные, а key это ключ по которому можно было бы получить к ним доступ.

Из особенностей, в save_data мы можем положить любой тип данных - хоть строку, хоть массив, хоть объект. Да даже файл при желании можно сохранить! При этом нет ограничений по объему хранимых данных, можете хоть сто мегабайт положить, хоть триста запихнуть.

Чтобы потом извлечь сохраненные данные выполняем:

result = await localforage.getItem('key');
console.log('Данные успешно извлечены:');
console.dir(result);

Срок хранения данных - неограниченно. Или пока пользователь вручную не обнулит кеш браузера.