javascript - Cannot retrieve the HTML Dom object -

i using ie11 since companys standard browser.

i working on solution catch paste event when pasting screen dump web application. far after have pasted image change size. preferable before don't jumping application.

i have create jsfiddle can see entire test application: http://jsfiddle.net/e5f5glan/3/

do when running jsfiddle:

1. make screen shot
2. put marker in red square
3. press ctrl + v

now intention pasted image should become 100px x 100px in size. doesn't.

the problem not getting hold of dom object can set style/size of image.

the significant part @ end of javascript (i guess...):

var image_container = document.getelementbyid('pastearea'); var image = image_container.getelementsbytagname("img"); image[0].setattribute("style", "width: 100px; height: 100px"); 

first of all, imagined img element become part of array , should access img-element using image[0]. error "not possible setattribute reference undefined or null. " (freely translated swedish...)

ok, perhaps understands 1 element , returns object isn't array. changed last row above to:

image.setattribute("style", "width: 100px; height: 100px"); 

then setattribute not supported object.

if create html page similar structure (img inside div) , tries change size, works. check out 1 (click button shrink image): http://jsfiddle.net/m4kzd7jp/3/

how can change change size of image before or after have pasted it?

yeah added style , worked keep 100px height/width.

 #pastearea img { width: 100px; height: 100px; }  

i tested code , filelist 0. if want handle through code, here's using in our project. should looping items not files , checking if file.

            function (e) {                 var clip = e.clipboarddata || window.clipboarddata;                 if (clip) {                     var preinsert = getdata(); // pulled input box text or div html                      (var = 0; < clip.items.length; i++) {                         var item = clip.items[i];                          if (item.kind == "file" &&                             item.type.indexof('image/') !== -1) {                             var fr = new filereader();                             fr.onloadend = function () {                                 if (preinsert == getdata()) // if nothing changed, we'll handle otherwise handled                                     setdata(fr.result);                             };                             var data = item.getasfile();                             fr.readasdataurl(data);                         }                     }                 }             } 

this area shows doing in angular get/set

            var getselection = function() {                 if (window.getselection && window.getselection().rangecount > 0) //ff,chrome,opera,safari,ie9+                 {                     return window.getselection().getrangeat(0).clonerange();                 }                 else if (document.selection)//ie 8 , lower                 {                     return document.selection.createrange();                 }                 return null;             }              var isinputtextarea = false; // being more generic in angular directive              var getdata = function () {                 if (isinputtextarea)                     return $element.val();                  return $element.html();             };              var setdata = function (src) {                 if (isinputtextarea) {                     $element.val(function (index, value) {                         return value + " " + "<img src='" + src + "'>";                     });                 }                 else {                     var selection = getselection(); // presume have focus @ point, since paste event                     if (selection) {                         var img = document.createelement("img");                         img.src = src;                         selection.insertnode(img);                     }                 }             };