Как просто сделать загрузка картинки в textarea по Ctrl+V?

Question

[Stilar]

Подсмотрел на гигхабе как удобно прямо при написания тикета добавлять картинки из буфера обмена (ну и через выбор файла тоже).



Как я понимаю тут как минимум два подвопроса:
1. что за некий Js-скрипт на страницы, который ловит нажатие Ctrl+V и запускает загрузку из буфера обмена посетителя на файл-сервер?
2. что за некий сервер-файлохранилище (облако?) на который можно отправить заливку файла, и получить уникальный URL на этот файл по итогу загрузке?

Comments

[iBird Rose]

а чего тут собственно нового? вк так уже много лет делает к примеру.

Answer 1

[Kovalsky]

1. onpaste и преобразования, как-то так,
2. Вкратце: ну вот такой вот сервер. Подозреваю, всяческие хостеры картинок типа imgur.com так умеют, и не за бесплатно предоставляют любому желающему возможность воспользоваться их сервисом. Хотя, подозреваю, подобный функционал не сложно сделать самому.

Посылать на сервер base64 не сто́ит, при возможности лучше посылать, например, blob.

Comments

[Stilar]

Спасибо!
А по п.2 - интересно, может есть и стандарты для таких серверов-загрузчиков? по каким ключевым запросам это можно поискать? по ссылке на imgur - там документированное взаимодействие с файлохранением оно стандарт, или это частное решение?
А само написание такого функционала. По идеи и правда тут авторизованная загрузка только. У меня есть nginx с lau , как думаете - для создания своего файлохранилища для храния картинок форуме это подойдет? Может и бэкэнда полноценного никакого не нужно для целей таких.

[Kovalsky]

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

Функционал, о котором мы говорим, категорически прост: принять картинку в бинарном формате, вернуть ссылку. Конечно, это веб-API, конечно существует безопасность и еще туча нюансов, но это присуще всем приложениям работающим с сетью. Поэтому, не думаю, что есть какой-то смысл искать стандарты. К тому же вы можете погуглить, существует достаточное количество открытых проектов у которых вы можете подглядеть реализацию.

По идее, вам достаточно просто принимать файлы из авторизованных запросов, например с объявленным типом multipart/form-data.

Answer 2

[twobomb]

В общем вот сделал тестовый вариант без загрузки на сервер, но естественно при публикации\добавлении статьи, их нужно будет загрузить на сервер. Картинки зашифрованные в base64, лежат в массиве images[i].data их можно загрузить как ajax'ом так и hidden инпутами через форму, на сервере нужно будет преобразовать text base64 в картинки и сохранить в соответствующие директории и заменить {image1} уже на реальные ссылки.

Comments

[Dark Hole]

зашифрованные в base64

Вообще то, base64 не шифровка.

[twobomb]

Dark Hole: Ну кодировка, один хрен это не важно главное чтобы тебе было понятно.

[Stilar]

Интересно.
Вы при сохранении textarea предлагаете сразу и все картинки сохранить? А не долго это получается, если картинок, скажем, штук 20 в статье будет?

[twobomb]

Stilar: Долго если картинки большого размера и у вас медленный интернет.

[DEnisLEB]

twobomb, Как можно скрыть текстовое отображение в поле?

Answer 3

[Ваге]

если без загрузки на сервер почему просто не читать картинку.jsfiddle