admin管理员组

文章数量:1405546

I'm developing my first Laravel based webapp. I need to upload some file so I decided to use FilePond JavaScript library. I tried to install in my project via npm following the documentation so I did npm i filepond --save to install main library and repeated for some plugins... To use the library the documentations says to import with import * as FilePond from 'filepond'; but where must I write these imports? I wrote in /resources/js/app.js but it doesn't work...

Can anyone explain me how to insert correctly FilePond in a Laravel 6 project?

I'm developing my first Laravel based webapp. I need to upload some file so I decided to use FilePond JavaScript library. I tried to install in my project via npm following the documentation so I did npm i filepond --save to install main library and repeated for some plugins... To use the library the documentations says to import with import * as FilePond from 'filepond'; but where must I write these imports? I wrote in /resources/js/app.js but it doesn't work...

Can anyone explain me how to insert correctly FilePond in a Laravel 6 project?

  • javascript
  • laravel
  • npm
  • file-upload
  • filepond
Share Improve this question asked Jan 28, 2020 at 15:24 icolumbroicolumbro 1235 silver badges17 bronze badges 2
  • Could you plz add your webpack.mix.js file ? – Foued MOUSSI Commented Jan 28, 2020 at 16:04
  • I solved the problem, in my /resources/views/layout/app.blade.php (my main layout file) I had <script src="{{ asset('js/app.js') }}" defer></script> in head section, now moved just before </body> and removed defer. Thank you! – icolumbro Commented Jan 28, 2020 at 16:58
Add a ment  | 

3 Answers 3

Reset to default 8

To install FilePond in Laravel do the following

In /resources/js/app.js import and assign it to global window object as follows:

import * as FilePond from 'filepond';

window.FilePond = FilePond;

To import the styles in /resources/css/main.css:

@import "~filepond/dist/filepond.min.css";

And now anywhere in your blade files you can simply get the FilePond instance.

Example using AlpineJs in blade file.

<div x-data x-init="FilePond.create($refs.input);">
    <input type="file" x-ref="input">
</div>

FilePond is exposed as a module wrapped in a UMD. It can be added to a project using Node Package Manager, from a CDN or by adding the files manually.

From a CDN

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


<!--
The classic file input element we'll enhance to a file pond
-->
<input type="file" 
       class="filepond"
       name="filepond"
       multiple
       data-max-file-size="3MB"
       data-max-files="3" />


<!-- add before </body> -->
<script src="https://unpkg./filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>

<script src="https://unpkg./filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>

<script src="https://unpkg./filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>

<script src="https://unpkg./filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>

<script src="https://unpkg./filepond/dist/filepond.min.js"></script>

/*
If you want to preview images, you need to register the Image Preview plugin
*/
<script>
FilePond.registerPlugin(

    // encodes the file as base64 data
  FilePondPluginFileEncode,

    // validates the size of the file
    FilePondPluginFileValidateSize,

    // corrects mobile image orientation
    FilePondPluginImageExifOrientation,

    // previews dropped images
  FilePondPluginImagePreview
);

// Select the file input and use create() to turn it into a pond
FilePond.create(
    document.querySelector("input[name='filepond']")
);
</script>

In /resources/js/app.js I have:

import * as FilePond from 'filepond';

require('./bootstrap');

$(document).ready(function () {
    // executes when HTML-Document is loaded and DOM is ready
    console.log("Hi 

                本文标签：
                javascriptInstall FilePond in a Laravel projecthowStack Overflow

                        版权声明：本文标题：javascript - Install FilePond in a Laravel project, how? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://www.betaflare.com/web/1744328028a2600822.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。