PHP code example of tapp / blade-uppy

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

tapp / blade-uppy example snippets

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

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

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

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

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

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

@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>

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

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

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

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

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

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

html
@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>