Closed Naghal closed 3 years ago
I am not sure if this is a bug or an error on my part, here is the preview: (Tested on chome 91)
How to reproduct: Install filepond 4.27.3 & filepond-plugin-image-preview 4.6.6 Import the packages and css
window.Filepond = require('filepond') import FilePondPluginImagePreview from 'filepond-plugin-image-preview'; Filepond.registerPlugin(FilePondPluginImagePreview);
Include the style in the base layout app.blade.php
app.blade.php
<link rel="stylesheet" href="{{ asset('css/vendor.css') }}"> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <link rel="stylesheet" href="{{ asset('css/vendorcss.css') }}" defer>
Mix via webpack
mix.styles([ nodeModule('select2/dist/css/select2.min.css'), nodeModule('quill/dist/quill.snow.css'), nodeModule('filepond/dist/filepond.min.css'), nodeModule('filepond-plugin-image-preview/dist/filepod-plugin-image-preview.css') ], 'public/css/vendorcss.css');
Add a file input to a bootstrap modal
<div class="modal" tabindex="-1" role="dialog" id="fileDocumentUploadModal"> <form action="/files/{{$file->id}}/documents" method="POST" enctype="multipart/form-data"> <div class="modal-dialog" role="document"> <div class="modal-content" style="width:800px;"> <div class="modal-header"> <h5 class="modal-title">Documents</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> @csrf <input type="file" id="fileDocumentUploadInput" name="documents[]" multiple/> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('common.close')}}</button> <button type="submit" class="btn btn-primary">{{__('common.save')}}</button> </div> </div> </div> </form> </div> <script> $(document).ready(function() { const inputElement = document.querySelector('input[id="fileDocumentUploadInput"]'); const pond = Filepond.create(inputElement, { maxFiles: 5, instantUpload: false, storeAsFile: true, maxFileSize: '5mb', locale: filepond_fr_labels, allowMultiple: true, }); if (window.getCurrentLocale() == 'fr') { pond.setOptions(filepond_fr_labels); } }) </script>
How can I get the preview image to display at the right place inside the filepond container?
It looks like the image preview css file isn’t loaded correctly. Please confirm the styles are actually there.
Yes, there was a typo in myx.styles. Thanks!
myx.styles
I am not sure if this is a bug or an error on my part, here is the preview: (Tested on chome 91)![image](https://user-images.githubusercontent.com/29404633/121380195-acc33280-c912-11eb-9e50-ae58bfddcff9.png)
How to reproduct: Install filepond 4.27.3 & filepond-plugin-image-preview 4.6.6 Import the packages and css
Include the style in the base layout
app.blade.php
Mix via webpack
Add a file input to a bootstrap modal
How can I get the preview image to display at the right place inside the filepond container?