x
1
2
3
4
5
<!-- Url -->
<button name="button" type="submit" class="btn" hidden="hidden" data-controller="web-share" data-action="web-share#share" data-web-share-url-value="https://workbook.37signals.com" data-web-share-text-value="Link to join Writebook" data-web-share-title-value="Hit this link to join me in Writebook and start writing.">Share URL</button>
<!-- Files -->
<button name="button" type="submit" class="btn" hidden="hidden" data-controller="web-share" data-action="web-share#share" data-web-share-file-value="https://csszero.lazaronixon.com/assets/cartoon-93de1535.jpg" data-web-share-title-value="cartoon.jpg">Share File</button>
1
2
3
4
5
<%# Url %>
<%= button_tag "Share URL", class: "btn", hidden: true, data: { controller: "web-share", action: "web-share#share", web_share_url_value: "https://workbook.37signals.com", web_share_text_value: "Link to join Writebook", web_share_title_value: "Hit this link to join me in Writebook and start writing." } %>
<%# Files %>
<%= button_tag "Share File", class: "btn", hidden: true, data: { controller: "web-share", action: "web-share#share", web_share_file_value: asset_url("cartoon.jpg"), web_share_title_value: "cartoon.jpg" } %>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { Controller } from "@hotwired/stimulus"
const APPLICATION_NAME = "my_application"
export default class extends Controller {
static values = { title: String, text: String, url: String, file: String }
connect() {
this.element.hidden = !navigator.canShare
}
async share() {
try {
await navigator.share(await this.#getShareData())
} catch(error) {
console.warn(error.message);
}
}
async #getShareData() {
const data = { title: this.titleValue, text: this.textValue }
if (this.urlValue) {
data.url = this.urlValue
}
if (this.fileValue) {
data.files = [ await this.#getFileObject()]
}
return data;
}
async #getFileObject() {
const response = await fetch(this.fileValue)
const blob = await response.blob()
const randomPrefix = `${APPLICATION_NAME}_${Math.random().toString(36).slice(2)}`
const fileName = `${randomPrefix}.${blob.type.split('/').pop()}`
return new File([ blob ], fileName, { type: blob.type })
}
}