search

pqina / filepond

🌊 A flexible and fun JavaScript file upload library
https://pqina.nl/filepond
MIT License
15.16k stars 825 forks source link

Vue and FilePond styling issue #129

Closed fabianPas closed 6 years ago

fabianPas commented 6 years ago

Summary

I've been using FilePond in my backend application since a few days. I first used FilePond without any adapter which worked perfectly including the FilePreviewPlugin. As I'm using Laravel I wanted to implement FilePond using Vue.js and after implementation the styling showed a few errors as can be seen here.

The file preview is not centered and the button to remove the file is aligned to the left. When the plugin is removed, the remove button is still aligned to the left. No other plugins are installed.

How to reproduce

Implement FilePond using Vue.js.

Expected behaviour

A centered preview image and a removal button aligned to the right next to e.g. 'Upload Complete'.

Environment Version
OS Windows 10
Device Desktop
Browser Chrome Version 69.0.3497.100 (Official Build) (64-bit)
rikschennink commented 6 years ago

Hi!

Are you using the vue-filepond adapter?

With version 3.0.0 of FilePond some styles have been updated, are you sure you have version 3.0.0 CSS files and have cleared the browser cache?

fabianPas commented 6 years ago

I am using the vue-filepond adapter with the following CSS files in my view:

<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">   
<link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">

I've emptied the cache without results. I'm developing with caching disabled, so it shouldn't be a problem.

rikschennink commented 6 years ago

I think because the FilePond dependency within the adapter has not yet been updated but you're using the unpk url's you're mixing versions.

This should install the latest version of FilePond.

npm install filepond@latest
fabianPas commented 6 years ago

I've run the npm install command but nothing has changed. Am I supposed to use the CSS files from the dist directory instead of the unpkg.com urls?

rikschennink commented 6 years ago

Either that or lock the unpkg.com urls to an earlier major version.

https://unpkg.com/filepond@^2/dist/filepond.min.css
https://unpkg.com/filepond-plugin-image-preview@^2/dist/filepond-plugin-image-preview.min.css
fabianPas commented 6 years ago

Using the locks you provided the remove button is back at it's position, the preview image is still not centered. Also, using the CSS files from the dist directory does not seem to fix the issues described.

rikschennink commented 6 years ago

Are you using version 2.x of FilePond or 3.x? As in, is the filepond npm package still at 3.x or have you reverted to 2.x as well?

fabianPas commented 6 years ago

You got me there. I forgot to revert the npm packages to 2.x. It works with 2.x now! But can we confirm there is something weird going on using Filepond 3.x?

rikschennink commented 6 years ago

Fantastic!

I'll test the vue-filepond adapter with v3 in the coming days. Will update here.

rikschennink commented 6 years ago

Package has been updated to v3