How can enable user to paste an image from clipboard using vue?

Question

In my template I have:

        <textarea @paste.prevent="fileChange" ref="canvas" /></textarea>

In my script, I have a method:

fileChange(event){

  console.log(event.clipboardData.items[0].kind) 

  ....

}

On my console, I keep getting a string when the fileChange event is trigged (by pasting).

Answer 1

Try this

in my component i used this (listeningn paste event)

                    <b-form-textarea
                            @paste="pasteFunction"                                
                    ></b-form-textarea>            

and in my function got this

pasteFunction(pasteEvent, callback){

if(pasteEvent.clipboardData == false){
    if(typeof(callback) == "function"){
        console.log('Undefined ')
        callback(undefined);
    }
};

var items = pasteEvent.clipboardData.items;

if(items == undefined){
    if(typeof(callback) == "function"){
        callback(undefined);
        console.log('Undefined 2')
    }
};
for (var i = 0; i < items.length; i++) {
    
    if (items[i].type.indexOf("image") == -1) continue;
    var blob = items[i].getAsFile();
    this.addImage(blob)
}
}

Finally, i procces the image with another method

       addImage(file){
            if (!file.type.match('image.*')) {
                return new Promise((reject) => {
                    const error = {
                        message: 'Solo puede arrastrar imágenes.',
                        response: {
                            status: 200
                        }
                    }
                    this.$obtenerError(error)
                    reject()
                    return;
                })
            }

            this.files.push(file);
            const img = new Image(),
                reader = new FileReader();

            reader.onload = (e) => this.images.push(e.target.result);
            const str = JSON.stringify(file);

            reader.readAsDataURL(file);
           }

In my front can see all images like this

                    <div class="img-wrapper" v-for="(image, index) in dimg" :key="index">
                        <img style="max-width:230px; max-height: 230px;" thumbnail center rounded  class="max-image-upload" :src="image" :alt="`Image Uplaoder ${index}`">
                    </div>