PHPackages tapp/blade-uppy - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. tapp/blade-uppy ActiveLibrary[Templating & Views](/categories/templating) tapp/blade-uppy =============== Uppy Blade components for Laravel v0.3(1y ago)31601MITPHPPHP ^7.4|^8.0 Since Jul 14Pushed 1y ago4 watchersCompare [ Source](https://github.com/TappNetwork/blade-uppy)[ Packagist](https://packagist.org/packages/tapp/blade-uppy)[ Docs](https://github.com/TappNetwork/blade-uppy)[ RSS](/packages/tapp-blade-uppy/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (9)Versions (5)Used By (0) Uppy blade ========== [](#uppy-blade) This package adds Blade components for [Uppy](https://uppy.io/docs) to use in your Laravel Blade views. Installation ------------ [](#installation) ### Install the package via Composer [](#install-the-package-via-composer) ``` composer require tapp/blade-uppy ``` ### Add required JS libraries [](#add-required-js-libraries) Add in your `package.json` file the AlpineJS library and all the Uppy libraries you need (or install them directly according to the Uppy site doc): ``` ... "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" ... } ... ``` Add the Uppy libraries in your `resources/js/bootstrap.js` file: ``` ... 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 ``` Add in your `resources/js/app.js`: ``` ... import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start(); ``` Install the JS libraries: using Mix: ``` npm install npm run dev ``` using Vite: ``` npm install npm run build ``` > You can use CDNs for [Uppy](https://uppy.io/docs/#With-a-script-tag) and [AlpineJS](https://github.com/alpinejs/alpine), if you prefer. ### Publish config file (optional) [](#publish-config-file-optional) Publish the config file with: ``` php artisan vendor:publish --tag=blade-uppy-config ``` The published config file contains the Uppy events that are loaded as components: ``` 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', ], ]; ``` ### Publish view files (optional) [](#publish-view-files-optional) ``` php artisan vendor:publish --tag=blade-uppy-views ``` Usage ----- [](#usage) Uppy uploaders are available as Blade components: - AWS S3 `` - AWS S3 Multipart `` - XHR `` - Tus `` - Transloadit `` This is the component skeleton (using the `s3` blade component as an example, but it's the same for `s3-multipart`, `xhr`, `tus`, and `transloadit`): ``` ``` The UI that should be used (`dashboard` or `drag-drop`) can be defined with the `ui` attribute and UI options with `uiOptions` attribute: ``` ``` Any plugin can be added using the `plugins` array attribute, where the key is the plugin name and the value is the plugin options: ``` @php $plugins = [ 'StatusBar' => "{ target: '.upload', hideAfterFinish: false }", ]; @endphp ``` Add any event using the `events` array attribute, where the key is the event name and the value is the event code: ``` @php $plugins = [ 'StatusBar' => "{ target: '.upload', hideAfterFinish: false }", ]; @endphp ``` If you need to add extra JS code, use the `extraJs` attribute: ``` ``` Uploaders --------- [](#uploaders) ### S3 [](#s3) Add the `input.uppy.s3` blade component to your blade view: ```         ``` ### S3 Multipart [](#s3-multipart) Add the `input.uppy.s3-multipart` blade component to your blade view. E.g. using the Dashboard UI: ```         ``` ### XHR [](#xhr) Add the `input.uppy.xhr` blade component to your blade view. E.g. using the Drag and Drop 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 {{ __('Uploaded file:') }} ``` ### Tus [](#tus) Add the `input.uppy.tus` blade component to your blade view: ```         ``` ### Transloadit [](#transloadit) Add the `input.uppy.transloadit` blade component to your blade view: ```         ``` Available attributes for each component: ---------------------------------------- [](#available-attributes-for-each-component) AttributeDescriptionDefault valueinstanceNameUppy instance nameuppyUploadcoreOptionsCore Uppy instance options{}uploaderOptionsOptions used by uploader{}uiUI for upload (dashboard or drag-drop)dashboarduiOptionsOptions that should be passed to the UI{}:eventsPHP array with the Uppy events (keys are event names, values are event code)\[\]:pluginsPHP array with the Uppy plugins (keys are plugin name, values are plugin options)\[\]extraJsExtra JS code''### Uppy instance name [](#uppy-instance-name) Use the `instanceName` attribute to define the Uppy instance name. Default: `uppyUpload` ### Core Options [](#core-options) Core Uppy options are defined with the `coreOptions` attribute. Default: ``` { debug: true, autoProceed: true, allowMultipleUploads: false, } ``` ### Uploader Options [](#uploader-options) Can be defined using `uploaderOptions` attribute. Default: ``` {     companionUrl: '/',     companionHeaders:     {         'X-CSRF-TOKEN': window.csrfToken,     }, } ``` ### User Interface [](#user-interface) #### ui attribute [](#ui-attribute) Define the User Interface (UI) that should be used (Dashboard or Drag&Drop). Possible values: - dashboard - drag-drop E.g.: ``` ui="dashboard" ``` Default: `dashboard` #### uiOptions attribute [](#uioptions-attribute) You may pass the Uppy UI JS options via `uiOptions` attribute. - [Dashboard options](https://uppy.io/docs/dashboard/#options) - [Drag & Drop options](https://uppy.io/docs/drag-drop/#options) E.g.: ``` uiOptions="{ target: '.upload .for-ProgressBar' }" ``` Default: `{}` Docs: - - **Dashboard example:** ``` @php $plugins = [ 'Audio' => "{ target: Dashboard }", ]; @endphp ``` **Drag & Drop example:** ``` @php $plugins = [ 'StatusBar' => "{ target: '.upload .for-ProgressBar', hideAfterFinish: false }", ]; @endphp {{ __('Uploaded file:') }} ``` ### Plugins [](#plugins) #### User Interface Elements [](#user-interface-elements) UI elements can be added using the `plugins` attribute associative array, where the key should be the same name as the UI element (E.g. the key for `Status Bar` element is `StatusBar`) and the value is the JS options to be passed to the UI element. UI elements Plugins: - StatusBar - ProgressBar - DropTarget - Informer - ImageEditor - ThumbnailGenerator E.g.: ``` @php $plugins = [ 'StatusBar' => "{ target: '.upload .for-ProgressBar', hideAfterFinish: false }", ]; @endphp ... ``` #### Sources [](#sources) Define the sources to be used for upload using the `plugins` associative array attribute. Source Plugins: - Webcam - Audio - ScreenCapture E.g.: ``` @php $plugins = [ 'Audio' => "{ target: '#dashboard' }", ]; @endphp ... ``` #### Misc [](#misc) Another misc plugins can be added using the component's `plugins` associative array attribute. Misc Plugins: - Golden Retriever - Compressor - Locales - Form For example to use the `GoldenRetriever` (`uppy.use(GoldenRetriever, { serviceWorker: false })`) and `Compressor` (`uppy.use(Compressor, { quality: 0.6 })`) plugins: ``` @php $plugins = [ 'GoldenRetriever' => "{ serviceWorker: false }", 'Compressor' => "{ quality: 0.6 }", ]; @endphp ... ``` ### Events [](#events) Define the events as a PHP associative array (key is the event name and value is the JS content of the event) passed to `events` attribute: ``` @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 ... ``` ### Adding extra JS code [](#adding-extra-js-code) You can add some extra JS code using `extraJs` attribute. Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) If you discover any security-related issues, please email . Credits ------- [](#credits) - [Tapp Network](https://github.com/TappNetwork) - [All Contributors](../../contributors) ### Libraries used in this package: [](#libraries-used-in-this-package) - [Uppy](https://uppy.io) - [AlpineJS](https://github.com/alpinejs/alpine) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 29 — LowBetter than 60% of packages Maintenance39 Infrequent updates — may be unmaintained Popularity15 Limited adoption so far Community13 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 71.4% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~240 days Total 3 Last Release 549d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/d72a8c345b7f4205dc1edaff8d05ce78f7fe1ec93dce0e52d29f18e885508d4f?d=identicon)[tapp](/maintainers/tapp) ![](https://www.gravatar.com/avatar/5d0402fb770bca016dd6ee6a925501e0224783f1e5907788aee0ba7bc31c01ee?d=identicon)[andreiabohner](/maintainers/andreiabohner) --- Top Contributors [![andreia](https://avatars.githubusercontent.com/u/38911?v=4)](https://github.com/andreia "andreia (5 commits)")[![swilla](https://avatars.githubusercontent.com/u/304159?v=4)](https://github.com/swilla "swilla (2 commits)") --- Tags bladecomponentslaraveluploaderuppys3bladeuploadcomponentuppytapp networkuploadertransloadittuslaravel-bladexhrmultipart-uploads3-multipart ### Code Quality TestsPest Static AnalysisPsalm Type Coverage Yes ### Embed Badge ![Health badge](/badges/tapp-blade-uppy/health.svg) ``` [![Health](https://phpackages.com/badges/tapp-blade-uppy/health.svg)](https://phpackages.com/packages/tapp-blade-uppy) ``` ### Alternatives [spatie/laravel-blade-comments Add debug comments to your rendered output 177325.5k](/packages/spatie-laravel-blade-comments)[victorybiz/laravel-simple-select Laravel Simple Select inputs component for Blade and Livewire. 13721.1k](/packages/victorybiz-laravel-simple-select)[victorybiz/laravel-tel-input Laravel Telephone Input component for Blade and Livewire based on the intl-tel-input JavaScript plugin. 54127.8k1](/packages/victorybiz-laravel-tel-input)[daikazu/laravel-glider Start using Glide on-the-fly instantly in your Laravel blade templates. 882.3k](/packages/daikazu-laravel-glider) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)