My goal is to upload an image in its max size, and also a 256px wide thumnnail. I have this code:
<script lang="ts">
import type {FirebaseAuthentication} from "@docsndata/firebase-auth";
import {FilePondProcessor} from "./FilePondProcessor";
import {Team} from "@docsndata/model-team";
import {FilePondOptions, ProgressServerConfigFunction} from "filepond";
import * as FilePond from "filepond";
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageResize from 'filepond-plugin-image-resize';
import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
export let firebaseAuth: FirebaseAuthentication;
function init(element: Element) {
FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginImageTransform)
const processor = new FilePondProcessor(new Team('docs-n-data', 'Docs N Data'), firebaseAuth)
function process(fieldName: string, file: File|File[], metadata: { [key: string]: any }, load: (p: string | { [key: string]: any }) => void, error: (errorText: string) => void, progress: ProgressServerConfigFunction): any {
console.log({fieldName, file, metadata})
processor.process(fieldName, file, metadata, load, error, progress)
}
const options: FilePondOptions = {
allowMultiple: true,
imageResizeTargetWidth: 256,
allowImageTransform: true,
allowImageResize: true,
imageTransformVariants: {
thumb_medium_: transforms => {
transforms.resize.size.width = 256;
return transforms;
}
},
server: {process}};
const pond: FilePond = FilePond.create(element)
pond.setOptions(options);
}
</script>
<input type="file" use:init>
file comes to process as an array, so the console.log line results in:
So both images that are passed are 18475 bytes, while the original image is 4MB. So both of these File instances are the thumbnail versions.
So this is my question:
What do I have to do to get both the original max size image passed to process, in addition to the thumbnail?
PS Am fully aware of this identical question, but that author of that question did not reply to the author of Filepond when he asked "have you registered the resize plugin". This question will have my attention all the way to resolution.
