I am developing a chat application on React JS, and I want an image to be uploaded if I copy paste an image on the chatbox. How do I trigger this?
What I need basically is:
- An event that will be triggered when action "Paste" is performed.
- A way to upload image into a file type input element from the clipboard.
I am developing a chat application on React JS, and I want an image to be uploaded if I copy paste an image on the chatbox. How do I trigger this?
What I need basically is:
- An event that will be triggered when action "Paste" is performed.
- A way to upload image into a file type input element from the clipboard.
- 1 I'd suggest looking up those 2 bullet points on Google. There's plenty of resources out there that can help you. Literally copy-pasting your first bullet point returns a few examples to on how to handle that event. – Cerbrus Commented Sep 9, 2022 at 8:18
1 Answer
Reset to default 6You need to add an event listener on paste event, and get the items from the clipboard and check if its type is an image.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML DOM - Paste an image from the clipboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/demo.css" />
<link rel="preconnect" href="https://fonts.gstatic." />
<link
rel="stylesheet"
href="https://fonts.googleapis./css2?family=Inter&family=Source+Code+Pro&display=swap"
/>
<style>
.container {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Misc */
height: 32rem;
padding: 1rem 0;
}
.key {
background-color: #f7fafc;
border: 1px solid #cbd5e0;
border-radius: 0.25rem;
padding: 0.25rem;
}
.preview {
align-items: center;
border: 1px solid #cbd5e0;
display: flex;
justify-content: center;
margin-top: 1rem;
max-height: 16rem;
max-width: 42rem;
}
</style>
</head>
<body>
<div class="container">
<div>
<div><kbd class="key">Ctrl</kbd> + <kbd class="key">V</kbd> in this window.</div>
<img class="preview" id="preview" />
<input id="file_input" type="file" />
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('paste', function (evt) {
const clipboardItems = evt.clipboardData.items;
const items = [].slice.call(clipboardItems).filter(function (item) {
// Filter the image items only
return /^image\//.test(item.type);
});
if (items.length === 0) {
return;
}
const item = items[0];
const blob = item.getAsFile();
const imageEle = document.getElementById('preview');
imageEle.src = URL.createObjectURL(blob);
let file = new File([blob], "file name",{type:"image/jpeg", lastModified:new Date().getTime()}, 'utf-8');
let container = new DataTransfer();
container.items.add(file);
document.querySelector('#file_input').files = container.files;
});
});
</script>
</body>
</html>Resources
- Pase an image from the clipboard
- Set file value from blob