Chrome extension: move downloaded file to input field

Question

I am trying to migrate images with a small chrome extension i have built. the extension consists of 5 files:

popup.html - the plugin html document

 Has some html buttons
also has script link to my settings.js file that listens for the image downlaod button to be clicked and send a message to my content script : run.js to find the images

run.js - content script ( has access to the webpages DOM ).

This script recieves the message from run.js which then finds all the images names and image links i want to download. It puts them into an object and sends them via message to the backgorund script : bootstrap.js

bootstrap.js - runs the background page and has access to the chrome api.

var Downloads = [];
chrome.extension.onMessage.addListener(function(request, sender, sendResponse)
{
if(request.message.method == 'download'){
    for( var d = 0; d <= request.message.imageLinks.length; d++ ){
      chrome.downloads.download( {url: request.message.imageLinks[d],
             filename: request.message.imageName[d]}, function(id){

        });
          sendResponse('done');
    }
}
});

This all works fine and dandy. It loops through the images and downloads them. What i need to be able to do now is: Take the images i just downloaded, and insert them into the file upload fields on the other website (which i have open in another tab) which have the same field names ect.. I see chrome has a

//Initiate dragging the downloaded file to another application. Call in a javascript ondragstart handler.
chrome.downloads.drag(integer downloadId)

At first i thought this might work since you can manually drag the downloaded image into the html file upload field without having to click and select the file. But i can't find any documentation / examples on it.

Does anyone know it is possible to get accomplish this with javascript / chrome api?

score 0 · Answer 1 · answered Jul 06 '17 at 11:54

First you need to access the content of the files you downloaded.

For that, you need to add a permission to file://*in your manifest file. Then you can loop through your downloaded files with chrome.downloads.search for instance and get each file's path in the system (DownloadItem.filename property). For each file, make a GET XMLHttpRequest to the url file://{filepath} to get the file's content.

Once you have that content, you can convert it to a DataUrl and programmatically add the file to the FormData of your form (not the actual inputs though, just the FormData submitted in the end). See this answer for this part.

Chrome extension: move downloaded file to input field

1 Answers1