Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag and drop not working #7

Open
hobbitronics opened this issue May 6, 2021 · 14 comments
Open

Drag and drop not working #7

hobbitronics opened this issue May 6, 2021 · 14 comments

Comments

@hobbitronics
Copy link

hobbitronics commented May 6, 2021

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"
    )
@rikschennink
Copy link
Collaborator

Hi, can you create a test case on codesandbox.io, happy to take a quick look

@hobbitronics
Copy link
Author

For some reason it works in the sandbox but not when I run it locally with npm run dev.

https://codesandbox.io/s/0cu8u

@rikschennink
Copy link
Collaborator

Have you set a doctype on your local version?

@hobbitronics
Copy link
Author

hobbitronics commented May 7, 2021

Yes, the index.html has <!DOCTYPE html>

@rikschennink
Copy link
Collaborator

Okay, ehm, the code sandbox is a bust for me?

@hobbitronics
Copy link
Author

I'm not sure what you mean it is a bust.

@rikschennink
Copy link
Collaborator

Sorry, It doesn’t run, doesn’t show the FilePond drop area.

@PlkMarudny
Copy link

PlkMarudny commented Jun 3, 2021

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.

@PlkMarudny
Copy link

PlkMarudny commented Jun 6, 2021

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
	}
};

@rikschennink
Copy link
Collaborator

@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.

@zadamg
Copy link

zadamg commented Jul 20, 2023

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 =/.

image

@hobbitronics
Copy link
Author

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.

@zadamg
Copy link

zadamg commented Jul 20, 2023

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.

@rikschennink
Copy link
Collaborator

Maybe these Pintura example projects can help, they both include a FilePond integration:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants