{"id":19631023,"url":"https://github.com/arkounay/ux-media","last_synced_at":"2025-04-09T18:19:55.702Z","repository":{"id":40484473,"uuid":"409646826","full_name":"Arkounay/ux-media","owner":"Arkounay","description":"Symfony UX async document upload form type using ArtgrisFileManager","archived":false,"fork":false,"pushed_at":"2025-01-31T22:13:46.000Z","size":3066,"stargazers_count":19,"open_issues_count":1,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T18:19:38.506Z","etag":null,"topics":["fileupload","form","symfony","symfony-bundle","symfony-form","symfony-ux"],"latest_commit_sha":null,"homepage":"","language":"Twig","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/Arkounay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2021-09-23T15:29:08.000Z","updated_at":"2025-01-31T22:13:50.000Z","dependencies_parsed_at":"2023-12-23T22:17:01.863Z","dependency_job_id":"86e4bc79-130f-434c-9a80-c0389c5d2185","html_url":"https://github.com/Arkounay/ux-media","commit_stats":{"total_commits":45,"total_committers":7,"mean_commits":6.428571428571429,"dds":0.3111111111111111,"last_synced_commit":"dfb4d621fa31bcff1683356a1dcb2d75526e6a60"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arkounay%2Fux-media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arkounay%2Fux-media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arkounay%2Fux-media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arkounay%2Fux-media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arkounay","download_url":"https://codeload.github.com/Arkounay/ux-media/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085324,"owners_count":21045139,"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":["fileupload","form","symfony","symfony-bundle","symfony-form","symfony-ux"],"created_at":"2024-11-11T12:07:26.802Z","updated_at":"2025-04-09T18:19:55.683Z","avatar_url":"https://github.com/Arkounay.png","language":"Twig","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ux Media\n\nSymfony UX async document upload form type using ArtgrisFileManager, a [MediaBundle](https://github.com/artgris/MediaBundle) version that works without having to use most of its dependecies like jQuery / jQuery UI / Font awesome etc (but **still requires bootstrap 5**)\n\n## Installation\n\n**Before you start, make sure you have [StimulusBundle](https://symfony.com/bundles/StimulusBundle/current/index.html) configured in your app.**\n\nInstall the bundle using Composer and Symfony Flex:\n\n```sh\ncomposer require arkounay/ux-media\n```\n\nIf you're using WebpackEncore, install your assets and restart Encore (not needed if you're using AssetMapper):\n\n```sh\nnpm install --force\nnpm run watch\n\n# or use yarn\nyarn install --force\nyarn watch\n```\n\n\n### Configuration prerequisites\n\nThis bundles uses [FileManagerBundle](https://github.com/artgris/FileManagerBundle).\nMake sure its routing is enabled, as well as UxMedia routes :\n\n`config/routes.yaml`:\n```yaml\nartgris_file_manager:\n    resource: \"@ArtgrisFileManagerBundle/Controller\"\n    type:     attribute\n    prefix:   /admin/manager\n\nux_media:\n    resource: \"@ArkounayUxMediaBundle/Controller\"\n    type:     attribute\n    prefix:   /admin/ux-media\n```\n\nAlso, make sure you have a conf that is defined :\n\n`packages/artgris_file_manager.yaml`:\n```yaml\nartgris_file_manager:\n    conf:\n        default:\n            dir: '%kernel.project_dir%/public/uploads'\n```\n\nIf your project is **NOT** using bootstrap, you need to enable the bootstrap_modal controller and enable scss :\n\n- Add Encore.enableSassLoader() to your webpack.config.js file\n- Install sass ` yarn add sass-loader@^12.0.0 sass --dev`\n\nAnd import the propoer bootstrap scss class :\n\n```json\n{\n    \"controllers\": {\n        \"@arkounay/ux-collection\": {\n            \"collection\": {\n                \"enabled\": true,\n                \"fetch\": \"eager\",\n                \"autoimport\": {\n                    \"@arkounay/ux-collection/src/style.css\": true,\n                    \"@arkounay/ux-collection/src/style-when-not-using-bootstrap-5.css\": false\n                }\n            }\n        },\n        \"@arkounay/ux-media\": {\n            \"media\": {\n                \"enabled\": true,\n                \"fetch\": \"eager\",\n                \"autoimport\": {\n                    \"@arkounay/ux-media/src/style.css\": true\n                }\n            },\n            \"upload\": {\n                \"enabled\": true,\n                \"fetch\": \"eager\"\n            },\n            \"crop\": {\n                \"enabled\": true,\n                \"fetch\": \"eager\",\n                \"autoimport\": {\n                    \"cropperjs/dist/cropper.min.css\": true,\n                    \"@arkounay/ux-media/src/crop_style.css\": true\n                }\n            },\n            \"bootstrap_modal\": {\n                \"enabled\": true,\n                \"fetch\": \"eager\",\n                \"autoimport\": {\n                    \"@arkounay/ux-media/src/bootstrap_modal.scss\": true\n                }\n            }\n        }\n    },\n    \"entrypoints\": []\n}\n```\n\n\n## Usage\n\nWorks like [Artgris/MediaBundle](https://github.com/artgris/MediaBundle) except you have to use UxMediaType and UxMediaCollectionType \n\n```php\n$builder-\u003eadd('Media', UxMediaType::class, [\n    'conf' =\u003e 'default',\n    'tree' =\u003e true,\n    'display_file_manager' =\u003e true,\n    'display_clear_button' =\u003e true,\n    'allow_crop' =\u003e true,\n    'crop_options' =\u003e [\n        'display_crop_data' =\u003e true,\n        'allow_flip' =\u003e true,\n        'allow_rotation' =\u003e true,\n        'ratio' =\u003e false,\n    ]\n])\n```\n\n### EasyAdmin integration\n\nFor [easyadmin](https://github.com/EasyCorp/EasyAdminBundle) 3+ you need to manually specify the form theme by overriding configureCrud in your DashboardController to add the themes s`@ArkounayUxCollection/ux_collection_form_theme.html.twig` and `@ArkounayUxMedia/ux_media_form_theme.html.twig`\n```php\npublic function configureCrud(): Crud\n{\n    return Crud::new()\n        -\u003eaddFormTheme('@ArkounayUxCollection/ux_collection_form_theme.html.twig')\n        -\u003eaddFormTheme('@ArkounayUxMedia/ux_media_form_theme.html.twig')\n    ;\n}\n```\n\nIf you're using WebpackEncore, you will need to configure your admin to use it so Symfony UX is taken into account, for example:\n```php\npublic function configureAssets(Assets $assets): Assets\n{\n    return parent::configureAssets($assets)\n        -\u003eaddWebpackEncoreEntry('app');\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkounay%2Fux-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farkounay%2Fux-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkounay%2Fux-media/lists"}