How can I access the attached file in webkit browsers? (like Google Chrome)

Question

It would be very convenient if you could embed images here on the Stack Exchange, and not interfere with the dialogue with the file. A similar function was implemented here (but is there?), But only for Webkit browsers .

I was developing a usercript that does this . It's funny that I never did to get a file (which is different from the raw image data) from the clipboard in Webkit browsers, while it works in Firefox.

Solution for Firefox:

  div.addEventListener('paste', function(event){
    //I'm actually not sure what should event.originalEvent be. I copypasted this
    var items = (event.clipboardData || event.originalEvent.clipboardData);
    console.log("paste", items);
    //Try to get a file and handle it as Blob/File
    var files = items.items || items.files;
    if(files.length>0) {  
      //Being lazy I just pick first file
      var file = files[0];
      //handle the File object
      _this.processFile(file);

      event.preventDefault();
      event.cancelBubble = true;
      return false;
    }
  });

Chrome ​​ , Firefox ( MDN), , . , Google Chrome (v39). , DataTransfer :

refference Firefox:

items types Firefox. , Chrome DataTransferItem. , :

  //Being lazy I just pick first file
  var file = files[0];
  //GOOGLE CHROME
  if(file.getAsFile) {
    console.log("DataTransferItem:", file);
    //HTML or text will be handled by contenteditable div
    if(file.type!="text/plain" && file.type!="text/html") {
      //handle the File object
      _this.processFile(file.getAsFile());
    }
  }
  else 
    ...

, text/plain text/html. .getAsFile null.

google chrome . (/ ), editable div, .

Answer 1

:

$('body').bind('paste', handlepaste);

handlepaste , Chrome.

, FF, a contenteditable ( , , , ).