[AVLE] Handling Image upload from Clipboard

in Steemit Dev Group3 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:

  1. copy image data ether by copying or taking screen shot
    The image data will be stored in the clipboard.

  2. paste the image data into the editor

  3. the data from clipboard is converted to bytes data and signed by user's posting key

  4. then, image data is uploaded to the image server and url is returned.

The following is the result of these steps:
image.png

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

cc.
@benson
@dev365
@xeldal
@steem
@steemitblog
@misterdelegation
@ranchorelaxo
@trafalgar
@shanek
@jsj1215

Resteem / Vote / Comment / Follow / Support

This project will Make STEEM Great Again! I, the developer of PLAY STEEM mobile app, am doing my best to bring people to the STEEM ecosystem.

Thank you for your support.
@steemcurator01

Sort:  

Upvoted! Thank you for supporting witness @jswit.
default.jpg

오늘도 응원합니다^^

Okay. I need more info on the image upload of yours. Are you using your own image server or did you start using steemitimages cdn?

i am using steemitimages.com.

  • sign the image first
  • and upload the image with the signature

Coin Marketplace

STEEM 0.17
TRX 0.15
JST 0.027
BTC 60678.52
ETH 2339.38
USDT 1.00
SBD 2.48