Added preloading

Avoid to load big text files
Other improvements

app/Controllers/UploadController.php

@@ -39,7 +39,7 @@ class UploadController extends Controller
 			return $response->withJson($json, 400);
 		}
 
-		if ($request->getUploadedFiles()['upload']->getError() === UPLOAD_ERR_INI_SIZE) {
+		if (isset($request->getUploadedFiles()['upload']) && $request->getUploadedFiles()['upload']->getError() === UPLOAD_ERR_INI_SIZE) {
 			$json['message'] = 'File too large (upload_max_filesize too low).';
 			return $response->withJson($json, 400);
 		}
@@ -104,18 +104,25 @@ class UploadController extends Controller
 			throw new NotFoundException($request, $response);
 		}
 
+		$filesystem = storage();
+
 		if (isBot($request->getHeaderLine('User-Agent'))) {
-			return $this->streamMedia($request, $response, storage(), $media);
+			return $this->streamMedia($request, $response, $filesystem, $media);
 		} else {
-			$filesystem = storage();
 			try {
 				$media->mimetype = $filesystem->getMimetype($media->storage_path);
-				$media->size = humanFileSize($filesystem->getSize($media->storage_path));
+				$size = $filesystem->getSize($media->storage_path);
 
 				$type = explode('/', $media->mimetype)[0];
 				if ($type === 'text') {
-					$media->text = $filesystem->read($media->storage_path);
+					if ($size <= (200 * 1024)) {// less than 200 KB
+						$media->text = $filesystem->read($media->storage_path);
+					} else {
+						$type = 'application';
+						$media->mimetype = 'application/octet-stream';
+					}
 				}
+				$media->size = humanFileSize($size);
 
 			} catch (FileNotFoundException $e) {
 				throw new NotFoundException($request, $response);
@@ -124,6 +131,7 @@ class UploadController extends Controller
 			return $this->view->render($response, 'upload/public.twig', [
 				'delete_token' => isset($args['token']) ? $args['token'] : null,
 				'media' => $media,
+				'type' => $type,
 				'extension' => pathinfo($media->filename, PATHINFO_EXTENSION),
 			]);
 		}

app/helpers.php

@@ -216,6 +216,7 @@ if (!function_exists('mime2font')) {
 			'application/json' => 'fa-file-code',
 			'application/gzip' => 'fa-file-archive',
 			'application/zip' => 'fa-file-archive',
+			'application/octet-stream' => 'fa-file-alt',
 		];
 
 		foreach ($classes as $fullMime => $class) {
@@ -223,7 +224,7 @@ if (!function_exists('mime2font')) {
 				return $class;
 			}
 		}
-		return 'fa-file';
+		return 'fa-file-download';
 	}
 }
 

composer.json

