The original post was posted in my blog copy & paste to upload image

I really love that in 简书 I can copy & paste to upload image in the markdown editor. I'm going to implement it for my blog as well.

Paste event

<textarea @paste="handlePaste"></textarea>

HTML elements support paste event (see doc). In the callback you can access the clipboardData.

methods: {
    handlePaste(e) {
      for (let i = 0; i < e.clipboardData.items.length; ++i) {
        let item = e.clipboardData.items[i];
        console.log("kind:", item.kind, "type:", item.type);
      }
    }
}

Each of the item is an instance of DataTransferItem (see doc).

It has two read-only properties:

1. kind: The kind of data item, string or file.
2. type: The data item's type, typically a MIME type.

When you paste an image into the textarea, you will get the following log:

kind: string type: text/plain
kind: file type: image/png

The text item is the name of the file, while the image item is the image content.

When pasting an image, the default behavior of Chrome pastes the file name as text. To prevent this default behavior, call e.preventDefault() in handlePaste.

Read data and upload

Image

For image, we need to use getAsFile API (see doc).

if (item.kind == "file" && item.type.startsWith("image/")) {
  this.uploadImage(item.getAsFile());
}

As for how to upload image, please read my post about this.

The file you get from getAsFile is something like this:

Some issues:

1. the MIME type is always image/png even though I uploaded a JPEG.
2. the file name is always image.png. The actual file name needs to be read by APIs shown below.
3. the namefield is readonly. If you change it directly you will get exception Cannot assign to read only property 'name' of object '#<File>'. As a workaround, you can create a copy of the file and assign a new name (see reference)

const file = item.getAsFile();
const name = e.clipboardData.getData("text");
this.uploadImage(new File([file], name, { type: file.type }));

Text

For text, we have two options, getAsString and getData.

getAsString

The first option is getAsString API (see doc). You need to access the data in the callback.

if (item.kind === "string" && item.type.startsWith("text/plain")) {
  item.getAsString(s => {
    console.log(s);
  });
}

getData

The second options is to use getData (see doc).

e.clipboardData.getData("text")

It requires a format parameter which is a DOMString representing the type of data to retrieve.

Insert text

In the doc for paste event, it has an example of pasting text between divs.

In my case, I want to paste the markdown into the textarea.

selectionStart and selectionEnd

In the doc of HTMLTextAreaElement, we can see it has selectionStart and selectionEnd fields which can be used to get the selection range.

So my first attemp was to use these two fields to inject the markdown string.

service.uploadImage(new File([file], name, { type: file.type })).then(uploaded => {
  let textarea = e.target;
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const paste = `![${uploaded.originalname}](${location.origin}${uploaded.path})`;
  this.post.content = stringSplice(this.post.content, start, end - start, paste);
});

This has two issues:

1. After pasting, the cursor is moved to the end of the content. I want to keep the cursor around the pasted text.
2. You can' use Ctrl+Z to undo the pasting.

setRangeText

My second attemp was using the setRangeText API (see doc).

const textarea = e.target;
textarea.setRangeText(contentToPaste);

Now after pasting the cursor is at the begining of the range text. But I still can't undo the pasting.

execCommand

Learnt from fregante/insert-text-textarea, you can simple use the following line to insert the text. This works in Chrome and also has Undo support.

const textarea = e.target;
textarea.focus();
document.execCommand("insertText", false, contentToPaste);

Since uploading image is an asynchronous job, we can't guarantee the focus is still in the textarea when we do execCommand. So don't forget to add textarea.focus() before calling execCommand.

Set selection range

Just like the UX in 简书, I want to select the name part of the image in the markdown line so as to make it easier for the user to rename the image. We can simply call textarea.selectSelectionRange(start, end) after executing the insert command (see doc)

Summary

handlePaste(e) {
  for (let i = 0; i < e.clipboardData.items.length; ++i) {
    let item = e.clipboardData.items[i];
    if (item.kind == "file" && item.type.startsWith("image/")) {
      this.uploadImageStatus = RequestStatus.Pending;
      e.preventDefault();
      const textarea = e.target;
      textarea.disabled = true;
      const file = item.getAsFile();
      const name = e.clipboardData.getData("text");
      service.uploadImage(new File([file], name, { type: file.type })).then(uploaded => {
        const paste = `![${name}](${location.origin}${uploaded.path})`;
        const start = textarea.selectionStart + 2;
        textarea.disabled = false;
        textarea.focus();
        document.execCommand("insertText", false, paste);
        textarea.setSelectionRange(start, start + name.length);
        this.uploadImageStatus = RequestStatus.Success;
      });
    }
  }
}

Note that the user might move their cursor during upload, which might cause the image to be inserted at another place than the place where he/she pasted the image.

简书 does allow the user to move their cursor arbitrarily and have the text inserted at the correct place.

In the above code I simply disable the textarea and show an overlay during the upload.

Lastly, the screenshot of the UX is as follows.

upload image experience

Reference

1. Upload Image by Copy and Paste