Решение для прямой загрузки фотографий в Голос
Я использую скрипт загрузки фото в своем редакторе для голоса (https://golos.rubtc.info/r/) работает он стабильно выполняя простую функцию - загружает фото с вашего ПК/телефона на фотохостинг imgur и после вставляет фотографию в редактор для последующего постинга. Все происходит в фоне и выглядит как обычная прямая загрузка в пост.
Сегодня решил сделать bookmarklet и userscript который позволит пользователям иметь кнопку загрузки фото в редакторе голоса, однако сделать это удалось только применяя стремные иньекции в обход csp голоса, что есть не хороший тон в отношении безопасности.
Потому мне кажется правильнее будет предложить временное (до внедрения ipfs) решение команде.
Для этого нужно немного отредактировать /submit.html
добавив :
HTML
<div class="drop"><div id="addimg" onclick="document.querySelector('#up').click()"> Описание кнопки загрузки</div></div>
<input id="up" style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">
JS
(function() { 'use strict';
// Селектор textarea редактора markdown или html
var targetToPasteSelector = "";
window.ondragover = function(e) {e.preventDefault();};
window.ondrop = function(e) {e.preventDefault();
upload(e.dataTransfer.files[0]); };
window.upload = function(file) {
if (!file || !file.type.match(/image.*/)) return;
var fd = new FormData();
fd.append("image", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.imgur.com/3/image.json");
xhr.onload = function() {
var imgurl = JSON.parse(xhr.responseText).data.link;
var ed = document.querySelector(targetToPasteSelector);
ed.insertAdjacentHTML('afterbegin',imgurl);
//для markdown. Для html добавить обертку тега img переменной imgurl.
};
xhr.setRequestHeader('Authorization', 'Client-ID 28aaa2e823b03b1');
xhr.send(fd);
}
})();
Можно так же оформить все в виде расширения для браузера, но это возможно, только добавив разрешающую политику в helmet-csp
для api.imgur.com
.