@@ -1,6 +1,6 @@
 {
   "name": "sergix44/xbackbone",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "A lightweight ShareX PHP backend",
   "type": "project",
   "require": {

resources/templates/base.twig

@@ -4,20 +4,20 @@
     <title>{% block title %}Default{% endblock %} | {{ config.app_name }}</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="A lightweight PHP backend for ShareX">
+    <meta name="description" content="XBackBone is a simple and lightweight PHP backend for ShareX">
     <link rel="shortcut icon" href="{{ urlFor('/favicon.ico') }}" type="image/x-icon">
     <link rel="icon" href="{{ urlFor('/favicon.ico') }}" type="image/x-icon">
-    <link href="{{ urlFor('/static/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
+    <link href="{{ urlFor('/static/bootstrap/css/bootstrap.min.css') }}" rel="preload" as="style" onload="this.rel='stylesheet'">
     <link href="{{ urlFor('/static/highlightjs/styles/monokai.css') }}" rel="stylesheet">
     <link href="{{ urlFor('/static/videojs/video-js.min.css') }}" rel="stylesheet">
-    <link href="{{ urlFor('/static/app/app.css') }}" rel="stylesheet">
-    <script src="{{ urlFor('/static/jquery/jquery.min.js') }}"></script>
-    <script src="{{ urlFor('/static/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
-    <script src="{{ urlFor('/static/fontawesome/js/all.min.js') }}"></script>
+    <link href="{{ urlFor('/static/app/app.css') }}" rel="preload" as="style" onload="this.rel='stylesheet'">
+    <script src="{{ urlFor('/static/jquery/jquery.min.js') }}" rel="prefetch"></script>
+    <script src="{{ urlFor('/static/bootstrap/js/bootstrap.bundle.min.js') }}" rel="prefetch"></script>
+    <script src="{{ urlFor('/static/fontawesome/js/all.min.js') }}" rel="prefetch"></script>
     <script src="{{ urlFor('/static/highlightjs/highlight.pack.min.js') }}"></script>
     <script src="{{ urlFor('/static/clipboardjs/clipboard.min.js') }}"></script>
     <script src="{{ urlFor('/static/videojs/video.min.js') }}"></script>
-    <script src="{{ urlFor('/static/app/app.js') }}"></script>
+    <script src="{{ urlFor('/static/app/app.js') }}" rel="prefetch"></script>
     <script>hljs.initHighlightingOnLoad();</script>
     <script>window.AppConfig = {'base_url': '{{ config.base_url }}', 'lang': {'publish': '{{ lang('publish') }}', 'hide': '{{ lang('hide') }}'}}</script>
     {% block head %}{% endblock %}

resources/templates/errors/405.twig

@@ -6,7 +6,7 @@
     <div class="container-fluid mt-5">
         <div class="text-center">
             <h1 class="display-1">405 Method Not Allowed</h1>
-            <p class="lead">The method received in the request-line is not supported by the target resource.</p>
+            <p class="lead">The method received in the request line is not supported by the target resource.</p>
         </div>
     </div>
 {% endblock %}

resources/templates/upload/public.twig

@@ -2,6 +2,12 @@
 
 {% block title %}{{ media.filename }}{% endblock %}
 
+{% block head %}
+    {% if type in ['image', 'text'] %}
+        <link rel="preload" href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" as="{{ type }}">
+    {% endif %}
+{% endblock %}
+
 {% block content %}
     <nav class="navbar navbar-dark bg-primary navbar-expand-md mb-4">
         <div class="container-fluid">
@@ -37,7 +43,7 @@
                         </div>
                     </form>
                 {% endif %}
-                {% if media.mimetype starts with 'image' %}
+                {% if type is same as ('image') %}
                     <div class="row mb-2">
                         <div class="col-md-12">
                             <img src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" class="img-thumbnail rounded mx-auto d-block" alt="{{ media.filename }}">
@@ -48,7 +54,7 @@
                             {{ media.filename }}
                         </div>
                     </div>
-                {% elseif media.mimetype starts with 'text' %}
+                {% elseif type is same as ('text') %}
                     <div class="row mb-2">
                         <div class="col-md-12">
                             <pre><code>{{ media.text }}</code></pre>
@@ -59,19 +65,19 @@
                             {{ media.filename }}
                         </div>
                     </div>
-                {% elseif media.mimetype starts with 'video' %}
+                {% elseif type is same as ('audio') %}
                     <div class="media-player">
-                        <video id="player" class="video-js vjs-big-play-centered vjs-16-9" autoplay controls loop preload="auto" data-setup='{"responsive": true }'>
+                        <audio id="player" class="video-js vjs-big-play-centered vjs-16-9" autoplay controls loop preload="auto" data-setup='{"responsive": true }'>
                             <source src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" type="{{ media.mimetype }}">
-                            Your browser does not support HTML5 video.
-                        </video>
+                            Your browser does not support HTML5 audio.
+                        </audio>
                     </div>
-                {% elseif media.mimetype starts with 'audio' %}
+                {% elseif type is same as ('video') %}
                     <div class="media-player">
-                        <audio id="player"  class="video-js vjs-big-play-centered vjs-16-9" autoplay controls loop preload="auto" data-setup='{"responsive": true }'>
+                        <video id="player" class="video-js vjs-big-play-centered vjs-16-9" autoplay controls loop preload="auto" data-setup='{"responsive": true }'>
                             <source src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" type="{{ media.mimetype }}">
-                            Your browser does not support HTML5 audio.
-                        </audio>
+                            Your browser does not support HTML5 video.
+                        </video>
                     </div>
                 {% else %}
                     <div class="text-center">