Skip to content

Commit 897a940

Browse files
nerg4lnerg4l
authored
Create examples for JS libraries (#51)
1 parent 60f169d commit 897a940

File tree

5 files changed

+194
-0
lines changed

5 files changed

+194
-0
lines changed

‎examples/blueimp.blade.php‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>Blueimp</title>
8+
</head>
9+
<body>
10+
<h1>Blueimp</h1>
11+
12+
<span class="btn btn-default">
13+
<input id="browseButton" type="file" multiple="multiple">
14+
</span>
15+
16+
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
17+
<script src="//cdn.jsdelivr.net/gh/blueimp/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
18+
<script src="//cdn.jsdelivr.net/gh/blueimp/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
19+
<script src="//cdn.jsdelivr.net/gh/blueimp/jQuery-File-Upload/js/jquery.fileupload.js"></script>
20+
<script>
21+
const uploadUrl = "{{ url('upload') }}";
22+
$('#browseButton').fileupload({
23+
url: uploadUrl,
24+
maxChunkSize: 100 * 1024,
25+
formData: {
26+
_token: "{{ csrf_token() }}"
27+
},
28+
// Resuming file uploads
29+
// https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads#resuming-file-uploads
30+
add: function (e, data) {
31+
$.ajax({
32+
url: uploadUrl,
33+
dataType: "json",
34+
data: {
35+
file: data.files[0].name,
36+
totalSize: data.files[0].size
37+
},
38+
success: (result) => {
39+
const file = result.file;
40+
data.uploadedBytes = file && file.size;
41+
$.blueimp.fileupload.prototype
42+
.options.add.call(this, e, data);
43+
},
44+
});
45+
},
46+
});
47+
</script>
48+
</body>
49+
</html>

‎examples/dropzone.blade.php‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>DropzoneJS</title>
8+
9+
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/enyo/dropzone/dist/dropzone.css">
10+
</head>
11+
<body>
12+
<h1>DropzoneJS</h1>
13+
14+
<form action="{{ url('upload') }}" class="dropzone" id="my-dropzone">
15+
@csrf
16+
<span class="btn btn-default">
17+
<input id="browseButton" type="file" multiple="multiple" style="display: none">
18+
</span>
19+
</form>
20+
21+
<script src="//cdn.jsdelivr.net/gh/enyo/dropzone/dist/dropzone.js"></script>
22+
<script>
23+
Dropzone.autoDiscover = false;
24+
25+
// https://gitlab.com/meno/dropzone/-/wikis/faq#chunked-uploads
26+
const dz = new Dropzone('#my-dropzone', {
27+
chunking: true,
28+
method: 'POST',
29+
chunkSize: 1024 * 1024,
30+
parallelChunkUploads: true
31+
});
32+
</script>
33+
</body>
34+
</html>

‎examples/flow-js.blade.php‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>Flow.js</title>
8+
</head>
9+
<body>
10+
<h1>Flow.js</h1>
11+
12+
<span class="btn btn-default">
13+
<input id="browseButton" type="file" multiple="multiple">
14+
</span>
15+
16+
<script src="//cdn.jsdelivr.net/gh/flowjs/flow.js/dist/flow.min.js"></script>
17+
<script>
18+
function getCookieValue(a) {
19+
const b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
20+
return b ? b.pop() : '';
21+
}
22+
23+
const flow = new Flow({
24+
target: "{{ url('upload') }}",
25+
headers: {'X-XSRF-TOKEN': decodeURIComponent(getCookieValue('XSRF-TOKEN'))},
26+
forceChunkSize: true,
27+
});
28+
flow.assignBrowse(document.getElementById('browseButton'));
29+
30+
flow.on('fileAdded', function (file, event) {
31+
setTimeout(() => {
32+
flow.upload();
33+
})
34+
});
35+
</script>
36+
</body>
37+
</html>

‎examples/resumable-js.blade.php‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>Resumable.js</title>
8+
</head>
9+
<body>
10+
<h1>Resumable.js</h1>
11+
12+
<span class="btn btn-default">
13+
<input id="browseButton" type="file" multiple="multiple">
14+
</span>
15+
16+
<script src="//cdn.jsdelivr.net/gh/23/resumable.js/resumable.js"></script>
17+
<script>
18+
function getCookieValue(a) {
19+
const b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
20+
return b ? b.pop() : '';
21+
}
22+
23+
const r = new Resumable({
24+
target: "{{ url('upload') }}",
25+
headers: {'X-XSRF-TOKEN': decodeURIComponent(getCookieValue('XSRF-TOKEN'))},
26+
forceChunkSize: true,
27+
});
28+
r.assignBrowse(document.getElementById('browseButton'));
29+
30+
r.on('fileAdded', function (file, event) {
31+
setTimeout(() => {
32+
r.upload();
33+
})
34+
});
35+
</script>
36+
</body>
37+
</html>

‎examples/simple-uploader-js.blade.php‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>simple-uploader.js</title>
8+
</head>
9+
<body>
10+
<h1>simple-uploader.js</h1>
11+
12+
<span class="btn btn-default">
13+
<input id="browseButton" type="file" multiple="multiple">
14+
</span>
15+
16+
<script src="//cdn.jsdelivr.net/gh/simple-uploader/Uploader/dist/uploader.min.js"></script>
17+
<script>
18+
function getCookieValue(a) {
19+
const b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
20+
return b ? b.pop() : '';
21+
}
22+
23+
const uploader = new Uploader({
24+
target: "{{ url('upload') }}",
25+
headers: {'X-XSRF-TOKEN': decodeURIComponent(getCookieValue('XSRF-TOKEN'))},
26+
forceChunkSize: true,
27+
});
28+
uploader.assignBrowse(document.getElementById('browseButton'));
29+
30+
uploader.on('fileAdded', function (file, event) {
31+
setTimeout(() => {
32+
uploader.upload();
33+
})
34+
});
35+
</script>
36+
</body>
37+
</html>

0 commit comments

Comments
 (0)