Временное использование API imgur для фотохостинга

Vik-BC commented 7 years ago

Я использую скрипт загрузки фото в своем редакторе для голоса (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])">

И скрипт для выгрузки на imgur с последующей вставкой результата с imgur куда-то в редактор

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','<img src="'+imgurl+'"/>'); 
//для markdown убрать img тег
        };
        xhr.setRequestHeader('Authorization', 'Client-ID 28aaa2e823b03b1');
xhr.send(fd);
    }
})();

Можно так же оформить все в виде расширения для браузера, но это возможно, только добавив разрешающую политику в helmet-csp для api.imgur.com.

Разумеется Client-ID лучше использовать другой.

PS Ну а если есть время, то можно сделать все с использованием https://ipfs.io/docs/getting-started/ https://github.com/ipfspics/ipfspics-server https://storj.io/

serejandmyself commented 7 years ago

Решение есть в 17 ХФ

On1x commented 7 years ago

@serejandmyself - можно узнать, что за решение? Свой хостинг картинок Голоса? Где можно почитать api по загрузке и получения линка?

GolosChain / gip

Временное использование API imgur для фотохостинга #5

HTML

JS