SPFX react web part: SharePoint List attachment displaying broken image when viewed

O365Developer 

I tried your suggestion and it was not working out for me. I ended up doing some more in-depth research and testing and finally got it to work. 

For those who are probably experiencing the same issue, here is the working code:

NB:

1. The markup in the render method remained the same

2. The images with the steps remained the same except after clicking attachment, the image finally displays.

// This is my interface with the required data needed for a leave request on ILeaveRequestForm.ts
export interface ILeaveRequestForm {
    request: [{
        Employee: string;
        StartDate: string;
        EndDate: string;
        LeaveType: string;
        Reason: string;
        Status: string;
    }];
    selectedLeaveType: string;
    Attachments: File;
}

// This is the initialized state on ILeaveRequestForm.tsx
const initialState: ILeaveRequestForm = {
    request: [{
        Employee: '',
        StartDate: '',
        EndDate: '',
        LeaveType: '',
        Reason: '',
        Status: 'Pending'
    }],
    selectedLeaveType: '',
    Attachments: new File([""], "", { type: "",})
};

// This is the script to handle the upload and adding to SharePoint List
private handleFileUpload = (event) => {
        var file = event.target.value;
        var fileInfo = (document.getElementById("attachment") as HTMLInputElement).files[0];

        //Set file input with file name
        var fileName = file.split("\\").pop();
        document.getElementById("fileName").innerHTML = fileName;

        this.setState({ Attachments: fileInfo });
    }

private handleSubmit = (event) => {
        event.preventDefault();

        //Form validations
        if (this.validateLeaveTaken()) {
            event.preventDefault();
        }
        else {

            console.log(this.state.Attachments);
            var ptoStDtTime = $("#ptoStartDate").val() + "T" + $("#ptoStartTime").val();
            var ptoEdDtTime = $("#ptoEndDate").val() + "T" + $("#ptoEndTime").val();

            var data = {
                "Employee": this.props.currentUser,
                "LeaveType": this.state.selectedLeaveType,
                "StartDate": $("#startDate").val() != undefined ? $("#startDate").val() : ptoStDtTime,
                "EndDate": $("#endDate").val() != undefined ? $("#endDate").val() : ptoEdDtTime,
                "Reason": $("#reason").val() != undefined ? $("#reason").val() : '',
                "Status": "Pending",
                "Attachments": this.state.Attachments
            };

            //Log form data
            console.log(data);
            console.log("Attachment data: " + data.Attachments);

            // Set correct absoluteUrl of SP site
            const url = this.props.url;
            let web = new Web(url);

            //Insert into SP List
            web.lists.getByTitle('Leave%20Request%20Form').items.add({
                Employee: data.Employee,
                StartDate: data.StartDate,
                EndDate: data.EndDate,
                LeaveType_x003a_Description: data.LeaveType,
                Reason: data.Reason,
                Status: data.Status
            }).then((iar: ItemAddResult) => {
                //Upload attachment if any
                if (data.Attachments != null) {
                    var toUpload = data.Attachments;
                    var r = new FileReader();

                    r.onloadend = (e) => {
                        var dataItems = e.target.result;
                        iar.item.attachmentFiles.add(toUpload.name, dataItems).then(() => {
                            alert();
                        });
                    };

                    r.readAsArrayBuffer(toUpload);
                    console.log("iar: " + iar);
                }

                //refresh page
                window.location.reload();

            }).catch(e => { console.error(e); });
        }
    }

 Additionally, I tested with other file types such as word, excel, pdf, jpg and png and they all were accepted and uploaded to the SharePoint Attachments column in my list.