images on ftp server

[Walter Martin]

Is it possible to use the Carousel to show the images from a folder in a ftp server ?

[Ashokkumar Karuppasamy]

Hi Walter Martin,

We can load the images using URLs. We suggest getting the images and setting the image URL in the carousel sample to meet your requirements. We have attached some reference FTP server details below. Please try this solution and let us know if you need any further assistance.

UG: https://blazor.syncfusion.com/documentation/carousel/animations-and-transitions

https://w3schools.invisionzone.com/topic/58077-how-can-i-get-right-image-src-code-from-ftp-server/

https://stackoverflow.com/questions/14396744/asp-net-image-source-from-ftp-address

Regards,
Ashok

[Walter Martin]

I guess something is not clear to me

How can I reach the images inside a ftp server using the http protocol?

The ftp server has username and password to get in 

I don't want to copy the images in a web server to browse them using http, they are in a lot of folders

Is there something I don't know or any workaround ?

If I use your  SfFileManager I can browse the ftp content but is there a way to combine the filemanager and the carousel 

[Swathi Ravi]

Hi Walter,

 

You can read the image in the backend, convert it into a base64 string, and then pass that converted string to the carousel. We have converted the image to a base64 string from the wwwroot folder. You can use paths obtained from the backend. Please check our shared sample for a better understanding.

 [index.razor]

<div class="control-container">

    <SfCarousel>

        <CarouselItem>

            <figure class="img-container">

                <img src="@($"data:image/jpeg;base64,{base64Bridge}")" alt="Golden Gate Bridge, San Francisco" style="height:100%;width:100%;" />

                <figcaption class="img-caption">Golden Gate Bridge, San Francisco</figcaption>

            </figure>

        </CarouselItem>

        ////remaining items

    </SfCarousel>

</div>

 

@code {

    string base64Bridge;

    string base64Trees;

    string base64Waterfall;

    string base64Sea;

    string base64Rocks;

 

    protected override void OnInitialized()

    {

        base64Bridge = ImageToBase64("images/bridge.jpg");

        base64Trees = ImageToBase64("images/trees.jpg");

        base64Waterfall = ImageToBase64("images/waterfall.jpg");

        base64Sea = ImageToBase64("images/sea.jpg");

        base64Rocks = ImageToBase64("images/rocks.jpg");

    }

 

    public string ImageToBase64(string imagePath)

    {

        string wwwrootPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot");

        string fullPath = Path.Combine(wwwrootPath, imagePath.TrimStart('/').Replace('/', '\\'));

        byte[] imageBytes = File.ReadAllBytes(fullPath);

        string base64String = Convert.ToBase64String(imageBytes);

        return base64String;

    }

}

Sample: Attached as a zip file.

Regards,

Swathi Ravi 

Attachment: blazorcarouselimagebase64_6c764daf.zip