tapp/blade-uppy

Laravel 的 Uppy Blade 组件

维护者

详情

github.com/TappNetwork/blade-uppy

主页

源代码

问题

安装: 7

依赖项: 0

建议者: 0

安全: 0

星星: 3

关注者: 3

分支: 1

开放问题: 0

v0.2 2023-07-19 02:53 UTC

Requires

Requires (Dev)

MIT 5a8f5d1b2365b22755b8a459413aa1ef1334dfd6

  • Tapp Network <steve.woop@tappnetwork.com>
  • Tapp Network <andreia.bohner.woop@tappnetwork.com>

s3uploadcomponentuploadertransloaditbladexhrtusuppytapp networklaravel-blades3-multipartmultipart upload

This package is auto-updated.

Last update: 2024-09-19 05:28:38 UTC

README

此包为 Laravel Blade 视图添加了 Uppy 的 Blade 组件。

安装

通过 Composer 安装包

composer require tapp/blade-uppy

添加所需的 JS 库

在您的 package.json 文件中添加 AlpineJS 库和所有您需要的 Uppy 库（或根据 Uppy 网站文档直接安装它们）

...
"devDependencies": {
    "alpinejs": "^3.11.1",
    ...
    },
    "dependencies": {
    "@uppy/aws-s3-multipart": "^3.1.2",
    "@uppy/core": "^3.0.5",
    "@uppy/drag-drop": "^3.0.1",
    "@uppy/status-bar": "^3.0.1"
    ...
}
...

在您的 resources/js/bootstrap.js 文件中添加 Uppy 库

...

require('@uppy/core/dist/style.min.css')
require('@uppy/drag-drop/dist/style.min.css')
require('@uppy/status-bar/dist/style.min.css')

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
import StatusBar from '@uppy/status-bar'
import AwsS3Multipart from '@uppy/aws-s3-multipart'

window.Uppy = Uppy
window.DragDrop = DragDrop
window.StatusBar = StatusBar
window.AwsS3Multipart = AwsS3Multipart

在您的 resources/js/app.js 中添加

...
import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

安装 JS 库

使用 Mix

npm install
npm run dev

使用 Vite

npm install
npm run build

如果您喜欢，可以使用 CDN 为 Uppy 和 AlpineJS

发布配置文件（可选）

使用以下方式发布配置文件

php artisan vendor:publish --tag=blade-uppy-config

已发布的配置文件包含加载为组件的 Uppy 事件

return [
    'events' => [
        'cancel-all',
        'complete',
        'dashboard-file-edit-complete',
        'dashboard-file-edit-start',
        'dashboard-modal-closed',
        'dashboard-modal-open',
        'error',
        'file-added',
        'file-editor-cancel',
        'file-editor-complete',
        'file-editor-start',
        'file-removed',
        'files-added',
        'info-hidden',
        'info-visible',
        'postprocess-progress',
        'preprocces-progress',
        'progress',
        'reset-progress',
        'restriction-failed',
        'retry-all',
        'thumbnail-generated',
        'upload-error',
        'upload-progress',
        'upload-retry',
        'upload-stalled',
        'upload-success',
        'upload',
    ],
];

发布视图文件（可选）

php artisan vendor:publish --tag=blade-uppy-views

用法

Uppy 上传器作为 Blade 组件可用

  • AWS S3 <x-input.uppy.s3>
  • AWS S3 分片 <x-input.uppy.s3-multipart>
  • XHR <x-input.uppy.xhr>
  • Tus <x-input.uppy.tus>
  • Transloadit <x-input.uppy.transloadit>

这是组件结构（以 s3 Blade 组件为例，但 s3-multipart、xhr、tus 和 transloadit 也是如此）

<x-input.uppy.s3
    attribute="attribute value"
    ...
>

    <!-- here in the component body, you can define the HTML to be used -->

</x-input.uppy.s3>

应使用的 UI（dashboard 或 drag-drop）可以用 ui 属性定义，UI 选项可以用 uiOptions 属性定义

<x-input.uppy.s3
    ui="drag-drop"
    uiOptions="{ target: '.upload' }"
    ...
>

可以使用 plugins 数组属性添加任何插件，其中键是插件名称，值是插件选项

@php
    $plugins = [
        'StatusBar' => "{ target: '.upload', hideAfterFinish: false }",
    ];
@endphp

<x-input.uppy.s3
    :plugins="$plugins"
    ...
>

可以使用 events 数组属性添加任何事件，其中键是事件名称，值是事件代码

@php
    $plugins = [
        'StatusBar' => "{ target: '.upload', hideAfterFinish: false }",
    ];
@endphp

<x-input.uppy.s3
    :events="$events"
    ...
>

如果您需要添加额外的 JS 代码，请使用 extraJs 属性

<x-input.uppy.s3
    extraJs="your JS code here"
    ...
>

上传器

S3

将 input.uppy.s3 Blade 组件添加到您的 Blade 视图中

<x-input.uppy.s3
    ui="dashboard"
    uiOptions="{ inline: true, target: '#uppy-dashboard'}"
>

    <div id="uppy-dashboard">
    </div>

</x-input.uppy.s3>

S3 分片

将 input.uppy.s3-multipart Blade 组件添加到您的 Blade 视图中。例如，使用仪表板 UI

<x-input.uppy.s3-multipart
    uiOptions="{ inline: true, target: '#uppy-dashboard'}"
    audio="{ target: Dashboard }"
    instanceName="file"
>

    <div id="uppy-dashboard">
    </div>

</x-input.uppy.s3-multipart>

XHR

将 input.uppy.xhr Blade 组件添加到您的 Blade 视图中。例如，使用拖放 UI

@php
$events = [
    'upload-success' => "
        const url = response.uploadURL;
        const fileName = file.name;
        const aleatorio = 1;

        const uploadedFileData = JSON.stringify(response.body);

        const li = document.createElement('li');
        const a = document.createElement('a');
        a.href = url;
        a.target = '_blank';
        a.appendChild(document.createTextNode(fileName));
        li.appendChild(a);

        document.querySelector('.upload .uploaded-files ol').appendChild(li);

        var inputElementUrlUploadFile = document.getElementById('file2');
        inputElementUrlUploadFile.value = url;
        inputElementUrlUploadFile.dispatchEvent(new Event('input'));
    ",
];

$plugins = [
    'StatusBar' => "{ target: '.upload .for-ProgressBar', hideAfterFinish: false }",
];
@endphp

<div class="flex items-center">
    <input type="hidden" name="file" id="file" />

    <x-input.uppy.xhr
        ui="drag-drop"
        uiOptions="{ target: '.upload .for-ProgressBar' }"
        :events="$events"
        :plugins="$plugins"
    >

        <section class="upload">
            <div class="for-DragDrop" x-ref="input"></div>

            <div class="for-ProgressBar"></div>

            <div id="progress-bar"></div>

            <div class="uploaded-files">
                <h5>{{ __('Uploaded file:') }}</h5>
                <ol></ol>
            </div>
        </section>

    </x-input.uppy.xhr>
</div>

Tus

将 input.uppy.tus Blade 组件添加到您的 Blade 视图中

<x-input.uppy.tus
    uiOptions="{ inline: true, target: '#uppy-dashboard'}"
>

    <div id="uppy-dashboard">
    </div>

</x-input.uppy.tus>

Transloadit

将 input.uppy.transloadit Blade 组件添加到您的 Blade 视图中

<x-input.uppy.transloadit
    uiOptions="{ inline: true, target: '#uppy-dashboard'}"
>

    <div id="uppy-dashboard">
    </div>

</x-input.uppy.transloadit>

每个组件的可用属性

Uppy 实例名称

使用 instanceName 属性定义 Uppy 实例名称。

默认值：uppyUpload

核心选项

核心 Uppy 选项使用 coreOptions 属性定义。

默认值

{
    debug: true,
    autoProceed: true,
    allowMultipleUploads: false,
}

上传器选项

可以使用 uploaderOptions 属性定义。

默认值

{
    companionUrl: '/',
    companionHeaders:
    {
        'X-CSRF-TOKEN': window.csrfToken,
    },
}

用户界面

ui 属性

定义应使用的用户界面（UI）（仪表板或拖放）。可能的值

  • dashboard
  • drag-drop

例如：

ui="dashboard"

默认值：dashboard

uiOptions 属性

您可以通过 uiOptions 属性传递 Uppy UI JS 选项。

例如：

uiOptions="{ target: '.upload .for-ProgressBar' }"

默认值：{}

文档

仪表板示例

@php
    $plugins = [
        'Audio' => "{ target: Dashboard }",
    ];
@endphp

<x-input.uppy.s3-multipart
    ui="dashboard"
    uiOptions="{ inline: true, target: '#uppy-dashboard'}"
    instanceName="file"
    :plugins="$plugins"
>

    <div id="uppy-dashboard">
    </div>

</x-input.uppy.s3-multipart>

拖放示例

@php
    $plugins = [
        'StatusBar' => "{ target: '.upload .for-ProgressBar', hideAfterFinish: false }",
    ];
@endphp

<x-input.uppy.s3
    ui="drag-drop"
    coreOptions="{
        debug: true,
        autoProceed: true,
        allowMultipleUploads: false,
    }"
    uiOptions="{ target: '.upload .for-ProgressBar' }"
    :plugins="$plugins"
>

    <section class="upload">
        <div class="for-DragDrop" x-ref="input"></div>

        <div class="for-ProgressBar"></div>

        <div class="uploaded-files">
            <h5>{{ __('Uploaded file:') }}</h5>
            <ol></ol>
        </div>
    </section>

</x-input.uppy.s3>

插件

用户界面元素

可以使用plugins属性关联数组来添加UI元素，其中键应该是UI元素的相同名称（例如，StatusBar元素的键是StatusBar），值是要传递给UI元素的JS选项。

UI元素插件

  • 状态栏
  • 进度条
  • 拖拽目标
  • 通知器
  • 图像编辑器
  • 缩略图生成器

例如：

@php
    $plugins = [
        'StatusBar' => "{ target: '.upload .for-ProgressBar', hideAfterFinish: false }",
    ];
@endphp

<x-input.uppy.s3-multipart
    ...
    :plugins="$plugins"
>
    ...

源

使用plugins属性关联数组定义用于上传的源。

源插件

  • 网络摄像头
  • 音频
  • 屏幕捕获

例如：

@php
    $plugins = [
        'Audio' => "{  target: '#dashboard' }",
    ];
@endphp

<x-input.uppy.s3-multipart
    ...
    :plugins="$plugins"
>
    ...

其他

可以使用组件的plugins属性关联数组添加其他其他插件。

其他插件

  • 金毛猎犬
  • 压缩器
  • 区域设置
  • 表单

例如，要使用GoldenRetriever（uppy.use(GoldenRetriever, { serviceWorker: false })）和Compressor（uppy.use(Compressor, { quality: 0.6 })）插件

@php
$plugins = [
    'GoldenRetriever' => "{ serviceWorker: false }",
    'Compressor' => "{ quality: 0.6 }",
];
@endphp

<x-input.uppy.s3-multipart
    ...
    :plugins="$plugins"
>
    ...
</x-input.uppy.s3-multipart>

事件

将事件定义为PHP属性关联数组（键是事件名称，值是事件的JS内容），然后传递给events属性。

@php
$events = [
    'upload-success' => "
        const url = response.uploadURL;
        const fileName = file.name;
        const aleatorio = 1;

        const uploadedFileData = JSON.stringify(response.body);

        const li = document.createElement('li');
        const a = document.createElement('a');
        a.href = url;
        a.target = '_blank';
        a.appendChild(document.createTextNode(fileName));
        li.appendChild(a);

        document.querySelector('.upload .uploaded-files ol').appendChild(li);

        var inputElementUrlUploadFile = document.getElementById('file2');
        inputElementUrlUploadFile.value = url;
        inputElementUrlUploadFile.dispatchEvent(new Event('input'));
    ",
];
@endphp

<x-input.uppy.s3
    ...
    :events="$events"
>
    ...
</x-input.uppy.s3>

添加额外的JS代码

可以使用extraJs属性添加一些额外的JS代码。

变更日志

请参阅变更日志以获取有关最近更改的更多信息。

贡献

请参阅贡献指南以获取详细信息。

安全漏洞

如果您发现任何与安全相关的问题，请通过电子邮件security@tappnetwork.com联系。

鸣谢

本软件包中使用的库

许可

MIT许可（MIT）。请参阅许可文件以获取更多信息。