https://github.com/miltonbhowmick/copy-paste-image-field

A javascript tricks to copy and paste image in text field
https://github.com/miltonbhowmick/copy-paste-image-field

copy-paste-image javascript javascript-copy-image javascript-paste-image javascript-tricks

Last synced: about 1 month ago
JSON representation

A javascript tricks to copy and paste image in text field

• Host: GitHub
• URL: https://github.com/miltonbhowmick/copy-paste-image-field
• Owner: Miltonbhowmick
• Created: 2022-01-05T05:31:25.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-09-15T04:08:39.000Z (over 2 years ago)
• Last Synced: 2025-12-27T14:10:59.404Z (5 months ago)
• Topics: copy-paste-image, javascript, javascript-copy-image, javascript-paste-image, javascript-tricks
• Language: CSS
• Homepage: https://miltonbhowmick.github.io/copy-paste-image-field/
• Size: 3.06 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
COPY IMAGE - PASTE IMAGE 

A mini tricks between input field and img tag in html to show an image.



	 



### Play it by yourself

Demo

### How it works



### Which logic helps

- Use `event.clipboardData` or `event.originalEvent.clipboardData`.

- `event.clipboardData` or `event.originalEvent.clipboardData` contains items if they have. If they contain, write `var items = (event.clipboardData || event.originalEvent.clipboardData).items;`.

- Now, you have `items`. Its `items`, you can do a loop 💁‍♂️. You can see each element by index of that loop `items[index]`.

- We need only file item from `items[index]`. So, you may do a check like this `if (item.kind === 'file')`.

- Get the blob data of this file item by writing `var blob = item.getAsFile();`.

- As it is a file, you have to read the file item. To read a file item, Javascript has a class `FileReader()`. Write `var reader = new FileReader();`.

- How can you see If a file is not loaded 🤫?. Write `reader.onload = function (event) {};`.

- Inside the above `onload` function, you can write `document.getElementById("pastedImage").src = event.target.result;` of your image html tag ``.

- Then copy image and paste image and BOOM!!!.