Upload file using jquery not working for Edge and Safari (v. 11.1)

Question

I have input in which user can drop files and after uploading and clicking send they will be uploaded to blob

<input type="file" id="selectFile" name="MultipleFiles" multiple>
<script>
    $(document).ready(function() {
        $("#selectFiles").dragAndDropPZ({
            fileInputId: "#selectFile"
        });
    });
</script>

When user drop some files script works and use this function

(function ($, window, document) {

var defaults = {
    fileInputId: "input[type='file']",
    dragoverStyleClass: "stripped"
};

$.fn.dragAndDropPZ = function (options) {
    var config = $.extend({}, defaults, options);
    var $dropZone = $(this);
    var dropZoneId = $dropZone.selector;

    $(document).on("dragover", dropZoneId, function (e) {
        e.preventDefault();
        e.stopPropagation();
        $dropZone.addClass(config.dragoverStyleClass);
        console.log("dropzone => dragover");
    });

    $(document).on("dragleave", dropZoneId, function (e) {
        e.preventDefault();
        e.stopPropagation();
        $dropZone.removeClass(config.dragoverStyleClass);
        console.log("dropzone => dragleave");
    });

    $(document).on("drop", dropZoneId, function (e) {
        e.preventDefault();
        e.stopPropagation();
        var droppedFiles = e.originalEvent.dataTransfer.files; //[0] - ?
        $(config.fileInputId).prop("files", droppedFiles);
        $dropZone.removeClass(config.dragoverStyleClass);
        console.log("dropzone => ondrop");
    });

    return $dropZone;
};
})(jQuery, window, document);

This is my ajax function for upload files

    function uploadMultipleStageFiles() {
    var formData = new FormData($("#contentStages form")[0]);
    var funcStatus;
    $.ajax({
        url: "@Url.Action("AddFiles", "Groups")",
        data: formData,
        type: 'post',
        async: false,
        processData: false,
        contentType: false,
        success: function (data) {
            funcStatus = data.status;
            if (data.status === "success") {
                removeSpiner();
                appendAttachedFiles(data.Files);
                updateRadioButtonOfFiles(); 
                console.log("FileUpload - success");
                return true;
            } else if (data.status === "error") {
                removeSpiner();
                alert(data.message);
                return false;
            }
            return false;
        },
        error: function () {
            console.log("FileUpload - error");
        }
    });
    if (funcStatus === "success") {
        return true;
    } else {
        return false;
    }
}

This code works for all browsers except Edge and Safari version 11.1. Maybe anyone had such issue and already fixed it?

Answer 1

I have found solution for Safari

function uploadMultipleStageFiles() {
    var $form = $('form');
    var $inputs = $('input[type="file"]:not([disabled])', $form);
    $inputs.each(function(_, input) {
        if (input.files.length > 0) return;
        $(input).prop('disabled', true);
    });
    var formData = new FormData($("#contentStages form")[0]);
    $inputs.prop('disabled', false);
 $.ajax({

But for this moment this doesn't work for Edge. Working on Edge fixing