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:

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?

This is not [css]. Please remove that tag and it will be better for users. — idk wut to put here
– idk wut to put here, Commented Jun 2, 2021 at 5:10
Sorry for the confusion, just updated! @Someone_who_likes_SE — Shane Marotta
– Shane Marotta, Commented Jun 2, 2021 at 5:12

chrwahl · Accepted Answer · 2021-06-02 07:00:53Z

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" />

answered Jun 2, 2021 at 7:00

chrwahl

14.1k2 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shane Marotta Over a year ago

Would you mind elaborating? I am trying to use an image src scraped from a previous website and trying to upload that image as a file to another websites upload image section, when the user clicks my injected html button. I changed the 'document.forms.pickfile.file' to a querySelector that refers to the input[type=file] that I want to inject the image to for upload. Nothing seems to be happening though, do you have any idea why? @chrwahl

chrwahl Over a year ago

Now I think I'm getting it. So, you have dT.files and would like to add them to the list of files in an input[type=file] element. In any case. You can replace my 'document.forms.pickfile.file' with 'document.querySelector('input[name="file"]')'.

chrwahl · Accepted Answer · 2021-06-02 11:11:16Z

0

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>

answered Jun 2, 2021 at 11:11

chrwahl

14.1k2 gold badges25 silver badges40 bronze badges

1 Comment

Shane Marotta Over a year ago

If i am using a image url, should I just put the image url in the svg variable and update file type to png? Could you also explain what the variable 'e' is or what it represents. I am asking, because when I run the code, no file is being added to upload section. I think has something to do with AddEventListener. I think this is because the user never actually clicks the file upload, but rather clicks a button that I injected on ebays listing page, that when clicked will upload the image rather than the user doing it manually. Could you update your code for such a function. @chrwahl

Collectives™ on Stack Overflow

How to upload image via JavaScript?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related