Non-textual file corrupt after uploading with axios [#3045824]

I'm using react dropzone to upload files. It works with .txt files but pdfs(and docx) gets corrupted.

Does this looks correct? I have attached the files I'm using to test.

    onDrop = (acceptedFiles, rejectedFiles) => {
        let file = acceptedFiles[0];

        let filename = file.name;

        var reader = new FileReader();
        reader.readAsBinaryString(file);

        reader.onabort = () => console.log('file reading was aborted')
        reader.onerror = () => console.log('file reading has failed')
        reader.onload = () => {

            const binaryStr = reader.result;

            axios.post('/jsonapi/node/application/field_resume',
                binaryStr
                , {
                    headers: {
                        "Content-Type": "application/octet-stream",
                        "Accept": "application/vnd.api+json",
                        "Content-Disposition": 'file; filename="' + filename + '"',
                        'X-CSRF-Token': "HDel-LIL4o709vjgAW6N82Me5wiJ1ZHu_7KHaXN19Vo",
                    }
                }
            )
                .then((response) => {
                    console.log(response);

                })
                .catch(function (error) {
                    console.log(error);


                }.bind(this));
        }

    };

Comment	File	Size	Author
	dummy.txt	15 bytes	hygglo
	dummy.pdf	12.95 KB	hygglo

Comments

Comment #1

4 April 2019 at 13:05

Hygglo created an issue. See original summary.

Comment #2

wim leers

Ghent 🇧🇪🇪🇺

commented 5 April 2019 at 09:39

Title:	File corrupt after upload	» Non-textual file corrupt after uploading with axios
Status:	Active	» Postponed (maintainer needs more info)
Issue tags:		+API-First Initiative, +JavaScript

I'm pretty sure people have been uploading images. And if textual files work, then binary files ought to work too. Are you sure you're using axios correctly?

Hi,
this sounds very like this axios-issue https://github.com/axios/axios/issues/1250#issuecomment-391968564 which indicates that `readAsArrayBuffer` should be used instead of `readAsBinaryString`. The issue also points to the documentation at https://github.com/axios/axios#request-config where the docblock above the `transformRequest` functions specs that `The last function in the array [transforming the request] must return a string or an instance of Buffer, ArrayBuffer, FormData or Stream`.
Could you try to see if that resolves the issue?
Best, Fredrik

Comment #4

wim leers

Ghent 🇧🇪🇪🇺

commented 5 April 2019 at 11:00

Thanks for doing the work to write that insightful comment, @frega! 🙏

Comment #5

hygglo commented 6 April 2019 at 23:55

Thank you so much! That solved the problem!

See working example below. Hopefully iy can help someone else in the future.

onDrop = (acceptedFiles, rejectedFiles) => {
        let file = acceptedFiles[0];

        let filename = file.name;

        var reader = new FileReader();
        reader.readAsArrayBuffer(file);

        reader.onabort = () => console.log('file reading was aborted')
        reader.onerror = () => console.log('file reading has failed')
        reader.onload = () => {

            const arrayStr = reader.result;

            axios.post('/jsonapi/node/application/field_resume',
                arrayStr
                , {
                    headers: {
                        "Content-Type": "application/octet-stream",
                        "Accept": "application/vnd.api+json",
                        "Content-Disposition": 'file; filename="' + filename + '"',
                        'X-CSRF-Token': "HDel-LIL4o709vjgAW6N82Me5wiJ1ZHu_7KHaXN19Vo",
                    }
                }
            )
                .then((response) => {
                    console.log(response);

                })
                .catch(function (error) {
                    console.log(error);


                }.bind(this));
        }

    };