I am trying to upload image using input elements with type="file" and then append image to contenteditable fieldset using this code:

var doc = document;
function file_upload() {
  var field = doc.getElementById("topic_details"), input = doc.body.appendChild(doc.createElement("input"));
  input.id = "blob";
  input.setAttribute("type", "file");
  input.click();
  input.addEventListener("change", function() {
    //reader.onload = function(e) { doc.getElementById("topic_details").innerHTML = "<img style='max-width: 320px; height: auto;' src='"+e.target.result+"' alt='' />"; }
    reader.onload = function(e) {
      field.execCommand("insertImage", false, e.target.result);
    }
    reader.readAsDataURL(doc.getElementById("blob").files[0]);
    input.parentNode.removeChild(input);
  }, false);
}

but I recieve this error:

Uncaught TypeError: field.execCommand is not a function

I am trying to upload image using input elements with type="file" and then append image to contenteditable fieldset using this code:

var doc = document;
function file_upload() {
  var field = doc.getElementById("topic_details"), input = doc.body.appendChild(doc.createElement("input"));
  input.id = "blob";
  input.setAttribute("type", "file");
  input.click();
  input.addEventListener("change", function() {
    //reader.onload = function(e) { doc.getElementById("topic_details").innerHTML = "<img style='max-width: 320px; height: auto;' src='"+e.target.result+"' alt='' />"; }
    reader.onload = function(e) {
      field.execCommand("insertImage", false, e.target.result);
    }
    reader.readAsDataURL(doc.getElementById("blob").files[0]);
    input.parentNode.removeChild(input);
  }, false);
}

but I recieve this error:

Uncaught TypeError: field.execCommand is not a function

• javascript

• What's doc in doc.getElementById? – j08691 Commented Jan 17, 2018 at 20:27
• 2 I believe execCommand is a method only of the document object. Not of individual document nodes. – Chris Riebschlager Commented Jan 17, 2018 at 20:28
• I define doc as var doc = document; in the top of document – Haithomy Commented Jan 17, 2018 at 20:31
• Right, but you're trying to run execCommand on field which is an individual node. – Chris Riebschlager Commented Jan 17, 2018 at 20:38
• ok I replace field with document and its work but I can't see the image in field – Haithomy Commented Jan 17, 2018 at 20:41

4 Answers 4

i was getting the same error when testing a function which calls the document.execCommand('copy') mand what helped me when testing document.execCommand :

i added this line of code at the top of my test.spec.ts file

document.execCommand = jest.fn()

using angular 9

update: still works in angular 12

I found the solution:

function file_upload() {
  var field = doc.getElementById("topic_details"), input = doc.body.appendChild(doc.createElement("input"));
  input.id = "blob";
  input.setAttribute("type", "file");
  input.click();
  input.addEventListener("change", function() {
    reader.onload = function(e) {
      var range = doc.createRange();
      range.selectNodeContents(field);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      doc.execCommand("insertImage", false, e.target.result);
    }
    reader.readAsDataURL(doc.getElementById("blob").files[0]);
    input.parentNode.removeChild(input);
  }, false);
}

thank you all for help .. cya

First of all execCommand() is a window function, that can only be called on the window object or its document, so it's wrong to call field.execCommand() and that's the code behind the error:

Uncaught TypeError: field.execCommand is not a function

Another thing you are calling doc.getElementById() while doc is not defined in your file_upload function, check that you declared doc in a global scope and that it's accessible in file_upload function.

Note:

Note that it's useless to declare a variable that points to the document object, as it's always easy to access it via document and it's globally defined in the window scope.

document.execCommand('copy') is deprecated and thus not remended to be used. so I used clipboard API instead of document.execCommand. so no error on clipboard API