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

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

4 April 2019 at 13:05

Hygglo created an issue. See original summary.

Comment #2

Wim Leers

Ghent 🇧🇪🇪🇺

CreditAttribution: Wim Leers at Acquia 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?

Comment #3

frega CreditAttribution: frega as a volunteer commented 5 April 2019 at 10:23

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 🇧🇪🇪🇺

CreditAttribution: Wim Leers at Acquia commented 5 April 2019 at 11:00

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

Comment #5

Hygglo CreditAttribution: 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));
        }

    };