Using Chrome Extension to change <input type="file" accept="/image*"> to enter URL instead of user chosen image file

Question

I am developing extension that automatically takes information from the website and opens up another website with a form and fills it with information from the original website. It works flawlessly so far but I would also like to automatically upload images from the original website to the website that has the form.

In the website that has the form there is this HTML element:

<div id="input_area">
   <input type="file" accept="image/*" name="image" size="20" id="image" 
   onchange="blocket.apps.newad.click_extra_images(this);" style="left: -154px; top: 16px;">
</div>

On click it triggers file selector where you can choose the image file. I was planning to skip this whole file selector thing and try to upload the image from URL instead, since images can be found as URLs from the original website very easily. I am trying to avoid privacy and security issues too by uploading image straight from URL instead of users machine.

Is this possible somehow? The page that contains the form is https://www2.tori.fi/ai/form/1?ca=16. Just select the first option in the first page (Under KOKO TORI) to get to the form. There you should find the element.

https://imgur.com/a/jyb4nBE <- picture of the element where uploading happens.

Thanks for your knowledge and effort! <3

Edits:

I managed to edit the input type to "hidden" and change value for the input before uploading (leading to error). Uploading can manually be triggered using:

var event = new Event('change');
document.getElementById("image").dispatchEvent(event);

However I can't find a way to attach URL to be uploaded. I also read about "blob". Blob is apparently way to fetch data from a URL. However I have no clue how to attach blob (or the file) to that input. I also tried to but the URL as a value for uploading but it lead to error in page.

Antti A Antti A · Accepted Answer · 2020-06-17T08:55:35

The question is not very general, but you should not try to get the image address while the user uploads it but after the upload as you said.

As the whole page gets reloaded after upload, you could try to see if element "img_0" (img_1, img_2... etc.) exist. Then save the source or download the file.

if(document.getElementById("img_0")) {
   var image_url = document.getElementById("img_0").src;
   saveImageURL2DB(image_url);
}

You have to trim the actual url a bit as they are using lots of redirects. The actual image thumbnails are like this url

<img id="img_0" src="https://img.tori.fi/image/thumbs/30/100001.jpg" alt="">

which redirects to this url (image filename stays the same)

https://images.tori.fi/api/v1/imagestori/images/100001.jpg?rule=thumbs

And you can get medium or full image by these urls

https://images.tori.fi/api/v1/imagestori/images/100001.jpg?rule=medium_660
https://images.tori.fi/api/v1/imagestori/images/100001.jpg?rule=big

It think blob datatype in your database does not have anything to do with this, unless you want to save the actual image file to database (instead of just using tori.fi's image files.

Using Chrome Extension to change <input type="file" accept="/image*"> to enter URL instead of user chosen image file

1 Answers