{"id":19818537,"url":"https://github.com/jhonoryza/laravel-fileupload-component","last_synced_at":"2025-07-11T08:03:54.534Z","repository":{"id":219090866,"uuid":"747860228","full_name":"jhonoryza/laravel-fileupload-component","owner":"jhonoryza","description":"laravel fileupload livewire component","archived":false,"fork":false,"pushed_at":"2024-02-01T18:10:42.000Z","size":54,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-15T11:09:29.770Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/jhonoryza.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null}},"created_at":"2024-01-24T19:32:25.000Z","updated_at":"2024-09-01T12:20:22.000Z","dependencies_parsed_at":"2025-07-11T08:03:34.301Z","dependency_job_id":null,"html_url":"https://github.com/jhonoryza/laravel-fileupload-component","commit_stats":null,"previous_names":["jhonoryza/laravel-fileupload-component"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jhonoryza/laravel-fileupload-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhonoryza%2Flaravel-fileupload-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhonoryza%2Flaravel-fileupload-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhonoryza%2Flaravel-fileupload-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhonoryza%2Flaravel-fileupload-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhonoryza","download_url":"https://codeload.github.com/jhonoryza/laravel-fileupload-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhonoryza%2Flaravel-fileupload-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264763124,"owners_count":23660302,"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":[],"created_at":"2024-11-12T10:15:59.869Z","updated_at":"2025-07-11T08:03:54.499Z","avatar_url":"https://github.com/jhonoryza.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laravel File Upload Component\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://packagist.org/packages/jhonoryza/laravel-fileupload-component\"\u003e\n    \u003cimg src=\"https://poser.pugx.org/jhonoryza/laravel-fileupload-component/d/total.svg\" alt=\"Total Downloads\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/jhonoryza/laravel-fileupload-component\"\u003e\n        \u003cimg src=\"https://poser.pugx.org/jhonoryza/laravel-fileupload-component/v/stable.svg\" alt=\"Latest Stable Version\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/jhonoryza/laravel-fileupload-component\"\u003e\n        \u003cimg src=\"https://poser.pugx.org/jhonoryza/laravel-fileupload-component/license.svg\" alt=\"License\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nlaravel livewire file upload component\n\n## Requirement\n- php v8.2\n- laravel v10\n- livewire v3\n- spatie/media-library v10\n\n## Installation\n\n```bash\ncomposer install jhonoryza/laravel-fileupload-component\n```\n\n```bash\nphp artisan vendor:publish --provider=Jhonoryza\\Component\\FileUpload\\FileUploadServiceProvider\n```\n\n## Quick Start\n\nprepare model, example Setting model\n\n```php\nuse Spatie\\MediaLibrary\\HasMedia;\nuse Spatie\\MediaLibrary\\InteractsWithMedia;\nuse Jhonoryza\\Component\\FileUpload\\Traits\\InteractsWithFileUpload;\n\nclass Setting extends Model implements HasMedia\n{\n    use InteractsWithMedia;\n    use InteractsWithFileUpload;\n\n    public function registerMediaCollections() : void\n    {\n        $this-\u003eaddMediaCollection('settings');\n    }\n}\n```\n\nprepare livewire form class\n\n```php\n   /**\n    * property to store multiple images\n    */\n    public $images = [];\n\n   /**\n    * listener when there is onFileReplace event from the component\n    */\n   #[On('images:onFileReplace')]\n   public function replaceImages(array $images): void\n   {\n       $this-\u003eimages = $images;\n   }\n\n   /**\n    * listener when there is onFileAdded event from the component\n    */\n   #[On('images:onFileAdded')]\n   public function addToImages(array $file): void\n   {\n       $this-\u003eimages[$file['uuid']] = $file;\n   }\n\n   /**\n    * form save function example, setting is a Model\n    * we call syncFileUploadRequest function\n    * to save images to media library\n    */\n    public function save()\n    {\n        $this-\u003esetting\n            -\u003esyncFileUploadRequest($this-\u003eimages)\n            -\u003etoMediaCollection('settings');\n    }\n```\n\nin create or edit livewire component\n```php\n    \u003clivewire:file-upload-component\n        name=\"images\"\n        label=\"Image\"\n        :model=\"$setting\"\n        collection=\"settings\"\n        :multiple=\"true\"\n    /\u003e\n```\n\nin view livewire component\n```php\n    \u003clivewire:file-upload-component\n        name=\"images\"\n        label=\"Image\"\n        :model=\"$setting\"\n        collection=\"settings\"\n        :multiple=\"true\"\n        :canUploadFile=\"false\"\n    /\u003e\n```\n\n## Property Explanation\n- name is required and will affect what the event name is\n- :model you need to pass a variable with Model type that implement HasMedia\n- collection is for media collection name\n- :multiple for single file upload or multiple file upload\n- :canUploadFile to hide file selector\n\n## Component Event\n\nthis component dispatch 2 event when temporary upload is started\n- media:temporary-upload-started\n- media:temporary-upload-finished\n\nchange `media` with the `name` property, example `name` property is images\n\n```php\n    \u003cbutton\n        x-data=\"{ disable: false }\"\n        x-bind:disabled=\"disable\"\n        x-bind:style=\"disable ? 'cursor: not-allowed' : ''\"\n        x-on:images:temporary-upload-started.window=\"disable = true\"\n        x-on:images:temporary-upload-finished.window=\"disable = false\"\n        type=\"submit\"\n        class=\"btn btn-primary\"\n    \u003e\n        Update Setting\n    \u003c/button\u003e\n```\n\nor you can listen to default livewire file upload event like this\n\n```php\n    \u003cbutton\n        x-data=\"{ disable: false }\"\n        x-bind:disabled=\"disable\"\n        x-bind:style=\"disable ? 'cursor: not-allowed' : ''\"\n        x-on:livewire-upload-start.window=\"disable = true\"\n        x-on:livewire-upload-error.window=\"disable = false\"\n        x-on:livewire-upload-progress.window=\"disable = true\"\n        x-on:livewire-upload-finish.window=\"disable = false\"\n        type=\"submit\"\n        class=\"btn btn-primary\"\n    \u003e\n        Update Setting\n    \u003c/button\u003e\n```\n\nanother 2 event when the file is removed / loaded or added\n- media:onFileReplace\n- media:onFileAdded\n\nchange `media` with the `name` property, example `name` property is images\n\n```php\n   #[On('images:onFileReplace')]\n   public function replaceImages(array $images): void\n   {\n       $this-\u003eimages = $images;\n   }\n\n   #[On('images:onFileAdded')]\n   public function addToImages(array $file): void\n   {\n       $this-\u003eimages[$file['uuid']] = $file;\n   }\n```\n\n## next thing todo\n- [ ] test validation with error message\n- [ ] add unit test\n- [x] bug when interacts with session flash after redirect (session flash data is missing)\n\n## Security\n\nIf you've found a bug regarding security please mail [jardik.oryza@gmail.com](mailto:jardik.oryza@gmail.com) instead of using the issue tracker.\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%2Fjhonoryza%2Flaravel-fileupload-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhonoryza%2Flaravel-fileupload-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhonoryza%2Flaravel-fileupload-component/lists"}