UWP file thumbnail save in SQL Server database

Question

I have 3 kinds of storage files, photos, video and audio, and I want to save them to the database as a byte array. I tried to do that and it worked but when I convert them back from byte[] to StorageFile , and then I try to get their thumbnail all I get is a white file icon, instead of a proper thumbnail image.

StorageFile to Byte[] :

public static async Task<byte[]> GetBytesAsync(StorageFile file)
{
    byte[] fileBytes = null;

    if (file is null)
    {
        return null;
    }

    using (var stream = await file.OpenReadAsync())
    {
        fileBytes = new byte[stream.Size];

        using (var reader = new DataReader(stream))
        {
            await reader.LoadAsync((uint)stream.Size);
            reader.ReadBytes(fileBytes);
        }
    }
    return fileBytes;
}

byte[] to StoragFile :

public static async Task<StorageFile> GetStorageFileAsync(byte[] byteArray, string fileName)
{
    StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    StorageFile sampleFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
    await FileIO.WriteBytesAsync(sampleFile, byteArray);
    return sampleFile;
}

So I made a new column in my db and thought I can store my thumbnail in it separately as a byte[].

public static async Task<byte[]> GetBytesForImageAsync(StorageFile mediafile)
{
    WriteableBitmap bb = null;
    using (var imgSource = await mediafile.GetScaledImageAsThumbnailAsync(ThumbnailMode.VideosView, Constants._thumbnailReqestedSize, ThumbnailOptions.UseCurrentScale))
    {
        if (!(imgSource is null))
        {
            bb = new WriteableBitmap(Convert.ToInt32(imgSource.OriginalWidth), Convert.ToInt32(imgSource.OriginalHeight));
            await bb.SetSourceAsync(imgSource);
        }
    }

    return bb is null ? new byte[] { } : bb.PixelBuffer.ToArray();
}

I tried to do it with BitmapImage and also in WriteableBitmapImage , but nothing works as I get "component not found exception" when I try to get thumbnail back from that byte[]

With bitmap:

public async static Task<BitmapImage> GetImageFromBytesAsync(byte[] bytes)
{
    var image = new BitmapImage();

    using (var stream = new InMemoryRandomAccessStream())
    {
        await stream.WriteAsync(bytes.AsBuffer());
        stream.Seek(0);
        await image.SetSourceAsync(stream);
    }
    return image;
}

With writeableBitmap :

public static async Task<WriteableBitmap> GetImageFromBytesAsync(byte[] bytes)
{
    using (var image = bytes.AsBuffer().AsStream().AsRandomAccessStream())
    {
        // decode image
        var decoder = await BitmapDecoder.CreateAsync(image);
        image.Seek(0);

        // create bitmap
        var output = new WriteableBitmap((int)decoder.PixelHeight, (int)decoder.PixelWidth);
        await output.SetSourceAsync(image);
        return output;
    }
}

Ultimately my goal is to pick audio, video or photo files from local device with FileOpenPicker ( this is what I am doing currently as well ) and then save those files to SQL Server and when I get them from my web api later on I want to use them ( play audio or video and display images ) and in all 3 types I need a thumbnail image to show in my gridview.

Answer 1

Your issue was in GetBytesForImageAsync method. The byte[] data that you get is incorrect. Please try the following code:

public static async Task<byte[]> GetBytesForImageAsync(StorageFile mediafile)
{
        byte[] bts;
        using (var imgSource = await mediafile.GetScaledImageAsThumbnailAsync(ThumbnailMode.VideosView, Constants._thumbnailReqestedSize, ThumbnailOptions.UseCurrentScale))
        {
            if (!(imgSource is null))
            {
                using (MemoryStream stream = new MemoryStream())
                {
                    await imgSource.AsStream().CopyToAsync(stream);
                    bts = stream.ToArray();
                    return bts;
                }
            }
            else
                return new byte[] { };
        }
}