svelte-filepond
svelte-filepond copied to clipboard
pqina
Drag and drop not working
I installed fishpond to a svelte template, but when I try dragging and dropping a file nothing happens. Clicking on the component however seems to work and allows me to select a file.
To Reproduce
Create a svelte app using the svelte-template and then install svelte-filepond per the readme.
Expected behavior
Dragging and dropping a file from my desktop to the fishpond component should start the on onaddfile event calling handleAddFile.
about my project:
- Your browser and the version: (ChromeVersion 90.0.4430.93 (Official Build) (x86_64))
- Your operating system: (MacOS 10.15.7)
- FilePond version ( "filepond": "^4.27.1", "filepond-plugin-image-exif-orientation": "^1.0.11", "filepond-plugin-image-preview": "^4.6.6", "svelte-filepond": "^0.0.1" )
Hi, can you create a test case on codesandbox.io, happy to take a quick look
For some reason it works in the sandbox but not when I run it locally with npm run dev.
https://codesandbox.io/s/0cu8u
It does not working for me either locally (build with Rollup). On Svelte REPL it works, however. What I noticed, the DataTransfer.files list is empty.
This seems to be an issue with... I do not know, actually. Here there is a simple example of setting up Filepond in the simplest form possible. It works REPL, but not wehn build locally, from the project scaffolded with npx degit sveltejs/template my-svelte-project and all the packages updated to the latest versions. No drag and drop when run with npm run dev.
But it look slike Rollup.js is messing around. Just build the same application using Snowpack, and d'n'd works as expected.
rollup.js.config file for reference:
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import externalGlobals from "rollup-plugin-external-globals";
import css from 'rollup-plugin-css-only';
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
process.on('SIGTERM', toExit);
process.on('exit', toExit);
}
};
}
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js',
},
plugins: [
svelte({
compilerOptions: {
// enable run-time checks when not in production
dev: !production
}
}),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
externalGlobals({
FilePondPluginImageValidateSize: "FilePondPluginImageValidateSize"
}),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
@PlkMarudny @hobbitronics
I just updated the svelte-filepond/example project, it seems that it had an error in it.
Please note that you need to set up post-css and sveltePreprocess to import the node_modules css files for FilePond.
Is this still true? Svelte uses Vite now. I tried to follow the example with post-css (updating the svelte.config.js instead), but unsuccessful, so no styles =/.
zadamg
You must be referring to Svelte-kit using Vite. I still maintain some Svelte projects using rollup.js, but I haven't tried this with Svelte-kit. In the end I made my own component.
You must be referring to Svelte-kit using Vite. I still maintain some Svelte projects using rollup.js, but I haven't tried this with Svelte-kit. In the end I made my own component.
Oh you're 100% right; I'm dumb. I was conflating svelte and its kit. Bummer. I mean, the CSS for the dropper is literally in the package, so is it not possible to just... change how the svelte.config.js is? I tried to add postcss: truee to my vitePreprocess, but admittedly, I don't know what I'm doing haha.
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: [
vitePreprocess({
postcss: true,
}),
],
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter(),
// hydrate the <div id="svelte"> element in src/app.html
},
}
export default config;
This is a lovely package though! Appreciate that it exists.
Maybe these Pintura example projects can help, they both include a FilePond integration:
- https://github.com/pqina/pintura-example-sveltekit
- https://github.com/pqina/pintura-example-svelte