CODEWITHSUNDEEP
asynchronousaureliaaurelia-fetch-client
Tom Aalbers
Tom Aalbers

Reputation: 4914

Aurelia: How to handle a async request in a view?

I have a dotnet core api that returns a FileContentResult..

return new FileContentResult(bytes, contentType)
{
    FileDownloadName = Path.GetFileName(request.Filename)
};

Via postman I can read out the image perfectly fine. Now I want to read the image, via the aurelia fetch client, and show it in my html view. This is my function to retrieve the image from the api.

public image(filename: string) {
    return this.http.fetch(AppConfiguration.base_url + 'assets/image',
        {
            method: 'post',
            body: json({
                filename: filename
            })
        });
}

I've tried to convert the blob in the response with this value converter. But I can't get that to work

Converter:

export class BlobToUrlValueConverter {
    public toView(blob) {
        return URL.createObjectURL(blob);
    }
}

Viewmodel:

export class Dashboard {

    public blob: any;

    constructor(
        public assets_service: AssetsService
    ) { }

    async attached() {
        let response = await this.assets_service.image('test.png');
        this.blob = response.blob();
    }
 }

View

<div if.bind="blob">
   ${ blob | blobToUrl }
</div>

I'm not sure this is the right approach. Also not sure how handle the async request part of it either. What is the best way to get that image response to show in the html view? Lets say via a img tag?

Upvotes: 1

Views: 1375

Answers (1)

Tom Aalbers
Tom Aalbers

Reputation: 4914

I was close. Here is how I got the image to show.

Viewmodel:

export class Dashboard {

    public url: string;

    constructor(
        public assets_service: AssetsService
    ) { }

    async attached() {
        let blob = await this.assets_service.image('test.png')
            .then(response => response.blob());
        this.url = URL.createObjectURL(blob);
    }
 }

View:

<div if.bind="url">
    <img src.bind="url">
</div>

EDIT:

Found a better solution using parts written above:

The exported function that does the call (for reusability on both ts and html sides):

export function image_request(filename: string): Promise<Response> {
    let http = new Http();
    return http.fetch(<your-url-that-fetches-the-image>,
        {
            method: 'post',
            body: json({
                filename: filename
            })
        });
}

Value converter that uses above function

import { image_request } from './AssetsRequests';

export class ImageRequestValueConverter {
    public toView(filename: string) {   
        return image_request(filename);
    }
}

The important and most awesome part of the solution. Many thanks to http://www.sobell.net/aurelia-async-bindings/ for getting me on my way. You can override the binding behaviour. You can use this override to process async Promise in a view in combination with a value converter.

export class AsyncImageBindingBehavior {

    public bind(binding, source): void {
        binding.originalupdateTarget = binding.updateTarget;
        binding.updateTarget = (target) => {
            // When we have a promise
            if (typeof target.then === 'function') {
            // Set temp value to loading so we know its loading
            binding.originalupdateTarget('Loading...');  
            // Process the promise 
            target
                .then(response => response.blob())
                .then(blob => binding.originalupdateTarget(
                    URL.createObjectURL(blob)
                ));
            }
            else {
                binding.originalupdateTarget(target);
            }
        };
    }

    unbind(binding) {
        binding.updateTarget = binding.originalupdateTarget;
        binding.originalupdateTarget = null;
    }
}

Finally the view is very simple

 <img src="${ 'test.png' | imageRequest & asyncImage }">

Upvotes: 5

Related Questions