How to upload image via Javascript?

Question

I am trying to upload an image to an input[type='file'] of another page.

Here is what I have so far:

 const dT = new ClipboardEvent('').clipboardData || new DataTransfer();
 dT.items.add(new File(result.products[pointer][3], 'product_image.png'));
 document.querySelector('input[class="mkhogb32"]').files = dT.files;
 console.log(dT);
 console.log(document.querySelector('input[class="mkhogb32"]').files);

The code goes through and creates a file and adds it to the inputs files, however, the image never actually gets uploaded to the page:

Terminal of page

The image above shows the files of the input after my function ran, showing the function went through. However, on this particular page, when an image is uploaded the traditional way off picking a file off your desktop or drag and drop it changes the css, as it displays the image.

How can I get my injected file to trigger that same reaction?

The result.products[pointer][3] refers to an image src scraped from a previous page, how can I make the injected file contain this image?

Answer 1

In this example I'm picking a local image. The FileReader object will read the file as a data URL and when ready ('load') it will insert the data URL into the src attribute if the image.

 var reader1 = new FileReader(); reader1.addEventListener('load', e => { document.querySelector('#img').src = e.target.result; }); document.addEventListener('DOMContentLoaded', e => { document.forms.pickfile.file.addEventListener('change', e => { reader1.readAsDataURL(e.target.files[0]); }); });

 <form name="pickfile"> <input name="file" type="file" /> </form> <img id="img" />

Answer 2

I don't think that it is possible to add a file to an input[type="file"] element using JavaScript, but you can grab the formdata from a form and then add your own data to formdata.

In the example: When the user click on the submit I "copy" the formdata from the form (OK, there is no data in this example, but still...). I create a file object (maybe you already have a file object or a list of file objects) and set that as an object in formData. Lastly I post the formData as if it was a plain POST submit from the form.

Maybe this can help...

 document.forms.pickfile.addEventListener('submit', e => { e.preventDefault(); let svg = ['<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect fill="blue" width="200" height="200" x="0" y="0"/></svg>']; let file = new File(svg, 'example.svg', {type: 'image/svg'}); let formData = new FormData(e.target); formData.set('file', file, 'example.svg'); fetch('/', { method: 'POST', body: formData }).then(response => response.json()).then(data => console.log(data)); });

 <form name="pickfile"> <input name="file" type="file" /> <button>Send</button> </form>