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

here is solutions:

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Solution 1

in web.config one more line to add in <appSettings>

<add key="aspnet:MaxJasonDeserializerMembers" value="86753090"/>

and followed by this

https://stackoverflow.com/a/41575205/4728451

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply