Установить FilePond в Laravel проекте, как? - PullRequest
Новая
       49

Установить FilePond в Laravel проекте, как?

0 голосов
/ 28 января 2020

Я разрабатываю свое первое веб-приложение на основе Laravel. Мне нужно загрузить какой-нибудь файл, поэтому я решил использовать библиотеку FilePond JavaScript. Я попытался установить в своем проекте через npm, следуя документации , поэтому я сделал npm i filepond --save, чтобы установить основную библиотеку, и повторил для некоторых плагинов ... Чтобы использовать библиотеку, в документации сказано, что импортировать с import * as FilePond from 'filepond'; но где я должен написать этот импорт? Я написал в /resources/js/app.js, но он не работает ...

Может кто-нибудь объяснить мне, как правильно вставить FilePond в Laravel 6 проект?

Ответы [ 2 ]

0 голосов
/ 28 января 2020

FilePond представляет собой модуль, заключенный в UMD. Его можно добавить в проект с помощью Node Package Manager, из CDN или путем добавления файлов вручную.

Из CDN 

<!-- add in <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet">
<link href="https://unpkg.com/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.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>

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

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

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

<script src="https://unpkg.com/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>
0 голосов
/ 28 января 2020

В /resources/js/app.js У меня есть: 

import * as FilePond from 'filepond';

require('./bootstrap');

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

    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement);
});

В /resources/sass/app.scss У меня есть: 

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~filepond/dist/filepond.min.css';

В моем welcome.blade.php я просто добавил тег ввода файла без фактическая обработка формы: 

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}">
                {{ config('app.name', 'Laravel') }}
            </a>
        </div>
    </nav>

    <input type="file">

</div>
</body>
</html>

После запуска npm run dev и загрузки моего демонстрационного сайта я получаю то, что ожидал.

drag and drop screenshot

Ознакомьтесь с документами по Laravel Mix для более подробной информации: https://laravel.com/docs/6.x/mix#working -with-scripts

...