500 (Internal Server Error) while uploading the more than 7MB image

Question

How to prevent from 500 (Internal Server Error) while uploading the more than 7MB image in Base64 string

 

I am trying to upload more than 7mb sized image which throwing before hit the server side action method '500 Internal Server Error' where below 7mb images are easily get uploaded.

below I am Serializing the file in angular to Base64 string.

$scope.UploadSysFiles = function (event){
var file = event.target.files;
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = () => {
$scope.SysFileByteCode = reader.result;
};
$scope.SysFiles = file[0];
}

and storing all values in one object for sending to server side class object as below

$scope.SystemAccesories[rowIndex] = {};
$scope.SystemAccesories[rowIndex].ManualFile = $scope.SysFileByteCode;
$scope.SystemAccesories[rowIndex].FileName = $scope.SysFiles.name;
$scope.SystemAccesories[rowIndex].FileSize = $scope.SysFiles.size;
$scope.SystemAccesories[rowIndex].ContentType = $scope.SysFiles.type;
$scope.SystemAccesories[rowIndex].IsManualFileAvailable = true;
now sending to server side like below
$http({
method: 'POST',
url: 'http://localhost:*****/Accesories/UpdateAccesories',
data: { objSystemAccesories: $scope.SystemAccesories},
headers: { 'content-type': 'application/json' }
}).then(function (response) {
//after get success, further steps
}
});

at backend I created one object class file and getting values in action method like below

public class SystemAccessories
{
public string ManualFile { get; set; }
public string FileName { get; set; }
public string FileSize { get; set; }
public string ContentType { get; set; }
public Nullable<bool> IsManualFileAvailable{ get; set; }
}
[HttpPost]
public ActionResult UpdateAccesories(SystemAccesories objSystemAccesories)
{
//deserialize to byte array annd upload code
}

I have updated the `web.config` file by below code

<system.web>
<httpRuntime targetFramework="4.6.1" maxRequestLength="2147483647" executionTimeout="3600" requestLengthDiskThreshold="2147483647"/>
</system.web>
<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="2147483647"></requestLimits>
</requestFiltering>
</security>
</system.webServer>
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="50000000"/>
</webServices>
</scripting>
</system.web.extensions>

but still getting same issue, no change