dataURL to blob

Question

I'm passing the dataURL from JS in the vfp to the extensions class. I'm trying to store that image as an attachment to the custom object. The attachment is uploaded but when I try to open, a "file" (type of file: file) is downloaded which is unable to open. When I paste the dataURL in a browser, I'm able to view the image. So I think I'm making a mistake in the Blob.

imagedataURL --> data:image/png;base64,iVBORw...

public void uploadfile() {

    string imagedataurl = ApexPages.currentPage().GetParameters().Get('imagedataurl');
    System.debug(' DataURL : ' + imagedataurl);
    Blob imageblob = Blob.valueOf(imagedataurl);

    attachment a = new attachment();
    a.ParentId = 'a0Oe000000XXXXXXXA';
    a.Name = 'attachment';
    a.Body = imageblob;
    insert a;
}

Thanks in advance.

Answer 1

You need to specify the file extension when giving name to the attachment.

a.Name = 'attachment.png';

Or alternatively set the ContentType attribute - Attachment Object

Update: Your string is already base64 encoded, so you'll need to strip off the first part (the metadata of the file) and base64 decode the rest (the content):

a.Body = Encodingutil.base64Decode(imagedataURL.substring(imagedataURL.indexOf(',') + 1));