[{"data":1,"prerenderedAt":1299},["ShallowReactive",2],{"navigation":3,"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-file-field":362,"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-file-field-surround":1294},[4,14,36,69,144,345],{"title":5,"path":6,"stem":7,"children":8},"Introduction","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17,"children":18,"page":35},"Guides","\u002Fguides","2.guides",[19,23,27,31],{"title":20,"path":21,"stem":22},"Your First Layout","\u002Fguides\u002Fyour-first-layout","2.guides\u002F1.your-first-layout",{"title":24,"path":25,"stem":26},"Your First Page Template","\u002Fguides\u002Fyour-first-page-template","2.guides\u002F2.your-first-page-template",{"title":28,"path":29,"stem":30},"Your First Component","\u002Fguides\u002Fyour-first-component","2.guides\u002F3.your-first-component",{"title":32,"path":33,"stem":34},"Alternative UI Variants","\u002Fguides\u002Falternative-ui-variants","2.guides\u002F4.alternative-ui-variants",false,{"title":37,"path":38,"stem":39,"children":40,"page":35},"Core Concepts","\u002Fcore-concepts","3.core-concepts",[41,45,49,53,57,61,65],{"title":42,"path":43,"stem":44},"How It All Works","\u002Fcore-concepts\u002Farchitecture","3.core-concepts\u002F1.architecture",{"title":46,"path":47,"stem":48},"The Data Model","\u002Fcore-concepts\u002Fthe-data-model","3.core-concepts\u002F2.the-data-model",{"title":50,"path":51,"stem":52},"Layouts & Pages","\u002Fcore-concepts\u002Flayouts-and-pages","3.core-concepts\u002F3.layouts-and-pages",{"title":54,"path":55,"stem":56},"Dynamic Pages","\u002Fcore-concepts\u002Fdynamic-pages","3.core-concepts\u002F4.dynamic-pages",{"title":58,"path":59,"stem":60},"Components","\u002Fcore-concepts\u002Fcomponents","3.core-concepts\u002F5.components",{"title":62,"path":63,"stem":64},"Draft & Publish Workflow","\u002Fcore-concepts\u002Fdraft-and-publish","3.core-concepts\u002F6.draft-and-publish",{"title":66,"path":67,"stem":68},"The Admin Panel","\u002Fcore-concepts\u002Fadmin-panel","3.core-concepts\u002F7.admin-panel",{"title":70,"path":71,"stem":72,"children":73,"page":35},"Api","\u002Fapi","4.api",[74,78,120,124,128,132,136,140],{"title":75,"path":76,"stem":77},"Bundle Setup","\u002Fapi\u002Fbundle-setup","4.api\u002F1.bundle-setup",{"title":58,"path":79,"stem":80,"children":81,"page":35},"\u002Fapi\u002Fcomponents","4.api\u002F2.components",[82,86,107],{"title":83,"path":84,"stem":85},"Creating Components","\u002Fapi\u002Fcomponents\u002Fcreating-components","4.api\u002F2.components\u002F1.creating-components",{"title":87,"path":88,"stem":89,"children":90,"page":35},"Annotations","\u002Fapi\u002Fcomponents\u002Fannotations","4.api\u002F2.components\u002F2.annotations",[91,95,99,103],{"title":92,"path":93,"stem":94},"Publishable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fpublishable","4.api\u002F2.components\u002F2.annotations\u002F1.publishable",{"title":96,"path":97,"stem":98},"Uploadable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fuploadable","4.api\u002F2.components\u002F2.annotations\u002F2.uploadable",{"title":100,"path":101,"stem":102},"Timestamped","\u002Fapi\u002Fcomponents\u002Fannotations\u002Ftimestamped","4.api\u002F2.components\u002F2.annotations\u002F3.timestamped",{"title":104,"path":105,"stem":106},"Explicit Allow Only","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fexplicit-allow-only","4.api\u002F2.components\u002F2.annotations\u002F4.explicit-allow-only",{"title":108,"path":109,"stem":110,"children":111,"page":35},"Built Ins","\u002Fapi\u002Fcomponents\u002Fbuilt-ins","4.api\u002F2.components\u002F3.built-ins",[112,116],{"title":113,"path":114,"stem":115},"Collection Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fcollection-component","4.api\u002F2.components\u002F3.built-ins\u002F1.collection-component",{"title":117,"path":118,"stem":119},"Form Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component","4.api\u002F2.components\u002F3.built-ins\u002F2.form-component",{"title":121,"path":122,"stem":123},"Dynamic & Nested Pages","\u002Fapi\u002Fdynamic-pages","4.api\u002F3.dynamic-pages",{"title":125,"path":126,"stem":127},"Users & Security","\u002Fapi\u002Fusers-and-security","4.api\u002F4.users-and-security",{"title":129,"path":130,"stem":131},"Data Fixtures","\u002Fapi\u002Fdata-fixtures","4.api\u002F5.data-fixtures",{"title":133,"path":134,"stem":135},"Configuration Reference","\u002Fapi\u002Fconfiguration","4.api\u002F6.configuration",{"title":137,"path":138,"stem":139},"Console Commands","\u002Fapi\u002Fconsole-commands","4.api\u002F7.console-commands",{"title":141,"path":142,"stem":143},"Debugging & Profiler","\u002Fapi\u002Fdebugging","4.api\u002F8.debugging",{"title":145,"path":146,"stem":147,"children":148,"page":35},"Nuxt Module","\u002Fnuxt-module","5.nuxt-module",[149,153,166,186,207,211,295,320,324],{"title":150,"path":151,"stem":152},"Module Setup","\u002Fnuxt-module\u002Fmodule-setup","5.nuxt-module\u002F1.module-setup",{"title":154,"path":155,"stem":156,"children":157,"page":35},"Configuration","\u002Fnuxt-module\u002Fconfiguration","5.nuxt-module\u002F2.configuration",[158,162],{"title":159,"path":160,"stem":161},"Nuxt Config","\u002Fnuxt-module\u002Fconfiguration\u002Fnuxt-config","5.nuxt-module\u002F2.configuration\u002F1.nuxt-config",{"title":163,"path":164,"stem":165},"Site Config & SEO","\u002Fnuxt-module\u002Fconfiguration\u002Fsite-config-and-seo","5.nuxt-module\u002F2.configuration\u002F2.site-config-and-seo",{"title":167,"path":168,"stem":169,"children":170,"page":35},"Building Your Ui","\u002Fnuxt-module\u002Fbuilding-your-ui","5.nuxt-module\u002F3.building-your-ui",[171,175,179,182],{"title":172,"path":173,"stem":174},"Layouts","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts","5.nuxt-module\u002F3.building-your-ui\u002F1.creating-layouts",{"title":176,"path":177,"stem":178},"Page Templates","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-page-templates","5.nuxt-module\u002F3.building-your-ui\u002F2.creating-page-templates",{"title":83,"path":180,"stem":181},"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components","5.nuxt-module\u002F3.building-your-ui\u002F3.creating-components",{"title":183,"path":184,"stem":185},"CLI Generator","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcwa-cli","5.nuxt-module\u002F3.building-your-ui\u002F4.cwa-cli",{"title":187,"path":188,"stem":189,"children":190,"page":35},"Cwa Components","\u002Fnuxt-module\u002Fcwa-components","5.nuxt-module\u002F4.cwa-components",[191,195,199,203],{"title":192,"path":193,"stem":194},"\u003CCwaComponentGroup \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-component-group","5.nuxt-module\u002F4.cwa-components\u002F1.cwa-component-group",{"title":196,"path":197,"stem":198},"\u003CCwaPage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-page","5.nuxt-module\u002F4.cwa-components\u002F2.cwa-page",{"title":200,"path":201,"stem":202},"\u003CCwaLink \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-link","5.nuxt-module\u002F4.cwa-components\u002F3.cwa-link",{"title":204,"path":205,"stem":206},"\u003CCwaDefaultLayout \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-default-layout","5.nuxt-module\u002F4.cwa-components\u002F5.cwa-default-layout",{"title":208,"path":209,"stem":210},"The useCwa() API","\u002Fnuxt-module\u002Fcwa-api","5.nuxt-module\u002F5.cwa-api",{"title":212,"path":213,"stem":214,"children":215,"page":35},"Composables","\u002Fnuxt-module\u002Fcomposables","5.nuxt-module\u002F6.composables",[216,224,261,278],{"title":217,"path":218,"stem":219,"children":220,"page":35},"Layout","\u002Fnuxt-module\u002Fcomposables\u002Flayout","5.nuxt-module\u002F6.composables\u002F0.layout",[221],{"title":217,"path":222,"stem":223},"\u002Fnuxt-module\u002Fcomposables\u002Flayout\u002Fuse-cwa-layout","5.nuxt-module\u002F6.composables\u002F0.layout\u002F1.use-cwa-layout",{"title":225,"path":226,"stem":227,"children":228,"page":35},"Component","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent","5.nuxt-module\u002F6.composables\u002F1.component",[229,233,237,241,245,249,253,257],{"title":230,"path":231,"stem":232},"Component (recommended)","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component","5.nuxt-module\u002F6.composables\u002F1.component\u002F0.use-cwa-component",{"title":234,"path":235,"stem":236},"Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F1.use-cwa-resource",{"title":238,"path":239,"stem":240},"Collection Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-collection-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F2.use-cwa-collection-resource",{"title":242,"path":243,"stem":244},"File Field","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-file-field","5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-file-field",{"title":246,"path":247,"stem":248},"Form","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form","5.nuxt-module\u002F6.composables\u002F1.component\u002F4.use-cwa-form",{"title":250,"path":251,"stem":252},"Form Input","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input","5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input",{"title":254,"path":255,"stem":256},"Form Repeated","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-repeated","5.nuxt-module\u002F6.composables\u002F1.component\u002F6.use-cwa-form-repeated",{"title":258,"path":259,"stem":260},"Form Collection","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-collection","5.nuxt-module\u002F6.composables\u002F1.component\u002F7.use-cwa-form-collection",{"title":262,"path":263,"stem":264,"children":265,"page":35},"Admin Manager","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager","5.nuxt-module\u002F6.composables\u002F2.admin-manager",[266,270,274],{"title":267,"path":268,"stem":269},"Manager Tab","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-manager-tab","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F1.use-cwa-resource-manager-tab",{"title":271,"path":272,"stem":273},"Resource Model","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-model","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F2.use-cwa-resource-model",{"title":275,"path":276,"stem":277},"Resource Upload","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-upload","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F3.use-cwa-resource-upload",{"title":279,"path":280,"stem":281,"children":282,"page":35},"Utilities","\u002Fnuxt-module\u002Fcomposables\u002Futilities","5.nuxt-module\u002F6.composables\u002F3.utilities",[283,287,291],{"title":284,"path":285,"stem":286},"Resource Endpoint","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-endpoint","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F1.use-cwa-resource-endpoint",{"title":288,"path":289,"stem":290},"Query Model","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-query-bound-model","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F2.use-query-bound-model",{"title":292,"path":293,"stem":294},"Resource Route","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-route","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F3.use-cwa-resource-route",{"title":296,"path":297,"stem":298,"children":299,"page":35},"Component Helpers","\u002Fnuxt-module\u002Fcomponent-helpers","5.nuxt-module\u002F7.component-helpers",[300,304,308,312,316],{"title":301,"path":302,"stem":303},"Images & Media","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads","5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads",{"title":305,"path":306,"stem":307},"Collections & Pagination","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fcollections-and-pagination","5.nuxt-module\u002F7.component-helpers\u002F2.collections-and-pagination",{"title":309,"path":310,"stem":311},"HTML Content","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fhtml-content","5.nuxt-module\u002F7.component-helpers\u002F3.html-content",{"title":313,"path":314,"stem":315},"Real-Time Updates","\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates","5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates",{"title":317,"path":318,"stem":319},"Forms","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fforms","5.nuxt-module\u002F7.component-helpers\u002F5.forms",{"title":321,"path":322,"stem":323},"Authentication","\u002Fnuxt-module\u002Fauthentication","5.nuxt-module\u002F8.authentication",{"title":325,"path":326,"stem":327,"children":328,"page":35},"Cwa Layer","\u002Fnuxt-module\u002Fcwa-layer","5.nuxt-module\u002F9.cwa-layer",[329,333,337,341],{"title":330,"path":331,"stem":332},"Overview","\u002Fnuxt-module\u002Fcwa-layer\u002Foverview","5.nuxt-module\u002F9.cwa-layer\u002F1.overview",{"title":334,"path":335,"stem":336},"Auth Pages","\u002Fnuxt-module\u002Fcwa-layer\u002Fauth-pages","5.nuxt-module\u002F9.cwa-layer\u002F2.auth-pages",{"title":338,"path":339,"stem":340},"Admin Panel","\u002Fnuxt-module\u002Fcwa-layer\u002Fadmin-panel","5.nuxt-module\u002F9.cwa-layer\u002F3.admin-panel",{"title":342,"path":343,"stem":344},"Styling","\u002Fnuxt-module\u002Fcwa-layer\u002Fstyling","5.nuxt-module\u002F9.cwa-layer\u002F4.styling",{"title":346,"path":347,"stem":348,"children":349,"page":35},"Deployment","\u002Fdeployment","6.deployment",[350,354,358],{"title":351,"path":352,"stem":353},"Docker","\u002Fdeployment\u002Fdocker","6.deployment\u002F1.docker",{"title":355,"path":356,"stem":357},"Kubernetes & Helm","\u002Fdeployment\u002Fkubernetes","6.deployment\u002F2.kubernetes",{"title":359,"path":360,"stem":361},"CI\u002FCD","\u002Fdeployment\u002Fci-cd","6.deployment\u002F3.ci-cd",{"id":363,"title":364,"badge":365,"body":368,"description":1287,"extension":1288,"links":1289,"meta":1290,"navigation":1291,"path":243,"seo":1292,"stem":244,"__hash__":1293},"docs\u002F5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-file-field.md","useCwaFileField",{"label":366,"color":367},"Draft","amber",{"type":369,"value":370,"toc":1281},"minimark",[371,382,397,417,594,599,680,738,742,853,857,1160,1176,1180,1185,1260,1277],[372,373,374,377,378,381],"p",{},[375,376,364],"code",{}," resolves one uploadable file field on a component backed by a PHP entity with ",[375,379,380],{},"#[Silverback\\Uploadable]",". It returns the display media, its content URL, and load state for that field. Because you name the field at the call site, one component can wire several file fields without them colliding.",[372,383,384,385,392,393,396],{},"It's the standalone form of the ",[386,387,389],"a",{"href":388},"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component#withfile-fileops",[375,390,391],{},"withFile()"," plugin — the same resolver under the hood, called directly instead of through ",[375,394,395],{},"useCwaComponent","'s plugin array.",[398,399,401],"callout",{"icon":400},"i-heroicons-arrow-path",[372,402,403,404,407,408,412,413,416],{},"Renamed from ",[375,405,406],{},"useCwaImageResource"," (removed). The file APIs handle ",[409,410,411],"strong",{},"any"," uploadable file, not just images — ",[375,414,415],{},"imagineFilterName"," is an image-specific convenience.",[418,419,424],"pre",{"className":420,"code":421,"language":422,"meta":423,"style":423},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","import { useCwaFileField } from '#imports'\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\n\nconst props = defineProps\u003CIriProp>()\n\nconst { contentUrl, displayMedia, handleLoad, loaded } = useCwaFileField(props, {\n  imagineFilterName: 'thumbnail'\n})\n","ts","",[375,425,426,460,484,491,523,528,568,585],{"__ignoreMap":423},[427,428,431,435,439,443,446,449,453,457],"span",{"class":429,"line":430},"line",1,[427,432,434],{"class":433},"sm4w6","import",[427,436,438],{"class":437},"sOvfz"," {",[427,440,442],{"class":441},"sPB8G"," useCwaFileField",[427,444,445],{"class":437}," }",[427,447,448],{"class":433}," from",[427,450,452],{"class":451},"seSrl"," '",[427,454,456],{"class":455},"sLL54","#imports",[427,458,459],{"class":451},"'\n",[427,461,463,465,468,470,473,475,477,479,482],{"class":429,"line":462},2,[427,464,434],{"class":433},[427,466,467],{"class":433}," type",[427,469,438],{"class":437},[427,471,472],{"class":441}," IriProp",[427,474,445],{"class":437},[427,476,448],{"class":433},[427,478,452],{"class":451},[427,480,481],{"class":455},"#cwa\u002Fcomposables\u002Fcwa-resource",[427,483,459],{"class":451},[427,485,487],{"class":429,"line":486},3,[427,488,490],{"emptyLinePlaceholder":489},true,"\n",[427,492,494,498,502,506,510,513,517,520],{"class":429,"line":493},4,[427,495,497],{"class":496},"swB56","const",[427,499,501],{"class":500},"sc2zw"," props",[427,503,505],{"class":504},"sVlFx"," =",[427,507,509],{"class":508},"sKpYG"," defineProps",[427,511,512],{"class":437},"\u003C",[427,514,516],{"class":515},"sRCss","IriProp",[427,518,519],{"class":437},">",[427,521,522],{"class":441},"()\n",[427,524,526],{"class":429,"line":525},5,[427,527,490],{"emptyLinePlaceholder":489},[427,529,531,533,535,538,541,544,546,549,551,554,556,558,560,563,565],{"class":429,"line":530},6,[427,532,497],{"class":496},[427,534,438],{"class":437},[427,536,537],{"class":500}," contentUrl",[427,539,540],{"class":437},",",[427,542,543],{"class":500}," displayMedia",[427,545,540],{"class":437},[427,547,548],{"class":500}," handleLoad",[427,550,540],{"class":437},[427,552,553],{"class":500}," loaded",[427,555,445],{"class":437},[427,557,505],{"class":504},[427,559,442],{"class":508},[427,561,562],{"class":441},"(props",[427,564,540],{"class":437},[427,566,567],{"class":437}," {\n",[427,569,571,575,578,580,583],{"class":429,"line":570},7,[427,572,574],{"class":573},"sDHlG","  imagineFilterName",[427,576,577],{"class":437},":",[427,579,452],{"class":451},[427,581,582],{"class":455},"thumbnail",[427,584,459],{"class":451},[427,586,588,591],{"class":429,"line":587},8,[427,589,590],{"class":437},"}",[427,592,593],{"class":441},")\n",[595,596,598],"h2",{"id":597},"signature","Signature",[418,600,602],{"className":420,"code":601,"language":422,"meta":423,"style":423},"useCwaFileField(\n  props: IriProp,                  \u002F\u002F your component's props (with `iri`)\n  fileOps?: {\n    fileProp?: string              \u002F\u002F the PHP #[UploadableField] property (default: 'file')\n    imagineFilterName?: string     \u002F\u002F Imagine filter variant to surface as displayMedia\n    imageRef?: ShallowRef          \u002F\u002F template ref for load detection (default: useTemplateRef(fileProp))\n  }\n)\n",[375,603,604,611,622,632,645,658,671,676],{"__ignoreMap":423},[427,605,606,608],{"class":429,"line":430},[427,607,364],{"class":508},[427,609,610],{"class":441},"(\n",[427,612,613,616,618],{"class":429,"line":462},[427,614,615],{"class":441},"  props: IriProp",[427,617,540],{"class":437},[427,619,621],{"class":620},"sTBSN","                  \u002F\u002F your component's props (with `iri`)\n",[427,623,624,627,630],{"class":429,"line":486},[427,625,626],{"class":441},"  fileOps",[427,628,629],{"class":504},"?:",[427,631,567],{"class":437},[427,633,634,637,639,642],{"class":429,"line":493},[427,635,636],{"class":441},"    fileProp?",[427,638,577],{"class":437},[427,640,641],{"class":441}," string              ",[427,643,644],{"class":620},"\u002F\u002F the PHP #[UploadableField] property (default: 'file')\n",[427,646,647,650,652,655],{"class":429,"line":525},[427,648,649],{"class":441},"    imagineFilterName",[427,651,629],{"class":504},[427,653,654],{"class":441}," string     ",[427,656,657],{"class":620},"\u002F\u002F Imagine filter variant to surface as displayMedia\n",[427,659,660,663,665,668],{"class":429,"line":530},[427,661,662],{"class":441},"    imageRef",[427,664,629],{"class":504},[427,666,667],{"class":441}," ShallowRef          ",[427,669,670],{"class":620},"\u002F\u002F template ref for load detection (default: useTemplateRef(fileProp))\n",[427,672,673],{"class":429,"line":570},[427,674,675],{"class":437},"  }\n",[427,677,678],{"class":429,"line":587},[427,679,593],{"class":441},[681,682,683,699,715],"ul",{},[684,685,686,687,690,691,694,695,698],"li",{},"Pass ",[375,688,689],{},"props"," directly — no need to ",[375,692,693],{},"toRef"," the ",[375,696,697],{},"iri","; the composable resolves the resource itself.",[684,700,701,706,707,710,711,714],{},[409,702,703],{},[375,704,705],{},"fileProp"," — which uploadable field to read. Defaults to ",[375,708,709],{},"'file'",", and also becomes the default template-ref name used to detect when an ",[375,712,713],{},"\u003Cimg>"," has already loaded.",[684,716,717,721,722,725,726,729,730,733,734,737],{},[409,718,719],{},[375,720,415],{}," — the LiipImagineBundle filter to surface as ",[375,723,724],{},"displayMedia","\u002F",[375,727,728],{},"contentUrl"," (e.g. ",[375,731,732],{},"'thumbnail'",", ",[375,735,736],{},"'hero'","). Omit for the original uploaded file.",[595,739,741],{"id":740},"return-values","Return values",[743,744,745,761],"table",{},[746,747,748],"thead",{},[749,750,751,755,758],"tr",{},[752,753,754],"th",{},"Return",[752,756,757],{},"Type",[752,759,760],{},"Purpose",[762,763,764,779,809,831],"tbody",{},[749,765,766,771,776],{},[767,768,769],"td",{},[375,770,728],{},[767,772,773],{},[375,774,775],{},"ComputedRef\u003Cstring | undefined>",[767,777,778],{},"URL of the (optionally filtered) file",[749,780,781,785,790],{},[767,782,783],{},[375,784,724],{},[767,786,787],{},[375,788,789],{},"ComputedRef\u003CMediaFile | undefined>",[767,791,792,793,733,795,733,798,733,801,804,805,808],{},"The media object to display — has ",[375,794,728],{},[375,796,797],{},"mimeType",[375,799,800],{},"width",[375,802,803],{},"height","; ",[375,806,807],{},"undefined"," until available",[749,810,811,816,821],{},[767,812,813],{},[375,814,815],{},"handleLoad",[767,817,818],{},[375,819,820],{},"() => void",[767,822,823,824,826,827,830],{},"Call on the ",[375,825,713],{},"'s ",[375,828,829],{},"@load"," event",[749,832,833,838,843],{},[767,834,835],{},[375,836,837],{},"loaded",[767,839,840],{},[375,841,842],{},"Ref\u003Cboolean>",[767,844,845,848,849,852],{},[375,846,847],{},"true"," once ",[375,850,851],{},"handleLoad()"," fires",[595,854,856],{"id":855},"example","Example",[418,858,862],{"className":859,"code":860,"language":861,"meta":423,"style":423},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003Ctemplate>\n  \u003CNuxtImg\n    v-if=\"displayMedia\"\n    ref=\"file\"\n    :src=\"contentUrl\"\n    :width=\"displayMedia.width\"\n    :height=\"displayMedia.height\"\n    @load=\"handleLoad\"\n  \u002F>\n  \u003Cdiv v-else class=\"skeleton h-48 w-full bg-gray-200 animate-pulse\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { useCwaFileField } from '#imports'\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\n\nconst props = defineProps\u003CIriProp>()\nconst { contentUrl, displayMedia, handleLoad } = useCwaFileField(props, { imagineFilterName: 'thumbnail' })\n\u003C\u002Fscript>\n","vue",[375,863,864,875,883,900,914,927,941,955,968,974,1003,1013,1018,1042,1061,1082,1087,1106,1151],{"__ignoreMap":423},[427,865,866,868,872],{"class":429,"line":430},[427,867,512],{"class":437},[427,869,871],{"class":870},"s-h7I","template",[427,873,874],{"class":437},">\n",[427,876,877,880],{"class":429,"line":462},[427,878,879],{"class":437},"  \u003C",[427,881,882],{"class":870},"NuxtImg\n",[427,884,885,889,892,895,897],{"class":429,"line":486},[427,886,888],{"class":887},"sGtlX","    v-if",[427,890,891],{"class":437},"=",[427,893,894],{"class":451},"\"",[427,896,724],{"class":455},[427,898,899],{"class":451},"\"\n",[427,901,902,905,907,909,912],{"class":429,"line":493},[427,903,904],{"class":887},"    ref",[427,906,891],{"class":437},[427,908,894],{"class":451},[427,910,911],{"class":455},"file",[427,913,899],{"class":451},[427,915,916,919,921,923,925],{"class":429,"line":525},[427,917,918],{"class":887},"    :src",[427,920,891],{"class":437},[427,922,894],{"class":451},[427,924,728],{"class":455},[427,926,899],{"class":451},[427,928,929,932,934,936,939],{"class":429,"line":530},[427,930,931],{"class":887},"    :width",[427,933,891],{"class":437},[427,935,894],{"class":451},[427,937,938],{"class":455},"displayMedia.width",[427,940,899],{"class":451},[427,942,943,946,948,950,953],{"class":429,"line":570},[427,944,945],{"class":887},"    :height",[427,947,891],{"class":437},[427,949,894],{"class":451},[427,951,952],{"class":455},"displayMedia.height",[427,954,899],{"class":451},[427,956,957,960,962,964,966],{"class":429,"line":587},[427,958,959],{"class":887},"    @load",[427,961,891],{"class":437},[427,963,894],{"class":451},[427,965,815],{"class":455},[427,967,899],{"class":451},[427,969,971],{"class":429,"line":970},9,[427,972,973],{"class":437},"  \u002F>\n",[427,975,977,979,982,985,988,990,992,995,997,1001],{"class":429,"line":976},10,[427,978,879],{"class":437},[427,980,981],{"class":870},"div",[427,983,984],{"class":887}," v-else",[427,986,987],{"class":887}," class",[427,989,891],{"class":437},[427,991,894],{"class":451},[427,993,994],{"class":455},"skeleton h-48 w-full bg-gray-200 animate-pulse",[427,996,894],{"class":451},[427,998,1000],{"class":999},"s01iV"," \u002F",[427,1002,874],{"class":437},[427,1004,1006,1009,1011],{"class":429,"line":1005},11,[427,1007,1008],{"class":437},"\u003C\u002F",[427,1010,871],{"class":870},[427,1012,874],{"class":437},[427,1014,1016],{"class":429,"line":1015},12,[427,1017,490],{"emptyLinePlaceholder":489},[427,1019,1021,1023,1026,1029,1032,1034,1036,1038,1040],{"class":429,"line":1020},13,[427,1022,512],{"class":437},[427,1024,1025],{"class":870},"script",[427,1027,1028],{"class":887}," setup",[427,1030,1031],{"class":887}," lang",[427,1033,891],{"class":437},[427,1035,894],{"class":451},[427,1037,422],{"class":455},[427,1039,894],{"class":451},[427,1041,874],{"class":437},[427,1043,1045,1047,1049,1051,1053,1055,1057,1059],{"class":429,"line":1044},14,[427,1046,434],{"class":433},[427,1048,438],{"class":437},[427,1050,442],{"class":441},[427,1052,445],{"class":437},[427,1054,448],{"class":433},[427,1056,452],{"class":451},[427,1058,456],{"class":455},[427,1060,459],{"class":451},[427,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080],{"class":429,"line":1063},15,[427,1065,434],{"class":433},[427,1067,467],{"class":433},[427,1069,438],{"class":437},[427,1071,472],{"class":441},[427,1073,445],{"class":437},[427,1075,448],{"class":433},[427,1077,452],{"class":451},[427,1079,481],{"class":455},[427,1081,459],{"class":451},[427,1083,1085],{"class":429,"line":1084},16,[427,1086,490],{"emptyLinePlaceholder":489},[427,1088,1090,1092,1094,1096,1098,1100,1102,1104],{"class":429,"line":1089},17,[427,1091,497],{"class":496},[427,1093,501],{"class":500},[427,1095,505],{"class":504},[427,1097,509],{"class":508},[427,1099,512],{"class":437},[427,1101,516],{"class":515},[427,1103,519],{"class":437},[427,1105,522],{"class":441},[427,1107,1109,1111,1113,1115,1117,1119,1121,1123,1125,1127,1129,1131,1133,1135,1138,1140,1142,1144,1147,1149],{"class":429,"line":1108},18,[427,1110,497],{"class":496},[427,1112,438],{"class":437},[427,1114,537],{"class":500},[427,1116,540],{"class":437},[427,1118,543],{"class":500},[427,1120,540],{"class":437},[427,1122,548],{"class":500},[427,1124,445],{"class":437},[427,1126,505],{"class":504},[427,1128,442],{"class":508},[427,1130,562],{"class":441},[427,1132,540],{"class":437},[427,1134,438],{"class":437},[427,1136,1137],{"class":573}," imagineFilterName",[427,1139,577],{"class":437},[427,1141,452],{"class":451},[427,1143,582],{"class":455},[427,1145,1146],{"class":451},"'",[427,1148,445],{"class":437},[427,1150,593],{"class":441},[427,1152,1154,1156,1158],{"class":429,"line":1153},19,[427,1155,1008],{"class":437},[427,1157,1025],{"class":870},[427,1159,874],{"class":437},[372,1161,1162,1163,1166,1167,1169,1170,1172,1173,1175],{},"The ",[375,1164,1165],{},"ref=\"file\""," matches the default ",[375,1168,705],{},", letting the composable detect an already-cached image on mount. ",[375,1171,724],{}," stays ",[375,1174,807],{}," until the media exists, keeping the skeleton visible.",[595,1177,1179],{"id":1178},"multiple-file-fields","Multiple file fields",[372,1181,1182,1183,577],{},"Call it once per field, naming each with ",[375,1184,705],{},[418,1186,1188],{"className":420,"code":1187,"language":422,"meta":423,"style":423},"const hero  = useCwaFileField(props, { fileProp: 'heroImage' })\nconst thumb = useCwaFileField(props, { fileProp: 'thumbnail' })\n\u002F\u002F hero.contentUrl, thumb.contentUrl, …\n",[375,1189,1190,1224,1255],{"__ignoreMap":423},[427,1191,1192,1194,1197,1200,1202,1204,1206,1208,1211,1213,1215,1218,1220,1222],{"class":429,"line":430},[427,1193,497],{"class":496},[427,1195,1196],{"class":500}," hero",[427,1198,1199],{"class":504},"  =",[427,1201,442],{"class":508},[427,1203,562],{"class":441},[427,1205,540],{"class":437},[427,1207,438],{"class":437},[427,1209,1210],{"class":573}," fileProp",[427,1212,577],{"class":437},[427,1214,452],{"class":451},[427,1216,1217],{"class":455},"heroImage",[427,1219,1146],{"class":451},[427,1221,445],{"class":437},[427,1223,593],{"class":441},[427,1225,1226,1228,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253],{"class":429,"line":462},[427,1227,497],{"class":496},[427,1229,1230],{"class":500}," thumb",[427,1232,505],{"class":504},[427,1234,442],{"class":508},[427,1236,562],{"class":441},[427,1238,540],{"class":437},[427,1240,438],{"class":437},[427,1242,1210],{"class":573},[427,1244,577],{"class":437},[427,1246,452],{"class":451},[427,1248,582],{"class":455},[427,1250,1146],{"class":451},[427,1252,445],{"class":437},[427,1254,593],{"class":441},[427,1256,1257],{"class":429,"line":486},[427,1258,1259],{"class":620},"\u002F\u002F hero.contentUrl, thumb.contentUrl, …\n",[372,1261,1262,1263,1265,1266,1269,1270,1276],{},"If you're already calling ",[375,1264,395],{},", prefer the plugin form — ",[375,1267,1268],{},"useCwaComponent(props, [withFile({ fileProp: 'heroImage' }), withFile({ fileProp: 'thumbnail' })])"," exposes the same data under a ",[386,1271,1272,1275],{"href":388},[375,1273,1274],{},"files"," map",".",[1278,1279,1280],"style",{},"html pre.shiki code .sm4w6, html code.shiki .sm4w6{--shiki-light:#D73A49;--shiki-light-font-style:inherit;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .seSrl, html code.shiki .seSrl{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .sLL54, html code.shiki .sLL54{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .sDHlG, html code.shiki .sDHlG{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTBSN, html code.shiki .sTBSN{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s-h7I, html code.shiki .s-h7I{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sGtlX, html code.shiki .sGtlX{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .s01iV, html code.shiki .s01iV{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:inherit}",{"title":423,"searchDepth":462,"depth":462,"links":1282},[1283,1284,1285,1286],{"id":597,"depth":462,"text":598},{"id":740,"depth":462,"text":741},{"id":855,"depth":462,"text":856},{"id":1178,"depth":462,"text":1179},"Resolve a single uploadable file field on a resource — content URL, display media, load state, and Imagine filter variants — named at the call site.","md",null,{},{"title":242},{"title":364,"description":1287},"smiE-rWJJ1joqmO2KesJ6YPRNd4AQMTO9GQoLaV1iCc",[1295,1297],{"title":238,"path":239,"stem":240,"description":1296,"children":-1},"Composable for Collection-backed components — access paginated items, total pages, and page navigation.",{"title":246,"path":247,"stem":248,"description":1298,"children":-1},"Handle form submission, track in-flight state, and read form-level errors from a CWA Form component resource.",1783701662010]