Open hobbitronics opened 3 years ago
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
.
Have you set a doctype on your local version?
Yes, the index.html has <!DOCTYPE html>
Okay, ehm, the code sandbox is a bust for me?
I'm not sure what you mean it is a bust.
Sorry, It doesn’t run, doesn’t show the FilePond drop area.
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:
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 callinghandleAddFile.
about my project: