How to show images in postman from api controller

Question

Hi,
I am trying to get the images (.png, .jpg files) and the file details of each files in postman, from the folder images from web api controller. Please can you someone can help me to display the images in postman from my code. I want to return image list and its details from the API Get method rather than string

This is the code

public class FileUploadAPI
 {
    [Key]
    public int Id { get; set; }
    public string FileName { get; set; }
    [NotMapped]
    public   IFormFile IFormFile { get; set; }
    [NotMapped]
    public FileInfo[] Files { get; set; }
    [NotMapped]
    public List<IFormFile> IFormFiles { get; set; }

public interface IImagesFilesRepository
    {
        FileUploadAPI GetDriveFiles();
    }


public class ImagesFilesRepository : IImagesFilesRepository
    {
        private readonly IHostingEnvironment env;

        public ImagesFilesRepository(IHostingEnvironment env)
        {
            this.env = env;
        }

        public FileUploadAPI GetDriveFiles()
        {
            FileUploadAPI modelFile = new FileUploadAPI();
            var userImagePath = Path.Combine(env.ContentRootPath, "Images");
            DirectoryInfo dir = new DirectoryInfo(userImagePath);
            FileInfo[] files = dir.GetFiles();
            modelFile.Files = files;
            return modelFile;
        }
    }

namespace StudentAPI.Controllers
{
    [Route("api/ImageAPI/UploadFiles")]
    [ApiController]
    public class ImageAPIController : ControllerBase
    {
        private readonly IImagesFilesRepository imgrepo;
        public ImageAPIController(IImagesFilesRepository imgrepo )
        {
            this.imgrepo = imgrepo;
        }

        [HttpGet]
        public string  GetFiles()
        {
            var imgModel =  imgrepo.GetDriveFiles();
            return "fileupload";
        }

    }
}

Answer 1

If I understand your question, the requirement is not possible due to HTTP fundamentals. In HTTP you can return one stream; content type. The content type can be a file, HTML, JSON, XML etc. It is not possible to return two files streams or a file stream and JSON. You can, however, Base64 encode an image and return the Base64 encoded image as part of a JSON or XML content type. The client must decode the Base64 encoded image.

A basic pattern in Web API is one action returns file information. The data contain whatever data you like along with file IDs or file paths. The client can use the virtual file path to download the image or the client can call another Web API action using the file ID or filename to return a file stream. The following post action example uploads an image and return the image URL that can be used in an image element in a browser based application. The get action accepts a file name and returns a file stream. The two actions are not related and only examples to illustrate these concepts.

    public class FileUploadModel
    {
        public int Id { get; set; }
        public IFormFile File { get; set; }
    }

    [Route("api/[controller]")]
    [ApiController]
    public class FileController : ControllerBase
    {
        private readonly IWebHostEnvironment _webHostEnvironment;
        public FileController(IWebHostEnvironment webHostEnvironment)
        {
            _webHostEnvironment = webHostEnvironment;
        }

        [HttpGet]
        public async Task<IActionResult> Get(string fileName)
        {
            string filePath = System.IO.Path.Combine(_webHostEnvironment.WebRootPath, "images", fileName);
            byte[] buffer = await System.IO.File.ReadAllBytesAsync(filePath);
            return File(buffer, "image/jpg", fileName);
        }

        [HttpPost]
        public async Task<IActionResult> Post([FromForm]FileUploadModel model)
        {
            if (model.File.Length > 0)
            {
                string filePath = System.IO.Path.Combine(_webHostEnvironment.WebRootPath, "images", model.File.FileName);

                using (var stream = System.IO.File.Create(filePath))
                {
                    await model.File.CopyToAsync(stream);
                }
            }
            return Ok(new { fileUrl = $"{this.Request.Scheme}://{this.Request.Host}/images/{model.File.FileName}", id = model.Id });
        }

    }