How do I get the result of appying plugins as stream?

[AgentTheGreat]

Hello, I'm trying to use this library to apply resizing and conversion of all image files to image/jpeg. The FilePond does provide GetStreamForFile but that doesn't seem to return the transformed files...it returns only the original files.

Is there a standard way to get the result of applying FilePond plugins as a stream? There doesn't seem to be documentation or any suggestion in the code as to how that's supposed to be done.

[soenneker]

Hi @AgentTheGreat

Am I understanding you that you're using a filepond plugin to do modifications, but when you get the stream it's just the original file without any modifications? Can you show me a replication ? Feel free to fork and create a new page in the demo, if that's helpful.

[AgentTheGreat]

That is correct. I can show you a simple way to demonstrate this. This is what I'm doing and it can be tested on any of the demo pages:

    private readonly FilePondOptions _options = new()
    {
        AllowMultiple = false,
        EnabledPlugins = [FilePondPluginType.ImageResize, FilePondPluginType.ImageTransform, FilePondPluginType.FileValidateType],
        AllowImageResize = true,
        AllowImageTransform = true,
        AllowFileTypeValidation = true,
        AcceptedFileTypes = ["image/*"],
        ImageResizeTargetWidth = 100,
        ImageTransformOutputMimeType = "image/jpeg"
    };

    private string _streamLength;

    private void OnInit()
    {
        Logger.LogInformation("FilePond initialized");
    }

    private async Task GetStreamForTransformedFile()
    {
        Stream? result = await FilePond!.GetStreamForFile(0);
        _streamLength = result!.Length.ToString();
    }

And you can see the size of the stream is always the size of the original file. I've stored and checked the content and it is in fact the original file, unless I've completely missed how I'm supposed to use the plugins.

[soenneker]

@AgentTheGreat Thanks for the code. I believe I've addressed your issue in the latest deploy. I've also created a demo page for image transformations. Give it a try, let me know.

[AgentTheGreat]

@soenneker Thanks for the change and it works for one file, I wanted to point out that getting the transformed stream for more than 1 file in a loop still seems problematic, as I described in the separate comment below.

[AgentTheGreat]

Nice, now there is actually a way to get the transformed file. However, it seems to only work for the first file. In the following:

        foreach (var file in filePond!.Files) {
            var stream = await filePond!.GetStreamForFile(file.Id);
            media.Add(stream);
        }

When we get to GetStreamForFile, the following line just...gets stuck and never returns for the 2nd file:

            // First check if the file has content (non-zero size)
            var hasContent = await JsRuntime.InvokeAsync<bool>($"{nameof(FilePondInterop)}.hasFileContent", cancellationToken, elementId, query);

I don't see any exceptions logged, and the browser console doesn't indicate anything either. I can't pinpoint why this JS invocation never completes for the 2nd file.

P.S. it looks like the SignalR connection breaks when attempting the JS invocation for the 2nd file.

[soenneker]

@AgentTheGreat Use GetAllStreams() or GetAllStreamsForFiles() instead of iterating.. I made some improvements to both of those; I added a demo page for this too. Give it a try, thanks.

[AgentTheGreat]

@AgentTheGreat Use GetAllStreams() or GetAllStreamsForFiles() instead of iterating.. I made some improvements to both of those; I added a demo page for this too. Give it a try, thanks.

@soenneker
I'm back working on this project. It looks like you've fixed GetAllStreams for Blazor WebAssembly, but that method is failing for the server counterpart which is what I'm using.
My suspicion is the SignalR message size is being violated because in your implementation of getFilesAsBlobsSequential you're no longer returning Blob objects that translate to streams on the server side but rather new Uint8Array filled with the data from the blob. As it is obvious, I'm not good at JS side of things at all though!

[AgentTheGreat]

It would be a good idea to add:

<button @onclick="GetStreamsForFiles">GetStreamsForFiles</button>
.
.
.
private async Task GetStreamsForFiles()
{
    var streams = await FilePond!.GetAllStreams();
    streams!.ForEach(async void (stream) => await stream.DisposeAsync());
}

to soenneker.blazor.filepond/test/Soenneker.Blazor.FilePond.Server/Pages/Index.razor and test.

[soenneker]

@AgentTheGreat give it a try now, pushed an update. If you still run into it, you may need to increase max file limit with your signalr connections.