File (image) upload corrupts the uploaded file using jquery ajax

[regalartech]

I can send the data using API but the files are rendered corrupted on upload her is code. Not complete in bits and pieces. Please help.

        var upload_base64 = null;
        var file = document.querySelector('#'+upload_div_name).files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        
        upload_base64 = ( btoa(reader.result) );

      
        var upload_post_body = null;
        upload_post_body = {"resource": [{
                                            "name": file_name,
                                            "type": "file",
                                            "content": upload_base64,
                                            "is_base64": true
                                            }
                                        ] 
                            };
        var up_url = INSTANCE_URL + '/api/v2/files/'+ file_path + file_name ;
        UploadHeaders =  function(xhrObj){
            xhrObj.setRequestHeader('X-DreamFactory-Api-Key',''+APP_API_KEY);
            xhrObj.setRequestHeader('X-DreamFactory-Session-Token',''+ sessionStorage.getItem(APP_API_KEY));
            xhrObj.setRequestHeader('content-type','application/json; charset=utf-8');
              };

            $.ajax({
                url: up_url,
                //contentType: 'application/json; charset=utf-8',
                //dataType: 'json',  // does not work 
                data: upload_post_body,
                cache:false,
                //contentType: false, // does not work
                //processData: false, // does not work
                method:'POST',
                beforeSend: UploadHeaders,
                success:function (response) {
                    if(typeof callback !== 'undefined') {
                        if (response.hasOwnProperty('resource'))
                            callback(response.resource);
                        else
                            callback(response);
                    }
                },
                error:function (response) {
                    callback(response);
                    return false;
                }
            });