{"id":22398743,"url":"https://github.com/tappnetwork/blade-uppy","last_synced_at":"2025-09-21T23:57:46.047Z","repository":{"id":181098556,"uuid":"665939147","full_name":"TappNetwork/blade-uppy","owner":"TappNetwork","description":"Uppy Blade components for Laravel","archived":false,"fork":false,"pushed_at":"2024-11-05T21:33:10.000Z","size":19,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-04T21:42:31.572Z","etag":null,"topics":["blade","components","laravel","uploader","uppy"],"latest_commit_sha":null,"homepage":"https://github.com/TappNetwork/blade-uppy","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TappNetwork.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-13T10:37:43.000Z","updated_at":"2024-11-05T21:32:49.000Z","dependencies_parsed_at":"2024-11-05T22:24:01.516Z","dependency_job_id":"266339a1-09b6-48ce-a080-c6a1b9c2f5c6","html_url":"https://github.com/TappNetwork/blade-uppy","commit_stats":null,"previous_names":["tappnetwork/blade-uppy"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TappNetwork%2Fblade-uppy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TappNetwork%2Fblade-uppy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TappNetwork%2Fblade-uppy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TappNetwork%2Fblade-uppy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TappNetwork","download_url":"https://codeload.github.com/TappNetwork/blade-uppy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228249352,"owners_count":17891461,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blade","components","laravel","uploader","uppy"],"created_at":"2024-12-05T07:12:02.737Z","updated_at":"2025-09-21T23:57:40.990Z","avatar_url":"https://github.com/TappNetwork.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Uppy blade\n\nThis package adds Blade components for [Uppy](https://uppy.io/docs) to use in your Laravel Blade views.\n\n## Installation\n\n### Install the package via Composer\n\n```bash\ncomposer require tapp/blade-uppy\n```\n\n### Add required JS libraries\n\nAdd 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):\n\n```\n...\n\"devDependencies\": {\n    \"alpinejs\": \"^3.11.1\",\n    ...\n    },\n    \"dependencies\": {\n    \"@uppy/aws-s3-multipart\": \"^3.1.2\",\n    \"@uppy/core\": \"^3.0.5\",\n    \"@uppy/drag-drop\": \"^3.0.1\",\n    \"@uppy/status-bar\": \"^3.0.1\"\n    ...\n}\n...\n```\n\nAdd the Uppy libraries in your `resources/js/bootstrap.js` file:\n\n```javascript\n...\n\nrequire('@uppy/core/dist/style.min.css')\nrequire('@uppy/drag-drop/dist/style.min.css')\nrequire('@uppy/status-bar/dist/style.min.css')\n\nimport Uppy from '@uppy/core'\nimport DragDrop from '@uppy/drag-drop'\nimport StatusBar from '@uppy/status-bar'\nimport AwsS3Multipart from '@uppy/aws-s3-multipart'\n\nwindow.Uppy = Uppy\nwindow.DragDrop = DragDrop\nwindow.StatusBar = StatusBar\nwindow.AwsS3Multipart = AwsS3Multipart\n```\n\nAdd in your `resources/js/app.js`:\n\n```javascript\n...\nimport Alpine from 'alpinejs';\n\nwindow.Alpine = Alpine;\n\nAlpine.start();\n```\n\nInstall the JS libraries:\n\nusing Mix:\n```\nnpm install\nnpm run dev\n```\n\nusing Vite:\n```\nnpm install\nnpm run build\n```\n\n\u003e You can use CDNs for [Uppy](https://uppy.io/docs/#With-a-script-tag) and [AlpineJS](https://github.com/alpinejs/alpine), if you prefer.\n\n### Publish config file (optional)\n\nPublish the config file with:\n```bash\nphp artisan vendor:publish --tag=blade-uppy-config\n```\n\nThe published config file contains the Uppy events that are loaded as components:\n\n```php\nreturn [\n    'events' =\u003e [\n        'cancel-all',\n        'complete',\n        'dashboard-file-edit-complete',\n        'dashboard-file-edit-start',\n        'dashboard-modal-closed',\n        'dashboard-modal-open',\n        'error',\n        'file-added',\n        'file-editor-cancel',\n        'file-editor-complete',\n        'file-editor-start',\n        'file-removed',\n        'files-added',\n        'info-hidden',\n        'info-visible',\n        'postprocess-progress',\n        'preprocces-progress',\n        'progress',\n        'reset-progress',\n        'restriction-failed',\n        'retry-all',\n        'thumbnail-generated',\n        'upload-error',\n        'upload-progress',\n        'upload-retry',\n        'upload-stalled',\n        'upload-success',\n        'upload',\n    ],\n];\n```\n\n### Publish view files (optional)\n\n```bash\nphp artisan vendor:publish --tag=blade-uppy-views\n```\n\n## Usage\n\nUppy uploaders are available as Blade components:\n\n- AWS S3 `\u003cx-input.uppy.s3\u003e`\n- AWS S3 Multipart `\u003cx-input.uppy.s3-multipart\u003e`\n- XHR `\u003cx-input.uppy.xhr\u003e`\n- Tus `\u003cx-input.uppy.tus\u003e`\n- Transloadit `\u003cx-input.uppy.transloadit\u003e`\n\nThis is the component skeleton (using the `s3` blade component as an example, but it's the same for `s3-multipart`, `xhr`, `tus`, and `transloadit`):\n\n```html\n\u003cx-input.uppy.s3\n    attribute=\"attribute value\"\n    ...\n\u003e\n\n    \u003c!-- here in the component body, you can define the HTML to be used --\u003e\n\n\u003c/x-input.uppy.s3\u003e\n```\n\nThe UI that should be used (`dashboard` or `drag-drop`) can be defined with the `ui` attribute and UI options with `uiOptions` attribute:\n```html\n\u003cx-input.uppy.s3\n    ui=\"drag-drop\"\n    uiOptions=\"{ target: '.upload' }\"\n    ...\n\u003e\n```\n\nAny plugin can be added using the `plugins` array attribute, where the key is the plugin name and the value is the plugin options:\n```html\n@php\n    $plugins = [\n        'StatusBar' =\u003e \"{ target: '.upload', hideAfterFinish: false }\",\n    ];\n@endphp\n\n\u003cx-input.uppy.s3\n    :plugins=\"$plugins\"\n    ...\n\u003e\n```\n\nAdd any event using the `events` array attribute, where the key is the event name and the value is the event code:\n```html\n@php\n    $plugins = [\n        'StatusBar' =\u003e \"{ target: '.upload', hideAfterFinish: false }\",\n    ];\n@endphp\n\n\u003cx-input.uppy.s3\n    :events=\"$events\"\n    ...\n\u003e\n```\n\nIf you need to add extra JS code, use the `extraJs` attribute:\n\n```html\n\u003cx-input.uppy.s3\n    extraJs=\"your JS code here\"\n    ...\n\u003e\n```\n\n## Uploaders\n\n### S3\n\nAdd the `input.uppy.s3` blade component to your blade view:\n\n```html\n\u003cx-input.uppy.s3\n    ui=\"dashboard\"\n    uiOptions=\"{ inline: true, target: '#uppy-dashboard'}\"\n\u003e\n\n    \u003cdiv id=\"uppy-dashboard\"\u003e\n    \u003c/div\u003e\n\n\u003c/x-input.uppy.s3\u003e\n```\n\n### S3 Multipart\n\nAdd the `input.uppy.s3-multipart` blade component to your blade view. \nE.g. using the Dashboard UI:\n\n```html\n\u003cx-input.uppy.s3-multipart\n    uiOptions=\"{ inline: true, target: '#uppy-dashboard'}\"\n    audio=\"{ target: Dashboard }\"\n    instanceName=\"file\"\n\u003e\n\n    \u003cdiv id=\"uppy-dashboard\"\u003e\n    \u003c/div\u003e\n\n\u003c/x-input.uppy.s3-multipart\u003e\n```\n\n### XHR\n\nAdd the `input.uppy.xhr` blade component to your blade view.\nE.g. using the Drag and Drop UI:\n\n```html\n@php\n$events = [\n    'upload-success' =\u003e \"\n        const url = response.uploadURL;\n        const fileName = file.name;\n        const aleatorio = 1;\n\n        const uploadedFileData = JSON.stringify(response.body);\n\n        const li = document.createElement('li');\n        const a = document.createElement('a');\n        a.href = url;\n        a.target = '_blank';\n        a.appendChild(document.createTextNode(fileName));\n        li.appendChild(a);\n\n        document.querySelector('.upload .uploaded-files ol').appendChild(li);\n\n        var inputElementUrlUploadFile = document.getElementById('file2');\n        inputElementUrlUploadFile.value = url;\n        inputElementUrlUploadFile.dispatchEvent(new Event('input'));\n    \",\n];\n\n$plugins = [\n    'StatusBar' =\u003e \"{ target: '.upload .for-ProgressBar', hideAfterFinish: false }\",\n];\n@endphp\n\n\u003cdiv class=\"flex items-center\"\u003e\n    \u003cinput type=\"hidden\" name=\"file\" id=\"file\" /\u003e\n\n    \u003cx-input.uppy.xhr\n        ui=\"drag-drop\"\n        uiOptions=\"{ target: '.upload .for-ProgressBar' }\"\n        :events=\"$events\"\n        :plugins=\"$plugins\"\n    \u003e\n\n        \u003csection class=\"upload\"\u003e\n            \u003cdiv class=\"for-DragDrop\" x-ref=\"input\"\u003e\u003c/div\u003e\n\n            \u003cdiv class=\"for-ProgressBar\"\u003e\u003c/div\u003e\n\n            \u003cdiv id=\"progress-bar\"\u003e\u003c/div\u003e\n\n            \u003cdiv class=\"uploaded-files\"\u003e\n                \u003ch5\u003e{{ __('Uploaded file:') }}\u003c/h5\u003e\n                \u003col\u003e\u003c/ol\u003e\n            \u003c/div\u003e\n        \u003c/section\u003e\n\n    \u003c/x-input.uppy.xhr\u003e\n\u003c/div\u003e\n```\n\n### Tus\n\nAdd the `input.uppy.tus` blade component to your blade view:\n\n```html\n\u003cx-input.uppy.tus\n    uiOptions=\"{ inline: true, target: '#uppy-dashboard'}\"\n\u003e\n\n    \u003cdiv id=\"uppy-dashboard\"\u003e\n    \u003c/div\u003e\n\n\u003c/x-input.uppy.tus\u003e\n```\n\n### Transloadit\n\nAdd the `input.uppy.transloadit` blade component to your blade view:\n\n```html\n\u003cx-input.uppy.transloadit\n    uiOptions=\"{ inline: true, target: '#uppy-dashboard'}\"\n\u003e\n\n    \u003cdiv id=\"uppy-dashboard\"\u003e\n    \u003c/div\u003e\n\n\u003c/x-input.uppy.transloadit\u003e\n```\n\n## Available attributes for each component:\n\n| Attribute | Description | Default value |\n| --- | --- | --- |\n| instanceName | Uppy instance name | uppyUpload |\n| coreOptions | Core Uppy instance options | {} |\n| uploaderOptions | Options used by uploader | {} |\n| ui | UI for upload (dashboard or drag-drop) | dashboard |\n| uiOptions | Options that should be passed to the UI | {} |\n| :events | PHP array with the Uppy events (keys are event names, values are event code) | [] |\n| :plugins | PHP array with the Uppy plugins (keys are plugin name, values are plugin options) | [] |\n| extraJs | Extra JS code | '' |\n\n### Uppy instance name\n\nUse the `instanceName` attribute to define the Uppy instance name.\n\nDefault: `uppyUpload`\n\n### Core Options\n\nCore Uppy options are defined with the `coreOptions` attribute.\n\nDefault:\n```javascript\n{\n    debug: true,\n    autoProceed: true,\n    allowMultipleUploads: false,\n}\n```\n\n### Uploader Options\n\nCan be defined using `uploaderOptions` attribute.\n\nDefault:\n```javascript\n{\n    companionUrl: '/',\n    companionHeaders:\n    {\n        'X-CSRF-TOKEN': window.csrfToken,\n    },\n}\n```\n\n### User Interface\n\n#### ui attribute\n\nDefine the User Interface (UI) that should be used (Dashboard or Drag\u0026Drop).\nPossible values:\n\n- dashboard\n- drag-drop\n\nE.g.:\n```html\nui=\"dashboard\"\n```\n\nDefault: `dashboard`\n\n#### uiOptions attribute\n\nYou may pass the Uppy UI JS options via `uiOptions` attribute.\n\n- [Dashboard options](https://uppy.io/docs/dashboard/#options)\n- [Drag \u0026 Drop options](https://uppy.io/docs/drag-drop/#options)\n\nE.g.:\n\n```html\nuiOptions=\"{ target: '.upload .for-ProgressBar' }\"\n```\n\nDefault: `{}`\n\nDocs:\n- https://uppy.io/docs/dashboard\n- https://uppy.io/docs/drag-drop\n\n**Dashboard example:**\n\n```html\n@php\n    $plugins = [\n        'Audio' =\u003e \"{ target: Dashboard }\",\n    ];\n@endphp\n\n\u003cx-input.uppy.s3-multipart\n    ui=\"dashboard\"\n    uiOptions=\"{ inline: true, target: '#uppy-dashboard'}\"\n    instanceName=\"file\"\n    :plugins=\"$plugins\"\n\u003e\n\n    \u003cdiv id=\"uppy-dashboard\"\u003e\n    \u003c/div\u003e\n\n\u003c/x-input.uppy.s3-multipart\u003e\n```\n\n**Drag \u0026 Drop example:**\n\n```html\n@php\n    $plugins = [\n        'StatusBar' =\u003e \"{ target: '.upload .for-ProgressBar', hideAfterFinish: false }\",\n    ];\n@endphp\n\n\u003cx-input.uppy.s3\n    ui=\"drag-drop\"\n    coreOptions=\"{\n        debug: true,\n        autoProceed: true,\n        allowMultipleUploads: false,\n    }\"\n    uiOptions=\"{ target: '.upload .for-ProgressBar' }\"\n    :plugins=\"$plugins\"\n\u003e\n\n    \u003csection class=\"upload\"\u003e\n        \u003cdiv class=\"for-DragDrop\" x-ref=\"input\"\u003e\u003c/div\u003e\n\n        \u003cdiv class=\"for-ProgressBar\"\u003e\u003c/div\u003e\n\n        \u003cdiv class=\"uploaded-files\"\u003e\n            \u003ch5\u003e{{ __('Uploaded file:') }}\u003c/h5\u003e\n            \u003col\u003e\u003c/ol\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n\n\u003c/x-input.uppy.s3\u003e\n```\n\n### Plugins\n\n#### User Interface Elements\n\nUI 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.\n\nUI elements Plugins:\n- StatusBar\n- ProgressBar\n- DropTarget\n- Informer\n- ImageEditor\n- ThumbnailGenerator\n\nE.g.:\n\n```php\n@php\n    $plugins = [\n        'StatusBar' =\u003e \"{ target: '.upload .for-ProgressBar', hideAfterFinish: false }\",\n    ];\n@endphp\n\n\u003cx-input.uppy.s3-multipart\n    ...\n    :plugins=\"$plugins\"\n\u003e\n    ...\n```\n\n#### Sources\n\nDefine the sources to be used for upload using the `plugins` associative array attribute.\n\nSource Plugins:\n- Webcam\n- Audio\n- ScreenCapture\n\nE.g.:\n```php\n@php\n    $plugins = [\n        'Audio' =\u003e \"{  target: '#dashboard' }\",\n    ];\n@endphp\n\n\u003cx-input.uppy.s3-multipart\n    ...\n    :plugins=\"$plugins\"\n\u003e\n    ...\n```\n\n#### Misc\n\nAnother misc plugins can be added using the component's `plugins` associative array attribute.\n\nMisc Plugins:\n- Golden Retriever\n- Compressor\n- Locales\n- Form\n\nFor example to use the `GoldenRetriever` (`uppy.use(GoldenRetriever, { serviceWorker: false })`) and `Compressor` (`uppy.use(Compressor, { quality: 0.6 })`) plugins:\n\n```php\n@php\n$plugins = [\n    'GoldenRetriever' =\u003e \"{ serviceWorker: false }\",\n    'Compressor' =\u003e \"{ quality: 0.6 }\",\n];\n@endphp\n\n\u003cx-input.uppy.s3-multipart\n    ...\n    :plugins=\"$plugins\"\n\u003e\n    ...\n\u003c/x-input.uppy.s3-multipart\u003e\n```\n\n### Events\n\nDefine 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:\n\n```php\n@php\n$events = [\n    'upload-success' =\u003e \"\n        const url = response.uploadURL;\n        const fileName = file.name;\n        const aleatorio = 1;\n\n        const uploadedFileData = JSON.stringify(response.body);\n\n        const li = document.createElement('li');\n        const a = document.createElement('a');\n        a.href = url;\n        a.target = '_blank';\n        a.appendChild(document.createTextNode(fileName));\n        li.appendChild(a);\n\n        document.querySelector('.upload .uploaded-files ol').appendChild(li);\n\n        var inputElementUrlUploadFile = document.getElementById('file2');\n        inputElementUrlUploadFile.value = url;\n        inputElementUrlUploadFile.dispatchEvent(new Event('input'));\n    \",\n];\n@endphp\n\n\u003cx-input.uppy.s3\n    ...\n    :events=\"$events\"\n\u003e\n    ...\n\u003c/x-input.uppy.s3\u003e\n```\n\n### Adding extra JS code\n\nYou can add some extra JS code using `extraJs` attribute.\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nIf you discover any security-related issues, please email security@tappnetwork.com.\n\n## Credits\n\n- [Tapp Network](https://github.com/TappNetwork)\n- [All Contributors](../../contributors)\n\n### Libraries used in this package:\n\n- [Uppy](https://uppy.io)\n- [AlpineJS](https://github.com/alpinejs/alpine)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftappnetwork%2Fblade-uppy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftappnetwork%2Fblade-uppy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftappnetwork%2Fblade-uppy/lists"}