6

I have Kendo charts drawn on a page and I am posting their image data to an action to save this base64 encoded data to a (SQL Server) database.

Here is the exportImage call in which I first split the base64 data from the dataURL:

chart.exportImage({
    width: 727,
    height: 262
}).done(function(data) {
    // split 'image/png,xxxyyy=' into two
    var dataParts = data.split(',', 2);
    // TODO: need to strip from 'data:image/png;base64'
    dataParts[0] = 'image/png';

    $.ajax({
        url: "@Url.Action("
        Export_TargetPrice ", "
        Charts ")",
        type: 'POST',
        data: {
            contentType: dataParts[0],
            base64: dataParts[1],
            companyID: companyId
        }
    }).done(function() {

    });

});

My Export_TargetPrice method is essentially just a call to Convert.FromBase64String and then writing to the database:

/// <summary>
/// Export TargetPrice chart image for company (without download).
/// </summary>
[HttpPost]
public ActionResult Export_TargetPrice(string contentType, string base64, int companyID) {
    var fileContents = Convert.FromBase64String(base64);

    ChartTargetPriceImage chartImage = new ChartTargetPriceImage {
        CompanyID = companyID,
            Data = fileContents,
            Extension = contentType,
            CreateDate = DateTime.Now
    };
    db.ChartTargetPriceImage.Add(chartImage);

    db.SaveChanges();

    return new HttpStatusCodeResult(HttpStatusCode.OK); // 200
}

I am using base64decode.org to see if I can successfully decode the base64 from the database data (also use freeformatter.com). It is often failing, but with no discernible reason or pattern. It is failing for one company but if I try tomorrow it will probably work.

Earlier I generated 10 charts (there are 50 on a page and I can generate whichever ones I need), and half of them failed. They are the same charts - same design, from a partial - with only the data differing.

In the browser I can copy the received base64 variable/data and successfully create a chart from it via freeformatter.com but the database data can fail.

Why is this process failing? (Why does it only fail some of the time?)


I also tried the following to no effect: checking for a FormatException (if the data is not a multiple of 4), then actually trying to make it a multiple of 4 by padding equal signs.

byte[] fileContents;

// check if multiple of 4
int overFour = base64.Replace(" ", "").Length % 4;
if (overFour > 0) {
    // add trailing padding '='
    base64 += new string('=', 4 - overFour);
}

try {
    fileContents = Convert.FromBase64String(base64);
} catch (FormatException ex) {
    return new HttpStatusCodeResult(HttpStatusCode.ExpectationFailed, base64.Length.ToString());
}

I also checked that the base64 data received does not contain any unexpected characters.

Narendra Jadhav
  • 10,052
  • 15
  • 33
  • 44
Andy G
  • 19,232
  • 5
  • 47
  • 69
  • 2
    would be nice to see the examples of failing and the working base64 strings here – jekcom Jul 10 '18 at 07:44
  • I cannot provide them directly as character limits are exceeded, so [pastebin works](https://pastebin.com/q7k464Vf), [pastebin fails](https://pastebin.com/92vCRZzP). I realise that the data is binary encoded, and probably base64decode.org is not an ideal tool to test. – Andy G Jul 10 '18 at 08:03
  • 2
    I struggle to see where it is not working. I was able to decode both of your example into working images. see result below [result link](https://ibb.co/bU20Wo) – jekcom Jul 10 '18 at 08:51
  • It looks like I may have been wasting my time,and my bounty, as the decode tools are misleading (particularly when being used with binary data) and it may be that the problem is with the final translation process used to display the images. Thanks @jekcom for the comments. – Andy G Jul 10 '18 at 09:06

1 Answers1

0

It is apparent that the use of tools such as base64decode.org are not appropriate in this case, and that the code is working and the issue is with the eventual retrieval, and creation, of images from the data.

Andy G
  • 19,232
  • 5
  • 47
  • 69