[{"data":1,"prerenderedAt":799},["ShallowReactive",2],{"navigation_docs":3,"-frameworks-qwik":57,"-frameworks-qwik-surround":794},[4,8,12,16,20,24,28],{"title":5,"path":6,"stem":7},"Introduction","\u002Fintroduction","1.introduction",{"title":9,"path":10,"stem":11},"Installation","\u002Finstallation","2.installation",{"title":13,"path":14,"stem":15},"SDKs","\u002Fsdk","3.sdk",{"title":17,"path":18,"stem":19},"Dashboard","\u002Fdashboard","4.dashboard",{"title":21,"path":22,"stem":23},"HTTP API","\u002Fhttp-api","5.http-api",{"title":25,"path":26,"stem":27},"Image Transformations","\u002Ftransformations","6.transformations",{"title":29,"path":30,"stem":31,"children":32},"Framework Components","\u002Fframeworks","frameworks",[33,37,41,45,49,53],{"title":34,"path":35,"stem":36},"Dart","\u002Fframeworks\u002Fdart","frameworks\u002Fdart",{"title":38,"path":39,"stem":40},"Flutter","\u002Fframeworks\u002Fflutter","frameworks\u002Fflutter",{"title":42,"path":43,"stem":44},"Qwik","\u002Fframeworks\u002Fqwik","frameworks\u002Fqwik",{"title":46,"path":47,"stem":48},"React","\u002Fframeworks\u002Freact","frameworks\u002Freact",{"title":50,"path":51,"stem":52},"Svelte","\u002Fframeworks\u002Fsvelte","frameworks\u002Fsvelte",{"title":54,"path":55,"stem":56},"Vue","\u002Fframeworks\u002Fvue","frameworks\u002Fvue",{"id":58,"title":42,"body":59,"description":788,"extension":789,"links":790,"meta":791,"navigation":154,"path":43,"seo":792,"stem":44,"__hash__":793},"docs\u002Fframeworks\u002Fqwik.md",{"type":60,"value":61,"toc":783},"minimark",[62,71,76,383,387,564,568,575,618,779],[63,64,65,66,70],"p",{},"The ",[67,68,69],"code",{},"@pichaflow\u002Fqwik"," package provides a high-performance upload component optimized for Qwik's resumability.",[72,73,75],"h2",{"id":74},"usage","Usage",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { component$, $ } from '@builder.io\u002Fqwik';\nimport { PichaUpload } from '@pichaflow\u002Fqwik';\n\nexport default component$(() => {\n  const onUploadSuccess$ = $((response) => {\n    console.log('Uploaded to Edge:', response.url);\n  });\n\n  return (\n    \u003CPichaUpload\n      useSecure={true}\n      signatureUrl=\"\u002Fapi\u002Fmedia\u002Fv1\u002Fupload\u002Fsign\"\n      tags={['ecommerce', 'qwik']}\n      onSuccess$={onUploadSuccess$}\n    \u002F>\n  );\n});\n","tsx","",[67,84,85,127,149,156,181,211,246,256,261,270,280,296,314,346,359,365,373],{"__ignoreMap":82},[86,87,90,94,98,102,105,108,111,114,117,121,124],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"s7zQu","import",[86,95,97],{"class":96},"sMK4o"," {",[86,99,101],{"class":100},"sTEyZ"," component$",[86,103,104],{"class":96},",",[86,106,107],{"class":100}," $",[86,109,110],{"class":96}," }",[86,112,113],{"class":92}," from",[86,115,116],{"class":96}," '",[86,118,120],{"class":119},"sfazB","@builder.io\u002Fqwik",[86,122,123],{"class":96},"'",[86,125,126],{"class":96},";\n",[86,128,130,132,134,137,139,141,143,145,147],{"class":88,"line":129},2,[86,131,93],{"class":92},[86,133,97],{"class":96},[86,135,136],{"class":100}," PichaUpload",[86,138,110],{"class":96},[86,140,113],{"class":92},[86,142,116],{"class":96},[86,144,69],{"class":119},[86,146,123],{"class":96},[86,148,126],{"class":96},[86,150,152],{"class":88,"line":151},3,[86,153,155],{"emptyLinePlaceholder":154},true,"\n",[86,157,159,162,165,168,171,174,178],{"class":88,"line":158},4,[86,160,161],{"class":92},"export",[86,163,164],{"class":92}," default",[86,166,101],{"class":167},"s2Zo4",[86,169,170],{"class":100},"(",[86,172,173],{"class":96},"()",[86,175,177],{"class":176},"spNyl"," =>",[86,179,180],{"class":96}," {\n",[86,182,184,187,190,193,195,198,200,204,207,209],{"class":88,"line":183},5,[86,185,186],{"class":176},"  const",[86,188,189],{"class":100}," onUploadSuccess$",[86,191,192],{"class":96}," =",[86,194,107],{"class":167},[86,196,170],{"class":197},"swJcz",[86,199,170],{"class":96},[86,201,203],{"class":202},"sHdIc","response",[86,205,206],{"class":96},")",[86,208,177],{"class":176},[86,210,180],{"class":96},[86,212,214,217,220,223,225,227,230,232,234,237,239,242,244],{"class":88,"line":213},6,[86,215,216],{"class":100},"    console",[86,218,219],{"class":96},".",[86,221,222],{"class":167},"log",[86,224,170],{"class":197},[86,226,123],{"class":96},[86,228,229],{"class":119},"Uploaded to Edge:",[86,231,123],{"class":96},[86,233,104],{"class":96},[86,235,236],{"class":100}," response",[86,238,219],{"class":96},[86,240,241],{"class":100},"url",[86,243,206],{"class":197},[86,245,126],{"class":96},[86,247,249,252,254],{"class":88,"line":248},7,[86,250,251],{"class":96},"  }",[86,253,206],{"class":197},[86,255,126],{"class":96},[86,257,259],{"class":88,"line":258},8,[86,260,155],{"emptyLinePlaceholder":154},[86,262,264,267],{"class":88,"line":263},9,[86,265,266],{"class":92},"  return",[86,268,269],{"class":197}," (\n",[86,271,273,276],{"class":88,"line":272},10,[86,274,275],{"class":96},"    \u003C",[86,277,279],{"class":278},"sBMFI","PichaUpload\n",[86,281,283,286,289,293],{"class":88,"line":282},11,[86,284,285],{"class":176},"      useSecure",[86,287,288],{"class":96},"={",[86,290,292],{"class":291},"sfNiH","true",[86,294,295],{"class":96},"}\n",[86,297,299,302,305,308,311],{"class":88,"line":298},12,[86,300,301],{"class":176},"      signatureUrl",[86,303,304],{"class":96},"=",[86,306,307],{"class":96},"\"",[86,309,310],{"class":119},"\u002Fapi\u002Fmedia\u002Fv1\u002Fupload\u002Fsign",[86,312,313],{"class":96},"\"\n",[86,315,317,320,322,325,327,330,332,334,336,339,341,344],{"class":88,"line":316},13,[86,318,319],{"class":176},"      tags",[86,321,288],{"class":96},[86,323,324],{"class":100},"[",[86,326,123],{"class":96},[86,328,329],{"class":119},"ecommerce",[86,331,123],{"class":96},[86,333,104],{"class":96},[86,335,116],{"class":96},[86,337,338],{"class":119},"qwik",[86,340,123],{"class":96},[86,342,343],{"class":100},"]",[86,345,295],{"class":96},[86,347,349,352,354,357],{"class":88,"line":348},14,[86,350,351],{"class":176},"      onSuccess$",[86,353,288],{"class":96},[86,355,356],{"class":100},"onUploadSuccess$",[86,358,295],{"class":96},[86,360,362],{"class":88,"line":361},15,[86,363,364],{"class":96},"    \u002F>\n",[86,366,368,371],{"class":88,"line":367},16,[86,369,370],{"class":197},"  )",[86,372,126],{"class":96},[86,374,376,379,381],{"class":88,"line":375},17,[86,377,378],{"class":96},"}",[86,380,206],{"class":100},[86,382,126],{"class":96},[72,384,386],{"id":385},"props","Props",[388,389,390,409],"table",{},[391,392,393],"thead",{},[394,395,396,400,403,406],"tr",{},[397,398,399],"th",{},"Prop",[397,401,402],{},"Type",[397,404,405],{},"Default",[397,407,408],{},"Description",[410,411,412,448,468,508,525,544],"tbody",{},[394,413,414,420,425,430],{},[415,416,417],"td",{},[67,418,419],{},"apiKey",[415,421,422],{},[67,423,424],{},"string",[415,426,427],{},[67,428,429],{},"undefined",[415,431,432,433,436,437,440,441,444,445,447],{},"Optional if using ",[67,434,435],{},"signatureUrl"," or ",[67,438,439],{},"customUploadEndpoint",". Your PichaFlow Secret Key (",[67,442,443],{},"sk_live_...","). Note: Exposing your secret key on the frontend is insecure; use ",[67,446,435],{}," instead.",[394,449,450,455,460,465],{},[415,451,452],{},[67,453,454],{},"useSecure",[415,456,457],{},[67,458,459],{},"boolean",[415,461,462],{},[67,463,464],{},"false",[415,466,467],{},"Enable the HMAC-SHA256 handshake flow for secure browser uploads.",[394,469,470,474,478,482],{},[415,471,472],{},[67,473,435],{},[415,475,476],{},[67,477,424],{},[415,479,480],{},[67,481,429],{},[415,483,484,485,487,488,491,492,491,495,491,498,491,501,504,505,219],{},"The endpoint on your backend that signs the upload request (Required if ",[67,486,454],{}," is true). Must return a JSON object with ",[67,489,490],{},"signature",", ",[67,493,494],{},"timestamp",[67,496,497],{},"tenantId",[67,499,500],{},"directory",[67,502,503],{},"maxSize",", and ",[67,506,507],{},"allowedTypes",[394,509,510,514,518,522],{},[415,511,512],{},[67,513,439],{},[415,515,516],{},[67,517,424],{},[415,519,520],{},[67,521,429],{},[415,523,524],{},"A complete URL to a proxy endpoint for upload bypassing PichaFlow Edge Engine completely.",[394,526,527,532,536,541],{},[415,528,529],{},[67,530,531],{},"baseUrl",[415,533,534],{},[67,535,424],{},[415,537,538],{},[67,539,540],{},"https:\u002F\u002Fapi.pichaflow.com",[415,542,543],{},"Optional API base URL.",[394,545,546,551,556,561],{},[415,547,548],{},[67,549,550],{},"tags",[415,552,553],{},[67,554,555],{},"string[]",[415,557,558],{},[67,559,560],{},"[]",[415,562,563],{},"Tags to apply to the upload.",[72,565,567],{"id":566},"events-qrls","Events (QRLs)",[63,569,570,571,574],{},"Qwik events use the ",[67,572,573],{},"$"," suffix to indicate they are lazy-loadable.",[388,576,577,587],{},[391,578,579],{},[394,580,581,583,585],{},[397,582,399],{},[397,584,402],{},[397,586,408],{},[410,588,589,604],{},[394,590,591,596,601],{},[415,592,593],{},[67,594,595],{},"onSuccess$",[415,597,598],{},[67,599,600],{},"PropFunction",[415,602,603],{},"Fired when upload completes successfully.",[394,605,606,611,615],{},[415,607,608],{},[67,609,610],{},"onError$",[415,612,613],{},[67,614,600],{},[415,616,617],{},"Fired on network or server errors.",[619,620,621,638,770],"blockquote",{},[63,622,623,626,630,631,633,634,637],{},[86,624,625],{},"!NOTE",[627,628,629],"strong",{},"Signature Response Contract",": Your ",[67,632,435],{}," endpoint must return a JSON body with the following fields. The component uses all of them to construct the five ",[67,635,636],{},"X-Picha-*"," headers sent to the Edge Engine:",[77,639,643],{"className":640,"code":641,"language":642,"meta":82,"style":82},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"signature\":    \"\u003Chmac-sha256-hex>\",\n  \"timestamp\":    1234567890000,\n  \"tenantId\":     \"pf_prj_...\",\n  \"directory\":    \"products\u002Fsummer\u002F\",\n  \"maxSize\":      \"5242880\",\n  \"allowedTypes\": \"image\u002Fwebp,image\u002Fjpeg\"\n}\n","json",[67,644,645,650,673,689,709,728,748,766],{"__ignoreMap":82},[86,646,647],{"class":88,"line":89},[86,648,649],{"class":96},"{\n",[86,651,652,655,657,659,662,665,668,670],{"class":88,"line":129},[86,653,654],{"class":96},"  \"",[86,656,490],{"class":176},[86,658,307],{"class":96},[86,660,661],{"class":96},":",[86,663,664],{"class":96},"    \"",[86,666,667],{"class":119},"\u003Chmac-sha256-hex>",[86,669,307],{"class":96},[86,671,672],{"class":96},",\n",[86,674,675,677,679,681,683,687],{"class":88,"line":151},[86,676,654],{"class":96},[86,678,494],{"class":176},[86,680,307],{"class":96},[86,682,661],{"class":96},[86,684,686],{"class":685},"sbssI","    1234567890000",[86,688,672],{"class":96},[86,690,691,693,695,697,699,702,705,707],{"class":88,"line":158},[86,692,654],{"class":96},[86,694,497],{"class":176},[86,696,307],{"class":96},[86,698,661],{"class":96},[86,700,701],{"class":96},"     \"",[86,703,704],{"class":119},"pf_prj_...",[86,706,307],{"class":96},[86,708,672],{"class":96},[86,710,711,713,715,717,719,721,724,726],{"class":88,"line":183},[86,712,654],{"class":96},[86,714,500],{"class":176},[86,716,307],{"class":96},[86,718,661],{"class":96},[86,720,664],{"class":96},[86,722,723],{"class":119},"products\u002Fsummer\u002F",[86,725,307],{"class":96},[86,727,672],{"class":96},[86,729,730,732,734,736,738,741,744,746],{"class":88,"line":213},[86,731,654],{"class":96},[86,733,503],{"class":176},[86,735,307],{"class":96},[86,737,661],{"class":96},[86,739,740],{"class":96},"      \"",[86,742,743],{"class":119},"5242880",[86,745,307],{"class":96},[86,747,672],{"class":96},[86,749,750,752,754,756,758,761,764],{"class":88,"line":248},[86,751,654],{"class":96},[86,753,507],{"class":176},[86,755,307],{"class":96},[86,757,661],{"class":96},[86,759,760],{"class":96}," \"",[86,762,763],{"class":119},"image\u002Fwebp,image\u002Fjpeg",[86,765,313],{"class":96},[86,767,768],{"class":88,"line":258},[86,769,295],{"class":96},[63,771,772,773,778],{},"See ",[774,775,777],"a",{"href":776},"\u002Fhttp-api#_10-client-side-upload-signatures","HTTP API → Client-Side Upload Signatures"," for the full HMAC construction guide.",[780,781,782],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":82,"searchDepth":129,"depth":129,"links":784},[785,786,787],{"id":74,"depth":129,"text":75},{"id":385,"depth":129,"text":386},{"id":566,"depth":129,"text":567},"Integrate PichaFlow into your Qwik applications with fine-grained reactivity.","md",null,{},{"title":42,"description":788},"Uv_Xtiayr0wb4mA-UWAH5yvQ6d8PfywA8ZI13mCnkuI",[795,797],{"title":38,"path":39,"stem":40,"description":796,"children":-1},"Integrate PichaFlow into your Flutter applications.",{"title":46,"path":47,"stem":48,"description":798,"children":-1},"Integrate PichaFlow into your React and Next.js applications.",1789565439841]