Best Practice For Using Image in Bit

[mo-kml]

Hi There
I Was Trying To Use Byte Array To Save My Picture But The Code Generator Had Some Issue We That.
What Should I Do?

[msangtarash]

Consider this model:

public class Product : IEntityWithDefaultGuidKey
{
    [Key]
    public virtual Guid Id { get; set; }
    public virtual string Name { get; set; }
    public virtual byte[] Image { get; set; }
}

Having this model caused you not have any problems, but if you want to use byte[] in DTO, we haven't supported it yet.
All in all, there are some solutions:

First solution: For small size pictures, use base64 format, so you can declare Image property as string in both model and DTO.

http://www.url-encode-decode.com/base64-encode-decode/

Second solution: Remove byte[] Image property from your DTO but not from model, and write a basic ApiController to get a product's image with its Id. The same solution could be used to edit images too.

public class ProductImagesController : ApiController
    {
        public IEntityWithDefaultGuidKeyRepository<Product> ProductsRepository { get; set; }

        [HttpGet]
        [Route("products/{productId}.png")]
        public virtual async Task<HttpResponseMessage> GetProductImageById(Guid productId, CancellationToken cancellationToken)
        {
            byte[] productImageData = await ProductsRepository.GetAll()
                .Where(p => p.Id == productId)
                .Select(p => p.Image)
                .FirstOrDefaultAsync(cancellationToken);

            if (productImageData == null)
                throw new ResourceNotFoundaException();

            MemoryStream productImageMemoryStream = new MemoryStream(productImageData);
            HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
            response.Content = new StreamContent(productImageMemoryStream);
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");
            return response;
        }
    }

You can use following uri to get your image, for example as a src of a image elements etc.
http://your-site.com/api/products/27C3BB81-E9B1-43D7-854E-6CDCB427A680.png

To upload a file, you can use following code:

        [HttpPost]
        [Route("products/{productId}.png")]
        public async Task<IHttpActionResult> SetProductImage(Guid productId, CancellationToken cancellationToken)
        {
            if (!Request.Content.IsMimeMultipartContent())
            {
                throw new BadRequestException();
            }

            Product product = await ProductsRepository.GetByIdAsync(productId, cancellationToken);

            if (product == null)
                throw new ResourceNotFoundaException();

            MultipartMemoryStreamProvider streamProvider = new MultipartMemoryStreamProvider();

            await Request.Content.ReadAsMultipartAsync(streamProvider, cancellationToken);

            byte[] productImageData = await streamProvider.Contents.Single()/*Single: Let's say that we've one image for each product*/.ReadAsByteArrayAsync();

            product.Image = productImageData;

            await ProductsRepository.UpdateAsync(product, cancellationToken);

            return Ok();
        }

Then you can upload files using any standard file uploader:
This is a sample C# code:

            using (WebClient client = new WebClient())
            {
                client.UploadFile(@"http://your-site.com/api/products/27C3BB81-E9B1-43D7-854E-6CDCB427A680.png", HttpMethod.Post.Method, @"C:\myImage.png");
            }

[lock]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.