[AVLE] Handling Image upload from Clipboard

etainclub (78)memberin Steemit Dev Group • 3 years ago

I have implemented image uploading from clipboard data.

As like steemit.com, image uploading from clipboard is possible in AVLE dapp.

What I mean by image uploading from clipboard follows the these steps:

copy image data ether by copying or taking screen shot
The image data will be stored in the clipboard.
paste the image data into the editor
the data from clipboard is converted to bytes data and signed by user's posting key
then, image data is uploaded to the image server and url is returned.

The following is the result of these steps:

This was a burden so I kept postponing of implementation. Now I am in relief.

It took serveral hours because not many references for flutter web app.

How to implement this

Since the AVLE dapp is a browser based app, we can use the following document event handler.

html.document.addEventListener('paste', onPaste, false);

onPaste(html.Event e) async {
    html.ClipboardEvent event = e as html.ClipboardEvent;
    if (event.clipboardData != null) {
      var items = event.clipboardData!.items;
      if (items == null) return;
      var blob;
      for (int i = 0; i < items.length!; i++) {
        if (items[i].type!.indexOf("image") != -1) {
          blob = items[i].getAsFile();
          break;
        }
      }
      if (blob != null && widget.username != null) {
        // handle blob
        var reader = new html.FileReader();
        reader.onLoadEnd.listen((e) async {
          var data = reader.result;
          // upload image
          final url = await uploadImage(
              username: widget.username!,
              imgBytes: data as Uint8List,
              hasKeychain: hasKeychain);
          if (url != null) {
            _insertText('![]($url)\n');
          }
        });
        // read the file
        reader.readAsArrayBuffer(blob);
        event.preventDefault();
      }
    }
  }

Please Vote for @etainclub as a Witness

I am @etainclub who develops several apps for steem such as Play Steem. Recently I have started to run a witness node. Please vote for me as a witness. You can check my contributions to steem community.
Please Vote for My Witness @etainclub (developer of PLAY STEEM | AVLE | STEEM on RPi)

You can vote here:
https://steemitwallet.com/~witnesses
(find etainclub ranked at 32)
or here:
https://steemyy.com/witness-voting/?witness=etainclub&action=approve