MAUI - Issue with saving an Image as a ByteArrayContent

Sakshi Poojary 95 Reputation points
2024-07-02T15:35:00.11+00:00

In my MAUI application, there is a profile page where users can view and edit their personal details. This page includes functionality for updating the profile image. Users have three options for adding a profile image:

  1. Taking a photo using the camera.
  2. Selecting an image from the gallery.
  3. Choosing an avatar from the resources included in the project.

When users attempt to save their profile details along with an image, the image is not getting saved. This issue occurs specifically with images taken from the camera or selected as an avatar from the project resources. For saving profile details, I am using a POST API call. The issue does not seem to affect images selected from the gallery; these images are saved correctly.

For taking a photo from the camera and gallery, I use a Microsoft.Maui.Media.MediaPicker package and for combining the path, I use Microsoft.Maui.Storage.FileSystem.

Below is the code for taking a photo from the camera and combing the path:

FileResult photo;
photo = await MediaPicker.CapturePhotoAsync();  
if (photo != null)  
{  
    var imageFile = Path.Combine(FileSystem.CacheDirectory, photo.FileName);  
    using (var stream = await photo.OpenReadAsync())  
    using (var newStream = File.OpenWrite(imageFile))  
    await stream.CopyToAsync(newStream);  
    profilephoto.Source = imageFile;  
    isPicture = true;  
}  
else  
{  
    isPicture = false;  
}

Below is the code for taking an image from the gallery and combing the path:

FileResult photo;
photo = await MediaPicker.PickPhotoAsync();  
if (photo != null)  
{  
    var imageFile = Path.Combine(FileSystem.CacheDirectory, photo.FileName);  
    using (var stream = await photo.OpenReadAsync())  
    using (var newStream = File.OpenWrite(imageFile))  
    await stream.CopyToAsync(newStream);  
    profilephoto.Source = imageFile; 
    isPicture = true;  
}  
else  
{  
    isPicture = false; 
} 

Below is the code to send the image taken from the camera to the POST API: (Not working)

content.Add(new StreamContent(await photo.OpenReadAsync()), "\"file\"", $"\"{photo.FullPath}\"");

Below is the code to send the avatar to the POST API: (Not working)

string avatarFileName = "Avatars." + selectedAvatar;  
var assembly = typeof(ProfilePage).GetTypeInfo().Assembly;  
var stream = assembly.GetManifestResourceStream($"{assembly.GetName().Name}.{avatarFileName}");  
var streamContent = new StreamContent(stream);  
content.Add(streamContent, "file", avatarFileName);

Below is the code to send the image taken from the gallery to the POST API: (Working fine)

var fileBytes = File.ReadAllBytes(photo.FullPath);  
ByteArrayContent byteContent = new ByteArrayContent(fileBytes);  
content.Add(byteContent, "file", Path.GetFileName(photo.FullPath));

When I try to save the profile details with an image selected as an avatar from the project resources, I encounter the following exception:

System.ArgumentNullException: Value cannot be null. (Parameter 'content') at System.ArgumentNullException.Throw(String paramName) at System.ArgumentNullException.ThrowIfNull(Object argument, String paramName) at System.Net.Http.StreamContent..ctor(Stream content)

The exception occurs on the below line:

var streamContent = new StreamContent(stream);

I am looking for a solution to send an image from the camera and from the project resource using the ByteArrayContent. Gallery image was working fine as per the above codes.

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,176 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 71,836 Reputation points Microsoft Vendor
    2024-07-03T07:21:07.7433333+00:00

    Hello,

    I am looking for a solution to send an image from the camera and from the project resource using the ByteArrayContent.

    Please convert Stream to byte[] by following Stream2ByteArray method

    public static byte[] Stream2ByteArray(Stream input)
    {
         MemoryStream ms = new MemoryStream();
         input.CopyTo(ms);
         return ms.ToArray();
    }
    

    Then you can convert byte[] to ByteArrayContent, after that send ByteArrayContent like following code.

    using Stream sourceStream = await photo.OpenReadAsync();
    var FilebytesTest=  Stream2ByteArray(sourceStream);
    ByteArrayContent byteContents = new ByteArrayContent(FilebytesTest);
    

    Best Regards,

    Leon Lu


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


0 additional answers

Sort by: Most helpful