Three ways to support the insertion of pictures in the box from the developers Yandex.Mail

Not so long ago we were talking about in detail in the new Attachments Yandex.Mail . In December, we have a new image viewer . Work with images in the Post because of these new features are really easy and convenient.

However, there was still one problem: due to the limitations of browser-based images can not be inserted directly into the body of the message. Image had to keep on your computer and from there attached to the letter, like any other file.

We thought long and hard on this issue. You can use java-applet or flash, but these decisions were significant limitations. For example, when using the java-applet need to be sure to allow execution of the applet in the browser. So we decided to use the new features of modern browsers, such as the Clipboard API, File API and Drag n Drop.

Read our post about how to embed pictures in a letter from the clipboard or a public URL and how to add them to the body of the message simply by dragging from the desktop.

Inserting images from the clipboard

Until recently, the full-time job with a clipboard in web applications seemed impossible. But then, a new API, specifically designed for just this ( Clipboard API ). He is an interface for working with data from the clipboard for copying, cutting and pasting. The interface is quite versatile and works not only with text data, but also with files in different formats. But, as is usually the case, it is not supported by all browsers and in different amounts.

Best support to date is only available in WebKit-browsers (Safari, Chrome, Yandeks.Brauzer). In these browsers for events copy, cut and paste in the event object have access to the object clipboardData. We have properties clipboardData items (items on the clipboard) and types (types of information in the clipboard). Obtain or alter information in the buffer can be by methods getData and setData.

In Chrome (c 18 version) and Yandeks.Brauzere have access to images on the clipboard to be pasted. It is done like this:

// Элемент с contentEditable var el = document.getElementById('editor'); el.addEventListener('paste', function(e) { var clipboard = e.clipboardData; if (clipboard && clipboard.items) { // В буфере обмена может быть только один элемент var item = clipboard.items[0]; if (item && item.type.indexOf('image/') > -1) { // Получаем картинку в виде блоба var blob = item.getAsFile(); if (blob) { // Читаем файл и вставляем его в data:uri var reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = function(event) { var img = new Image(); img.src = event.target.result; el.appendChild(img); } } } } }); 

Besides browser engine WebKit, kartinkok insert the clipboard is also working in Firefox: there image designMode immediately inserted into the data: uri.

Inserting images on the public URL

One of the most common and habitual actions - to copy a picture from the web page and paste it in the letter - is not supported by the default browser. In Safari 5 + in the object clipboardData no property items, but there are an array of types, types containing the copied informations. If the copied image is already on the Internet for public urlu, it will also insert. In normal inserting pictures in designMode Safari creates the img attribute value to create fake src (webkit-fake-url :/ / 416873AC ...). This resource can not be accessed from the JS, therefore, to create fake picture is not inserted to do preventDefault in the event object.

  // Элемент с contentEditable var el = document.getElementById('editor'); el.addEventListener('paste', function(e) { var clipboard = e.clipboardData; if (clipboard && clipboard.types) { var types = clipboard.types; if (types.indexOf('public.url') > -1) { // Останавливаем действие по умолчанию, чтобы не вставлялась картинка с фейковым урлом (webkit-fake-url://416873AC...) e.preventDefault(); // Вставляем картинку var img = new Image(); img.src = clipboard.getData('public.url'); el.appendChild(img); } } }); 

Insert publicists urlu defaults to IE9 and above.

Insert dragging

In addition to the direct copying of images from the clipboard, or to publicly urlu, some browsers have the ability to embed images drag-and-drop. This is very convenient because it can be added to the letter several pictures at once.

  // Элемент с contentEditable var el = document.getElementById('editor'); el.addEventListener('drop', function(e) { var dataTransfer = e.dataTransfer; if (dataTransfer && dataTransfer.files) { var files = dataTransfer.files; var len = files.length; if (len) { for (var i = 0; i < len; i++) { var file = files[i]; // Вставляем только картинки if (file.type.indexOf('image/') < 0) continue; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(event) { var img = new Image(); img.src = event.target.result; el.appendChild(img); }; } e.preventDefault(); } } }); 

This works in Firefox, Safari 5.1 +, Chrome and Yandeks.Brauzere.

In Yandex.Mail to write letters to the design uses WYSIWYG -editor TinyMCE. We wrote a plugin for it that combines all of the solutions in this article. It is available at github.com / Panya / tinymce_pasteimage .