From 5039b236a10c233af594b0daa253d8e5382b6018 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A1szl=C3=B3=20G=C3=B6r=C3=B6g?= <contact@nergal.xyz>
Date: Fri, 12 Jun 2020 21:11:25 +0200
Subject: [PATCH] Create examples for JS libraries

---
 examples/blueimp.blade.php            | 49 +++++++++++++++++++++++++++
 examples/dropzone.blade.php           | 34 +++++++++++++++++++
 examples/flow-js.blade.php            | 37 ++++++++++++++++++++
 examples/resumable-js.blade.php       | 37 ++++++++++++++++++++
 examples/simple-uploader-js.blade.php | 37 ++++++++++++++++++++
 5 files changed, 194 insertions(+)
 create mode 100644 examples/blueimp.blade.php
 create mode 100644 examples/dropzone.blade.php
 create mode 100644 examples/flow-js.blade.php
 create mode 100644 examples/resumable-js.blade.php
 create mode 100644 examples/simple-uploader-js.blade.php
diff --git a/examples/blueimp.blade.php b/examples/blueimp.blade.php
new file mode 100644
index 0000000..21d18b6
--- /dev/null
+++ b/examples/blueimp.blade.php
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Blueimp</title>
+</head>
+<body>
+    <h1>Blueimp</h1>
+
+    <span class="btn btn-default">
+        <input id="browseButton" type="file" multiple="multiple">
+    </span>
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="//cdn.jsdelivr.net/gh/blueimp/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
+    <script src="//cdn.jsdelivr.net/gh/blueimp/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
+    <script src="//cdn.jsdelivr.net/gh/blueimp/jQuery-File-Upload/js/jquery.fileupload.js"></script>
+    <script>
+        const uploadUrl = "{{ url('upload') }}";
+        $('#browseButton').fileupload({
+            url: uploadUrl,
+            maxChunkSize: 100 * 1024,
+            formData: {
+                _token: "{{ csrf_token() }}"
+            },
+            // Resuming file uploads
+            // https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads#resuming-file-uploads
+            add: function (e, data) {
+                $.ajax({
+                    url: uploadUrl,
+                    dataType: "json",
+                    data: {
+                        file: data.files[0].name,
+                        totalSize: data.files[0].size
+                    },
+                    success: (result) => {
+                        const file = result.file;
+                        data.uploadedBytes = file && file.size;
+                        $.blueimp.fileupload.prototype
+                            .options.add.call(this, e, data);
+                    },
+                });
+            },
+        });
+    </script>
+</body>
+</html>
diff --git a/examples/dropzone.blade.php b/examples/dropzone.blade.php
new file mode 100644
index 0000000..9511584
--- /dev/null
+++ b/examples/dropzone.blade.php
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>DropzoneJS</title>
+
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/enyo/dropzone/dist/dropzone.css">
+</head>
+<body>
+    <h1>DropzoneJS</h1>
+
+    <form action="{{ url('upload') }}" class="dropzone" id="my-dropzone">
+        @csrf
+        <span class="btn btn-default">
+            <input id="browseButton" type="file" multiple="multiple" style="display: none">
+        </span>
+    </form>
+
+    <script src="//cdn.jsdelivr.net/gh/enyo/dropzone/dist/dropzone.js"></script>
+    <script>
+        Dropzone.autoDiscover = false;
+
+        // https://gitlab.com/meno/dropzone/-/wikis/faq#chunked-uploads
+        const dz = new Dropzone('#my-dropzone', {
+            chunking: true,
+            method: 'POST',
+            chunkSize: 1024 * 1024,
+            parallelChunkUploads: true
+        });
+    </script>
+</body>
+</html>
diff --git a/examples/flow-js.blade.php b/examples/flow-js.blade.php
new file mode 100644
index 0000000..6794e92
--- /dev/null
+++ b/examples/flow-js.blade.php
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Flow.js</title>
+</head>
+<body>
+    <h1>Flow.js</h1>
+
+    <span class="btn btn-default">
+        <input id="browseButton" type="file" multiple="multiple">
+    </span>
+
+    <script src="//cdn.jsdelivr.net/gh/flowjs/flow.js/dist/flow.min.js"></script>
+    <script>
+        function getCookieValue(a) {
+            const b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
+            return b ? b.pop() : '';
+        }
+
+        const flow = new Flow({
+            target: "{{ url('upload') }}",
+            headers: {'X-XSRF-TOKEN': decodeURIComponent(getCookieValue('XSRF-TOKEN'))},
+            forceChunkSize: true,
+        });
+        flow.assignBrowse(document.getElementById('browseButton'));
+
+        flow.on('fileAdded', function (file, event) {
+            setTimeout(() => {
+                flow.upload();
+            })
+        });
+    </script>
+</body>
+</html>
diff --git a/examples/resumable-js.blade.php b/examples/resumable-js.blade.php
new file mode 100644
index 0000000..7b147a8
--- /dev/null
+++ b/examples/resumable-js.blade.php
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Resumable.js</title>
+</head>
+<body>
+    <h1>Resumable.js</h1>
+
+    <span class="btn btn-default">
+        <input id="browseButton" type="file" multiple="multiple">
+    </span>
+
+    <script src="//cdn.jsdelivr.net/gh/23/resumable.js/resumable.js"></script>
+    <script>
+        function getCookieValue(a) {
+            const b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
+            return b ? b.pop() : '';
+        }
+
+        const r = new Resumable({
+            target: "{{ url('upload') }}",
+            headers: {'X-XSRF-TOKEN': decodeURIComponent(getCookieValue('XSRF-TOKEN'))},
+            forceChunkSize: true,
+        });
+        r.assignBrowse(document.getElementById('browseButton'));
+
+        r.on('fileAdded', function (file, event) {
+            setTimeout(() => {
+                r.upload();
+            })
+        });
+    </script>
+</body>
+</html>
diff --git a/examples/simple-uploader-js.blade.php b/examples/simple-uploader-js.blade.php
new file mode 100644
index 0000000..84dec9e
--- /dev/null
+++ b/examples/simple-uploader-js.blade.php
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>simple-uploader.js</title>
+</head>
+<body>
+    <h1>simple-uploader.js</h1>
+
+    <span class="btn btn-default">
+        <input id="browseButton" type="file" multiple="multiple">
+    </span>
+
+    <script src="//cdn.jsdelivr.net/gh/simple-uploader/Uploader/dist/uploader.min.js"></script>
+    <script>
+        function getCookieValue(a) {
+            const b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
+            return b ? b.pop() : '';
+        }
+
+        const uploader = new Uploader({
+            target: "{{ url('upload') }}",
+            headers: {'X-XSRF-TOKEN': decodeURIComponent(getCookieValue('XSRF-TOKEN'))},
+            forceChunkSize: true,
+        });
+        uploader.assignBrowse(document.getElementById('browseButton'));
+
+        uploader.on('fileAdded', function (file, event) {
+            setTimeout(() => {
+                uploader.upload();
+            })
+        });
+    </script>
+</body>
+</html>
