'Firefox treating pasted image from clipboard as a string instead of file

I am trying to get image from on paste event from a contenteditable div. It is working fine in chrome but isn't working in firefox. I am using the following code:

$(window).on("paste", function(e) {
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
    if(e.originalEvent.clipboardData.items.length!=0)
    {
        let file = e.originalEvent.clipboardData||e.clipboardData).items[0].getAsFile();
            var upload_url = "{% url 'api:v2:images:upload' %}?format=json";
            if (file)
            {
                var fileType = file['type'];
                if (validImageTypes.includes(fileType)) {
                    var data = new FormData();
                    data.append('qqfile', file);
                    $.ajax({
                            type: 'POST',
                            processData: false, // important
                            contentType: false, // important
                            data: data,
                            url: upload_url,
                            dataType : 'json',
                            async: false,
                            success: function(jsonData){
                                var new_tag = "<img src=\""+jsonData.url+"\" data-verified=\"redactor\" data-save-url=\""+jsonData.filelink+"\" style=\"opacity: 0.5;\">";
                                 setTimeout(insertTextAtCaret(new_tag),0);
                             }
                         });
                }
                e.preventDefault();
            }
        }
     });

e.originalEvent.clipboardData.items[0] contains data of type text/plain in firefox whereas, it is image/png in chrome. (For a png image upload) `



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source