Unable to send email with PDF attachment using Chrome

Question

I have a form that a user enters information and has the option to upload a document. Once they have filled out the form and click on the submit button, an email is sent to the indicated reciever. This works fine in IE and Firefox (whether the user uploads/doesnt upload a document).

However, when a user uploads a document and submits the form in chrome, it appears that chrome tries to process the document and then crashes.

Here is the logic where I check if a user has upload a document to the form and I store it in a temp folder:

<cfif isdefined("FORM.file_type_attachment") AND Len(FORM.file_type_attachment) GT 0>
   <!--- first actually upload the file --->
   <cffile action="upload"
             filefield="file_type_attachment"
             destination="destination of file"
             nameconflict="Makeunique">
    <!--- now create a temporary holder for the attachment later on --->
    <cfset attachment_local_file_1 = "file location">
</cfif>

<!--- Attaches attachment to email. --->
<cfsilent>
    <!--- Note that I used the <CFSILENT> tag, this will kill the white space in this area so your email is not cluttered with white space. --->
    <cfif isdefined("FORM.file_type_attachment") AND Len(FORM.file_type_attachment) GT 0>
        <cfmailparam file="#attachment_local_file_1#">
    </cfif>
</cfsilent> 

Update5: I am able to send certain files with no issues. However, when a user attempts to email a pdf file, Chrome is not able to process and an error populates notifying the user an error has occured. On the dev tools, I am seeing the following:

The following code is the approach I attempted to allow users to attach document. Is there a different approach when handling PDF's? Any help would be appreciated.

        var sendForm = function(event) {
            event.preventDefault();
            var url = 'MarcomRequestSent.cfm';
            document.getElementById('smbt').disabled = true;
            var form = event.target;
            var formData = new FormData(form);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            //xhr.setRequestHeader('Content-type', undefined);
            xhr.onload = function(e) { 
                if(xhr.status == 200) {
                    //open the modal once the form passes validation
                    var m = modal.open({content: "<div class='modal-content'><div class='modal-header'><h4 class='modal-title' style='color: #9EC630 !important; font-size:28px; text-align:center;'>Request Sent</h4><button style='border:none;' id='closex' type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true' style='color:black'>x</span></button></div><br /><div class='modal-body'>" + "<p style='font-size:16px'>To return to the Marketing page, please click <a href='marketing.cfm'>here</a>."});             
                    if(m == true) {
                        return m;
                    } 
                    console.log('Form data (including any attachment) has been uploaded successfully.'); 
                }
                else {
                    if(xhr.status == 500){
                        alert("We seem to have encountered a problem. Please contact IT.");
                    }
                }
            };
            xhr.onerror = function(e) { 
                alert("We seem to have encountered a problem. Please contact IT."); 
            };
            xhr.send(formData);
        };

        document.getElementById('marcom_request_form').addEventListener('submit', sendForm);

Is there a way I can have users send pdf? Need the help