MVC Convert Base64 String to Image, but ... System.FormatException

Question

My controller is getting an uploaded image in the request object in this code:

[HttpPost]
public string Upload()
{
    string fileName = Request.Form["FileName"];
    string description = Request.Form["Description"];
    string image = Request.Form["Image"];

    return fileName;
}

The value of image (at least the beginning of it) looks a lot like this:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAYABgAAD/7gAOQWRvYmUAZAAAAAAB/...

I tried to convert using the following:

byte[] bImage = Convert.FromBase64String(image);

However, that gives the System.FormatException: "The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters."

I get the feeling that the problem is that at least the start of the string isn't base64, but for all I know none of it is. Do I need to parse the string before decoding it? Am I missing something completely different?

Jon Skeet · Accepted Answer · 2013-02-22 20:29:44Z

9

It looks like you may just be able to strip out the "data:image/jpeg;base64," part from the start. For example:

const string ExpectedImagePrefix = "data:image/jpeg;base64,";
...
if (image.StartsWith(ExpectedImagePrefix))
{
    string base64 = image.Substring(ExpectedImagePrefix.Length);
    byte[] data = Convert.FromBase64String(base64);
    // Use the data
}
else
{
    // Not in the expected format
}

Of course you may want to make this somewhat less JPEG-specific, but I'd try that as a very first pass.

answered Feb 22, 2013 at 20:29

Jon Skeet

1.5m893 gold badges9.3k silver badges9.3k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ESDictor Over a year ago

I need to accept jpg, gif, png, and bmp, which I suppose isn't so many to check for to handle it your way (assuming it works). However, I can't help but think that there's a correct way to parse that image. So many possible delimiters in that first 20 or so characters ... it can't be a coincidence.

Jon Skeet Over a year ago

Well, I think the format of data:[content-type];[encoding],[data] is pretty reasonable...

ESDictor Over a year ago

I just need to test it on Monday ... if it works I'll mark your answer

ESDictor Over a year ago

This actually worked great. After decoding, everything after the column was a valid image. Thanks for the help @Jon! I actually grabbed the mime-type, which I was basing off the filename, but I feel better grabbing it from there now.

Jose A Over a year ago

string base64 = Regex.Replace(file, @"data:image\/(png|jpg|svg|gif)\;base64,", ""); The code before will replace the text for png, svg, gif, jpg, files. Add more by adding |myType. Like this: string base64 = Regex.Replace(file, @"data:image\/(png|jpg|svg|gif|myType)\;base64,", "");

|

Dachi · Accepted Answer · 2016-01-29 08:31:53Z

5

The reason really is "data:image/jpeg;base64,", I'll suggest using this method for removing starting string from base64

var base64Content = image.Split(',')[1];
byte[] bImage = Convert.FromBase64String(base64Content);

This is Shortest solution and you don't have to use magic strings, or write a regex.

answered Jan 29, 2016 at 8:31

Dachi

8471 gold badge9 silver badges17 bronze badges

1 Comment

Oleksandr G Over a year ago

It's much better than the hardcoding of the header

Collectives™ on Stack Overflow

MVC Convert Base64 String to Image, but ... System.FormatException

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related