pass input file to background script

Question

I want to pass the input file from content page to extension background script, and then load it with FileReader() in the extension background script.

So in the web page I have a <input type="file"> and from onchange event I pass the file from content script to background page like this:

 var myfile = document.getElementById('fileid').files[0];
 chrome.runtime.sendMessage({myevent: "start", inputfile: myfile}, function(response) {});

in the background script I have this:

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){

   if(message.myevent==="start")
   {
      var reader = new FileReader();

         reader.onload = function(e) {
              // file is loaded 
         }  


       reader.readAsArrayBuffer(message.inputfile);
   }
});

but FileReader not load it, I'm not sure if this is correct way , but all i need is to pass the input file element to background script and load it with FileReader to send it with HTTP POST from background script. Please tell me what is wrong or how to do it correctly. It will help a lot if I see a sample code, because I'm new to chrome extension development, and not so experienced.

Answer 1

This works for chrome. You could find the whole production code here.

https://github.com/Leslie-Wong-H/BoostPic/tree/7513b3b8d67fc6f57718dc8b9ff1d5646ad03c75/BoostPic_Chrome/js

main.js:

    // Crossbrowser support for URL
    const URLObj = window.URL || webkitURL;

    // Creates a DOMString containing a URL representing the object given in the parameter
    // namely the original Blob
    const blobUrl = URLObj.createObjectURL(imageBlob);
    console.log(blobUrl);
    chrome.runtime.sendMessage(blobUrl, (res) => {
      imgUrl = res;
      console.log(imgUrl);
      clearInterval(refreshIntervalId);
      // To prevent that it happens to halt at "  Image uploading ..."
      setTimeout(() => {
        var imgUrlText = document.querySelector(imgUrlTextBoxId);
        imgUrlText.value = imgUrl;
      }, 1000);
      // double check to clear interval to prevent infinite error loop of LoadingStateOne
      // Hope it works.
      setTimeout(() => {
        clearInterval(refreshIntervalId);
      }, 500);
      console.log("Stop uploading state message");

background.js:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.startsWith("blob")) {
    console.log("RECEIVED");
    getBase64Url(request).then((res) => {
      console.log("Arrived here");
      // Acquired from https://stackoverflow.com/questions/18650168/convert-blob-to-base64/18650249#
      const reader = new FileReader();
      reader.readAsDataURL(res);
      reader.onloadend = function () {
        const base64data = reader.result;
        console.log(base64data);