Uploading Signature to Azure Blob Storage

Question

Started working with Azure Blob storage and uploading images to it from a Xamarin forms android app, the images upload with no issue both picking from the devices gallery and taking a photo and uploading it straight away. Is there anyway to upload a Signature image as well? I am using the Xamarin.Controls.SignaturePad.Forms plugin to create the signature but I don't understand how I would upload it to the blob storage the same way as a image. Do I need to convert it somehow?

Signature Code + Upload Code:

private async void SaveButton_Clicked(object sender, EventArgs e)
    {
        Stream image = await PadView.GetImageStreamAsync(SignatureImageFormat.Jpeg);

    }

private async void UploadImage(Stream stream)
        {
            var account = CloudStorageAccount.Parse("Connection String + Key etc");
            var client = account.CreateCloudBlobClient();
            var container = client.GetContainerReference("images");
            await container.CreateIfNotExistsAsync();
            var name = Guid.NewGuid().ToString();
            var blockBlob = container.GetBlockBlobReference($"{name}.png");
            await blockBlob.UploadFromStreamAsync(stream);
            await DisplayAlert("Uploaded", "Image uploaded to Blob Storage Successfully!", "OK");
        }

Code From Image Upload:

private async void btnTakePic_Clicked(object sender, EventArgs e)
        {
            await CrossMedia.Current.Initialize();
            if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
            {
                await DisplayAlert("No Camera", ":(No Camera available.)", "OK");
                return;
            }
            else
            {
                _mediaFile = await CrossMedia.Current.TakePhotoAsync(new StoreCameraMediaOptions
                {
                    Directory = "Sample",
                    Name = "myImage.jpg"
                });

                if (_mediaFile == null) return;
                imageView.Source = ImageSource.FromStream(() => _mediaFile.GetStream());
                var mediaOption = new PickMediaOptions()
                {
                    PhotoSize = PhotoSize.Medium
                };
                UploadedUrl.Text = "Image URL:";
            }
        }

From a security standpoint, uploading directly to Storage from an Android app by using the account key is a really bad idea which I'm hoping you've understood here. A user of your app could extract that key and then have full admin-level access to all blobs, tables etc. Typically you might upload the file instead to a back-end server of yours which then uploads it to Storage. — juunas
I understand that, right now is just getting down a proof of concept that we can upload all sorts to our azure storage area as it's something that we haven't done before this application isn't going live anytime soon and we will approach using a back-end server when we want to go live. — CB1216
SignaturePad has a GetImage() method that returns a bitmap. Once you obtain the bitmap the process should be identical because they are both images. What specifically are you stuck on? — Jason
Managed to figure it out, annoyed at how simple it was really. When calling the UploadImage method on the Save button I just had to add in the stream: UploadImage(image); for it to recognise what I wanted to upload. Funnily enough it would only show the actual signature if it was set to a .png, if it was set to a .jpg it would just show a black square. — CB1216
Thank you @CB1216 for the figured out work around .Posting it as answer which may help other community members. — kavyasaraboju-MT

kavyasaraboju-MT kavyasaraboju-MT · Accepted Answer · 2021-08-11T11:03:16

As a solution by CB1216 ,

The issue of uploading signature image was resolved by adding in the stream: UploadImage(image) in the saveButton in order for the method to recognize the image which has to be uploaded.

Uploading Signature to Azure Blob Storage

1 Answers