pqina / svelte-filepond

🔌 A handy FilePond adapter component for Svelte
MIT License
247 stars 10 forks source link

how to setOption in svelte-filpond #17

Closed extactspeed closed 1 year ago

extactspeed commented 1 year ago

Hi Pqina, how to set option filepond like this in svelte:

FilePond.setOptions({
    server: {
        process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
            // fieldName is the name of the input field
            // file is the actual file object to send
            const formData = new FormData();
            formData.append(fieldName, file, file.name);

            const request = new XMLHttpRequest();
            request.open('POST', 'url-to-api');

            // Should call the progress method to update the progress to 100% before calling load
            // Setting computable to false switches the loading indicator to infinite mode
            request.upload.onprogress = (e) => {
                progress(e.lengthComputable, e.loaded, e.total);
            };

            // Should call the load method when done and pass the returned server file id
            // this server file id is then used later on when reverting or restoring a file
            // so your server knows which file to return without exposing that info to the client
            request.onload = function () {
                if (request.status >= 200 && request.status < 300) {
                    // the load method accepts either a string (id) or an object
                    load(request.responseText);
                } else {
                    // Can call the error method if something is wrong, should exit after
                    error('oh no');
                }
            };

            request.send(formData);

            // Should expose an abort method so the request can be cancelled
            return {
                abort: () => {
                    // This function is entered if the user has tapped the cancel button
                    request.abort();

                    // Let FilePond know the request has been cancelled
                    abort();
                },
            };
        },
    },
});

I really want to get file name and file type (Blod file in server just have file type) (+page.server.ts)

rikschennink commented 1 year ago

You'd pass it as a prop

    <FilePond bind:this={pond} {name}
        server={ /* your server config here */}
        allowMultiple={true}
        oninit={handleInit}
        onaddfile={handleAddFile}/>