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 }) }}
Your browser must support web share.