Перетащите изображение из ячейки таблицы в область раскрытия iFrame

Question

У меня проблемы с перетаскиванием изображения из одного элемента iframe (1) из динамической таблицы c в другой элемент iframe (2) в пределах области сбрасывания. Я думаю, что проблема не в разрешении, а в «типе». Область перетаскивания в iframe (2) работает с файлами из любой точки, кроме формы iframe (1). Iframe (1) размещается на localhost. Iframe (2) размещен в другом домене. Было найдено три различные функции для преобразования данных URI в файл или BLOB-объект. Аргументы setData также были протестированы со всеми возможностями, но пока безуспешно. Интересно, что, открыв сайт с двумя iframe на Chrome и firefox, я могу перетащить каплю с firefox на Chrome, но изображение будет преобразовано в тип bmp и переименовано! Наоборот, это не работает.

• Каковы правильные аргументы для setData / get Data для удаления данных изображения uri в области удаления?
• Нужно ли преобразовывать данные URI в файл или соотв. объект blob?
• Если да, то какие аргументы снова будут выполнять эту работу?

Любая помощь будет принята с благодарностью!

var dataUri;
    var file;


    function mouseDown(event){


     toDataURL(event.target.src, function(dataUrl) {
             console.log('RESULT:', dataUrl.replace('data:text/plain;base64,', ''));

             dataUri = dataUrl.replace('data:text/plain;base64,', '');


          file =   urltoFile(dataUrl, 'hello.jpg','image/jpeg')
    .then(function(file){ console.log(file);});
        })
                       }



function drag(event) {
    // event.stopPropagation();  
     console.log(file);
      console.log(dataUri); 

event.dataTransfer.setData("text/plain", file);
 //event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);   
 event.dataTransfer.effectAllowed = "move";      

} 

function drop(event) {
  //event.preventDefault();
        console.log(file);
      console.log(dataUri); 
     var data = event.dataTransfer.getData("text/plain");    
  //var data = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
  event.target.appendChild(document.getElementById(data));
        document.getElementsById(data);
    console.log(data);
}

function allowDrop(event) {
  event.preventDefault();
}


function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
} 

function urltoFile(url, filename, mimeType){
        return (fetch(url)
            .then(function(res){return res.arrayBuffer();})
            .then(function(buf){return new File([buf], filename,{type:mimeType});})
        );
    }

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);
    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var dw = new DataView(ab);
    for(var i = 0; i < byteString.length; i++) {
        dw.setUint8(i, byteString.charCodeAt(i));
    }
    // write the ArrayBuffer to a blob, and you're done
    return new Blob([ab], {type: mimeString});
}