I have a simple form which allows you to paste an image. The image is previewed using JavaScript.
In the snippet the paste area is a textarea for testing purposes.
After the image is pasted, it’s not yet in the form’s data. Is there a way of doing this so that the image can be uploaded on submit?
var previews = document.querySelector('div#previews');
var form = document.querySelector('form#data');
form.elements['stuff'].onpaste = function (event) {
files = event.clipboardData.files;
var img = document.createElement('img');
img.width = '200';
previews.appendChild(img);
var reader = new FileReader();
reader.onload = () => {
img.src = reader.result;
};
reader.readAsDataURL(files[0])
};textarea, input, button {
display: block;
}<form id="data">
<textarea name="stuff"></textarea>
<input type="file" name="photo">
<button name="doit">OK</button>
</form>
<div id="previews">
</div>