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