Firefox Blob从文件中删除MIME类型

Question

This used to work in Firefox prior to Firefox Quantum(v 57). The code still works in Chrome but not in Firefox anymore.

User selects an image from his local computer, then creates a Blob with some JSON information and the file, like this:

var fileElement = $("<input>").attr({
        "type": "file",
        "accept": "image/*"
    }).hide()
    .on("change", function () {
        var fileList = this.files;

        if (fileList.length > 0) {
            var file = fileList[0];
                    var str = JSON.stringify({
                        "uid": info.uid,
                        "utype": info.utype
                    });

                        var blob = new Blob([str.length, str, file]);
                        WebSocketConnection.sendMessage(blob);   

        }

    });

Then on the server side I extract the JSON string and get the information I want, then extract the mime type from the file and based on that mime type I save the file on server disk with one of this extensions [".png", ".jpg", ".jpeg", ".gif"] .

Since Firefox quantum this is not working and the received mime type is application/octet-stream

Is this a Firefox bug or did something changed in the api and I need to add some changes to my code?

Answer 1

I managed to make it work. I still think this is a bug since it used to work in Firefox older versions.

In the end I converted selected file to ArrayBuffer then created the Blob file with that ArrayBuffer . I also updated the main question code to better understand what's happening.

var fileElement = $("<input>").attr({
        "type": "file",
        "accept": "image/*"
    }).hide()
    .on("change", function () {
        var fileList = this.files;

        if (fileList.length > 0) {
            var file = fileList[0];
                    var str = JSON.stringify({
                        "uid": info.uid,
                        "utype": info.utype
                    });

                    var reader = new FileReader();
                    reader.onload = function () {
                        var arrayBuffer = this.result;
                        var blob = new Blob([str.length, str, arrayBuffer]);
                        WebSocketConnection.sendMessage(blob);                            
                    }
                    reader.readAsArrayBuffer(file);

        }

    });