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.
- {{#.}} {{originFileName}} {{/.}}
<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.
- {{#.}} {{originFileName}} {{/.}}
<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 |
ph-fire-event | fire a custom event with the data just received. | format: name:target , foo:window |
ph-disable-on-working | disable the element which has this attribute when uploading |