url-file-share/index.html at main · below43/url-file-share · GitHub

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>URL File - share files embedded within URLs</title>
	<link rel="stylesheet" href="style.css">
	<link rel="manifest" href="manifest.json">
	<link rel="icon" href="icon.png" type="image/png">
	<link rel="apple-touch-icon" href="icon.png">
	<link rel="shortcut icon" href="icon.png" type="image/png">
</head>

<body>
	<div id="loading"></div>
	<div class="container">
		<h1>URL File</h1>
		<p class="introtext">Share files embedded within URLs. Fully client-side, no server storage.</p>
		<div id="create-payload">
			<label for="fileInput" style="display:none">File</label>
			<input type="file" id="fileInput" onchange="convertFile()">
			<p><em>Note: this works best with small files</em></p>
		</div>
		<div id="create-text-payload" style="display:none">
			<label for="textInput" style="display:none">Text</label>
			<textarea id="textInput" rows="10" cols="50" placeholder="Paste or type your text here..."></textarea>
			<br>
			<button onclick="convertText()" class="button-solid">Create Shareable Link</button>
			<button onclick="share()" id="share-text" class="button-solid" style="display:none">Copy URL + Payload</button>
			<p><em>Note: this works best with small text</em></p>
		</div>
		<div id="payload-error" class="note" style="display:none">
			<b>Error: Unable to load file</b><br /><br />
			This normally occurs with larger files, when the browser truncates the query string. You may want to paste the URL + payload instead.<br /><br />
			<button onclick="pastePayload(event)" class="button-solid">Paste the URL + Payload</button>
		</div>
		<div id="display-payload" style="display:none">
			<div class="file-info">
				<p><b>Filename</b><span id="filename"></span></p>
				<p><b>File size</b><span id="fileSize"></span></p>
				<p><b>MIME type</b><span id="fileMimeType"></span></p>
				<p><b>Date &amp; time</b><span id="uploadDate"></span></p>
				<div id="filePreview"></div>
				<p id="fileContent"></p>
			</div>
			<div class="link-preview">
				<button onclick="share()" id="share" class="button-solid">Copy URL + Payload</button>
			</div>
			</p>
			<p id="size-warning" class="note" style="display:none">
				<b>Warning:</b> The file is large, so some browsers may end up truncating the query string. You may need to paste the URL + Payload at the other end to retrieve the file.
			</p>
		</div>
		<div id="toast"></div>
		<footer>
			<div class="footer-links">
				<a href="#" onclick="reset(event)" class="small-link">Share file</a>
				<a href="#" onclick="showTextInput(event)" class="small-link">Share text</a>
				<a href="#" onclick="pastePayload(event)" class="small-link">Paste URL + Payload</a>
				<a href="#about" onclick="showModal(event, 'about')" class="small-link">About</a>
				<a href="#terms" onclick="showModal(event, 'terms')">Terms & privacy</a>
			</div>
		</footer>
	</div>

    <script src="script.js" async></script>

	<dialog id="terms" class="backdrop">
		<h3>Terms of Service</h3>
		<div class="modal-body">
			<p>This service is provided "as is" without any warranties, express or implied. Use of this service is at your own risk. The service provider does not guarantee the availability, accuracy, or functionality of the service.</p>
			<p>Users must not use this service for any illegal or unauthorized purposes.</p>
		</div>
		<h3>Privacy Policy</h3>
		<div class="modal-body">
			<p>This is a privacy-first tool. None of your data is stored or tracked. No files are saved on a server. <a href="https://www.cloudflare.com/en-au/web-analytics/">Cloudflare Web Analytics</a> records privacy-first anonymous usage data (there is no client-side state collection of usage metrics).</p>
		</div>
		<div class="modal-buttons">
			<button onclick="closeModal('terms')" class="button-outline">Close</button>
		</div>
	</dialog>

	<dialog id="about" class="backdrop">
		<h2>About</h2>
		<div class="modal-body">
			<p>I built this tool to transfer files using just the URL, without storing files on a server.</p>
			<p>The file is Base64-encoded and embedded as a payload within the URL via the <a href="https://developer.mozilla.org/en-US/docs/Web/URI/Fragment" target="_blank" rel="nofollow">URI fragment</a> (delineated by the # character). The payload is only loaded locally in the client (browser) and is not sent to the server, which is beneficial from a privacy perspective and reduces the chance of the payload being truncated. This tool is not suitable for larger files, but it's fun to see what <a href="https://stackoverflow.com/a/417184" nofollow="nofollow" target="_blank">each browser's limit</a> is.</p>
			<p>This was mostly built as an academic exercise to show that a file can be transported via a URL. However, I've found it quite useful for small file transfers between machines over a <a href="https://github.com/input-leap/input-leap" nofollow="nofollow" target="_blank">virtual KVM</a> or to mobiles via <a href="https://www.microsoft.com/en-us/edge/learning-center/how-to-generate-qr-codes?form=MA13I2" nofollow="nofollow" target="_blank">QR codes</a>.</p>
			<p>I also wanted to build this as a SPA &amp; PWA without using a framework, so it's fairly basic code-wise - but that makes it a bit easier to check it's OK to use :) Project homepage: <a href="https://github.com/below43/url-file-share" target="_blank">GitHub</a></p>
		</div>
		<div class="modal-buttons">
			<button onclick="closeModal('about')" class="button-outline">Close</button>
		</div>
	</dialog>

</body>

</html>