I want to upload a signature with background to Azure Blob Storage

[Andres Fontan]

Hi.

I'm trying to upload a signature as a file (with the background image) to Azure blob storage.

I tried with: 

var x = await signature.SaveAsBlobAsync();

What type is x?   I need to convert x to a byte array o a stream?

Regards,

Andrés

[YuvanShankar Arunagiri]

Hi Andres,

Sorry for the delay.

We have checked your reported issue and prepared the sample based on your requirement. Please refer the below code snippet.

Query: What type is x? 

SaveAsBlobAsync() return object type value.

private async void GetBlob()

    {

        var blob = await signature.SaveAsBlobAsync();

        var type = blob.GetType();

    }

Query: I need to convert x to a byte array o a stream?

It little difficult to convert the object (which was return from SaveAsBlobAsync) to byte array. We found another way to save the image in byte array. We can achieve your requirement by using the GetSignatureASync() method. Please refer the below code snippet.

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Buttons

 

<h4>Sign Here</h4>

 

<SfSignature @ref="signature" BackgroundImage="https://media.istockphoto.com/photos/pixelated-leaf-picture-id1335295829?s=612x612"></SfSignature>

 

<SfButton @onclick="GetBlob">GetBlob</SfButton>

 

<SfButton @onclick="GetByte">GetByte</SfButton>

 

<SfButton @onclick="Load">LoadByteTOBase</SfButton>

 

@code{

 

    private SfSignature signature;

    private string format = "";

    private byte[] bytes;

 

    private async void GetBlob()

    {

        var blob = await signature.SaveAsBlobAsync();

        var type = blob.GetType();

    }

 

    private async void GetByte()

    {

        var url = await signature.GetSignatureAsync();

        var spl = url.Split('/')[1];

        format = spl.Split(';')[0];

        string base64 = url.Replace($"data:image/{format};base64,", String.Empty);

        bytes = Convert.FromBase64String(base64);

    }

 

    public void Load()

    {

        string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);

        var src = $"data:image/{format};base64," + base64String;

    }

}

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Andres Fontan]

Hi YuvanShankar.

Thanks for your response.

After trying with this it seems that signature.GetSignatureAsync don't return the background image, only the signature.

The uploaded image file doesn't have the background image.

Best regards,

Andrés

[YuvanShankar Arunagiri]

Hi Andres,

Currently, we don’t have support for your query, so we have logged this improvement as a feature. It will be available in our volume 2 release, which is expected to be rolled out by the end of the June, 2022. You can track the status of this improvement
using below link from our feedback portal

Feedback link: https://www.syncfusion.com/feedback/35265/provides-the-save-with-background-support-to-getsignature-method-of-the-signature

We appreciate your patience until then.

Regards,

YuvanShankar A

[YuvanShankar Arunagiri]

Hi Andres,

Sorry for the inconvenience.

We are facing more complexity while fixing your reported issue, so we need to validate more on this issue. And the fix will be available on our upcoming patch release which is schedule on 20th July 2022.

We appreciate your patience until then.

Feedback link: https://www.syncfusion.com/feedback/35265/provides-the-save-with-background-support-to-getsignature-method-of-the-signature

Regards,

YuvanShankar A

[YuvanShankar Arunagiri]

Hi Andres,

Sorry for the delay. We are facing more difficulties while implementing this feature in source level. Now, we can achieve your requirement by using the LoadAsync method of the signature component in sample level. Please refer the below code snippet.

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Buttons

 

<div>

    <SfSignature @ref="signature" Created="OnCreated" Changed="OnChange" style="width: 400px; height: 300px;"></SfSignature>

    <SfButton @onclick="GetSign">GetSign</SfButton>

</div>

 

@code{

    private SfSignature signature;

    private async void OnCreated()

    {

        await signature.LoadAsync("https://media.istockphoto.com/photos/pixelated-leaf-picture-id1335295829?s=612x612");

    }

    private async void OnChange(SignatureChangeEventArgs args)

    {

        if (args.ActionName == "Clear")

        {

            await signature.LoadAsync("https://media.istockphoto.com/photos/pixelated-leaf-picture-id1335295829?s=612x612");

        }

    }

    private async void GetSign()

    {

        var sign = await signature.GetSignatureAsync();

    }

}

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Andres Fontan]

Hi YuvanShankar

Sorry for trying this late.

I just updated Syncfusion Blazor to the latest build.

But this sample does not work. I made a page with this code.

But when the program executes:   var sign = await signature.GetSignatureAsync();  The browser shows this message: Attempting to reconnect to the server: X of 8.

And after some seconds it returns with sign == null.

Regards,

Andrés

[YuvanShankar Arunagiri]

Hi Andres,

We have checked your reported query and please use below code in your sample to resolve this issue. In signature component, get signature took data URL form the client side. Sometimes the transfer of high size data may cause this issue.

[Program.cs](.net6):

builder.Services.AddSignalR(hubOptions =>

{

    hubOptions.MaximumReceiveMessageSize = null;

});

[Startup.cs](.net5):

services.AddServerSideBlazor().AddHubOptions(o => o.MaximumReceiveMessageSize = null);

Could you please check the above code and get back to us, if you need any further assistance on this. 

 

Regards, 

YuvanShankar A

Attachment: Server6.0671386074_a717c1cd.zip