Three ways to support the insertion of images in the input field from the developers of Yandex. Mail

Not so long ago, we talked in detail about new attachments in Yandex.Mail . In December, we have a new image viewer . Thanks to these innovations, it became really easier and more convenient to work with images in the Post.

However, another difficulty remained: due to the browser limitations of the image it was impossible to insert it directly into the body of the letter. It was necessary to save the picture on your computer and from there attach it to the letter, like any other file.
')
We have been thinking about this problem for a long time. It was possible to use a java applet or flash, but these solutions had significant limitations. For example, when using a java applet, you will need to allow the execution of the applet in the browser. As a result, we decided to use the new features of modern browsers, such as the Clipboard API, File API and Drag n Drop.

Read in our post on how to insert images from the clipboard or from a public URL into the letter and how to add them to the body of the letter by simply dragging it from the desktop.

Inserting images from the clipboard

Until recently, full-fledged work with the clipboard in web applications seemed impossible. But then a new API appeared, specifically designed specifically for this ( Clipboard API ). It is an interface for working with data from the clipboard when copying, cutting and pasting. The interface is quite universal 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 volumes.

The most complete support for today is implemented only in WebKit-browsers (Safari, Chrome, Yandex Browser). In these browsers for the events copy, cut and paste in the event object there is an access to the clipboardData object. ClipboardData has properties items (items on the clipboard) and types (types of information on the clipboard). You can get or change information from the buffer using the getData and setData methods.

In Chrome (from version 18) and Yandex Browser there is access to images on the clipboard when pasting. This 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); } } } } }); 

In addition to browsers on the WebKit engine, inserting pictures from the clipboard also works in Firefox: there the pictures in the designMode are immediately inserted into data: uri.

Inserting images at a public URL

One of the most simple and familiar actions — copying a picture from a page on the Internet and pasting it into a letter — is not supported by default browsers. In Safari 5+, there is no items property in the clipboardData object, but there is an types array containing types of copied information. And if the copied picture is already on the Internet at a public url, then it will also turn out to be inserted. In the usual insertion of images in designMode, Safari creates an img element with the fake value of the src attribute (webkit-fake-url: // 416873AC ...). This resource cannot be accessed from JS at all, therefore, in order to not insert a fake image, you need to do preventDefault on 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); } } }); 

Public URL insertion by default works in IE9 and higher.

Insert by dragging

In addition to direct copying of images from the clipboard or by public url, in some browsers it is possible to insert images with drag-n-drop. This is very convenient, because you can add several pictures to the letter 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(); } } }); 

It works in Firefox, Safari 5.1+, Chrome, and Yandex Browser.

Yandex.Mail uses WYSIWYG- editor TinyMCE to write letters with design. We wrote a plugin for it, combining all the solutions from this article. It is available at github.com/Panya/tinymce_pasteimage .