ph-ajax-upload attribute

This widget can be used directly on your website, uploaded file will go to Cloudflare R2.

    upload result will be here.

<div
      id="blob-result" 
      ph-highlight="https://pagehelper.lets-script.com/highlight/"
      ph-params="lang::json,inline::true"
      ph-data-consumer="innerhtml">
      <pre>
    upload result will be here.
</pre>
</div>
<ul ph-data-consumer="innerhtml-mustache" id="blob-result-live">

<template>
{{#.}}
<a href="{{url}}" target="_blank">{{originFileName}}</a>
{{/.}}
</template>

</ul>
<form
  method="put"
  ph-target="#blob-result,#blob-result-live"
  ph-ajax-upload="https://pagehelper.lets-script.com/upload/r2-blob"
  action=""
  novalidate
>
  <input type="file" name="file" multiple ph-disable-on-working/>
  <div
    ph-error-css="is-invalid"
    ph-error-message="please select a file."
  ></div>
  <button type="submit" ph-disable-on-working class="btn">Upload</button>
</form>

auto upload after select

upload result will be here.

<span id="blob-result-auto" ph-data-consumer="innerhtml"></span>
<ul ph-data-consumer="innerhtml-mustache" id="blob-result-auto-live">

<template>
{{#.}}
<a href="{{url}}" target="_blank">{{originFileName}}</a>
{{/.}}
</template>

</ul>
<form
  method="put"
  ph-auto-start
  ph-target="#blob-result-auto,#blob-result-auto-live"
  ph-ajax-upload="https://pagehelper.lets-script.com/upload/r2-blob"
  action=""
  novalidate
>
  <input type="file" name="file" multiple />
  <div
    ph-error-css="is-invalid"
    ph-error-message="please select a file."
  ></div>
</form>

extra attributes for this helper:

name	descriptio	link
ph-not-blob	default submit File as the body to server.	fileupload
ph-api-key	add an apikey so that you will own the uploaded files.	Get Apikey
ph-callback-remote	callback the url with the data just received.	format: method:url, post:/mycb