Added cancel upload button

Added button delete
2019-11-21 15:23:02 +01:00 · 2019-11-21 15:23:02 +01:00 · 7589348daf
parent 8730a42ad5
commit 7589348daf
9 changed files with 167 additions and 145 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,7 @@
 + Added ability to add custom HTML in \<head\> tag.
 + Added ability to show a preview of PDF files.
 + Added remember me functionality.
+ Added delete button on the preview page if the user is logged in.
 + Raw URL now accept file extensions.
 + The linux script can be used on headless systems.
 + Improved installer.
--- a/app/Controllers/MediaController.php
+++ b/app/Controllers/MediaController.php
@ -22,13 +22,13 @@ class MediaController extends Controller
     * @param  string  $mediaCode
     * @param  string|null  $token
     *
+     * @return Response
     * @throws HttpNotFoundException
     * @throws \Twig\Error\LoaderError
     * @throws \Twig\Error\RuntimeError
     * @throws \Twig\Error\SyntaxError
     * @throws FileNotFoundException
     *
-     * @return Response
     */
    public function show(Request $request, Response $response, string $userCode, string $mediaCode, string $token = null): Response
    {
@ -42,7 +42,8 @@ class MediaController extends Controller

        if (isBot($request->getHeaderLine('User-Agent'))) {
            return $this->streamMedia($request, $response, $filesystem, $media);
-        } else {
+        }
+
        try {
            $media->mimetype = $filesystem->getMimetype($media->storage_path);
            $size = $filesystem->getSize($media->storage_path);
@ -69,20 +70,19 @@ class MediaController extends Controller
            'delete_token' => $token,
            'media' => $media,
            'type' => $type,
-                'extension'    => pathinfo($media->filename, PATHINFO_EXTENSION),
+            'url' => urlFor("/{$userCode}/{$mediaCode}"),
        ]);
    }
-    }

    /**
     * @param  Request  $request
     * @param  Response  $response
     * @param  int  $id
     *
-     * @throws FileNotFoundException
+     * @return Response
     * @throws HttpNotFoundException
     *
-     * @return Response
+     * @throws FileNotFoundException
     */
    public function getRawById(Request $request, Response $response, int $id): Response
    {
@ -102,11 +102,11 @@ class MediaController extends Controller
     * @param  string  $mediaCode
     * @param  string|null  $ext
     *
-     * @throws FileNotFoundException
+     * @return Response
     * @throws HttpBadRequestException
     * @throws HttpNotFoundException
     *
-     * @return Response
+     * @throws FileNotFoundException
     */
    public function getRaw(Request $request, Response $response, string $userCode, string $mediaCode, ?string $ext = null): Response
    {
@ -129,10 +129,10 @@ class MediaController extends Controller
     * @param  string  $userCode
     * @param  string  $mediaCode
     *
-     * @throws FileNotFoundException
+     * @return Response
     * @throws HttpNotFoundException
     *
-     * @return Response
+     * @throws FileNotFoundException
     */
    public function download(Request $request, Response $response, string $userCode, string $mediaCode): Response
    {
@ -150,9 +150,9 @@ class MediaController extends Controller
     * @param  Response  $response
     * @param  int  $id
     *
+     * @return Response
     * @throws HttpNotFoundException
     *
-     * @return Response
     */
    public function togglePublish(Request $request, Response $response, int $id): Response
    {
@ -176,10 +176,10 @@ class MediaController extends Controller
     * @param  Response  $response
     * @param  int  $id
     *
-     * @throws HttpNotFoundException
+     * @return Response
     * @throws HttpUnauthorizedException
     *
-     * @return Response
+     * @throws HttpNotFoundException
     */
    public function delete(Request $request, Response $response, int $id): Response
    {
@ -197,6 +197,10 @@ class MediaController extends Controller
            throw new HttpUnauthorizedException($request);
        }

+        if ($request->getMethod() === 'GET') {
+            return redirect($response, route('home'));
+        }
+
        return $response;
    }

@ -207,10 +211,10 @@ class MediaController extends Controller
     * @param  string  $mediaCode
     * @param  string  $token
     *
-     * @throws HttpNotFoundException
+     * @return Response
     * @throws HttpUnauthorizedException
     *
-     * @return Response
+     * @throws HttpNotFoundException
     */
    public function deleteByToken(Request $request, Response $response, string $userCode, string $mediaCode, string $token): Response
    {
@ -287,9 +291,9 @@ class MediaController extends Controller
     * @param $media
     * @param  string  $disposition
     *
+     * @return Response
     * @throws FileNotFoundException
     *
-     * @return Response
     */
    protected function streamMedia(Request $request, Response $response, Filesystem $storage, $media, string $disposition = 'inline'): Response
    {
@ -326,9 +330,9 @@ class MediaController extends Controller
     * @param  null  $height
     * @param  string  $disposition
     *
+     * @return Response
     * @throws FileNotFoundException
     *
-     * @return Response
     */
    protected function makeThumbnail(Filesystem $storage, $media, $width = null, $height = null, string $disposition = 'inline')
    {
--- a/app/Controllers/UploadController.php
+++ b/app/Controllers/UploadController.php
@ -12,11 +12,11 @@ class UploadController extends Controller
     * @param  Request  $request
     * @param  Response  $response
     *
-     * @throws \Twig\Error\LoaderError
+     * @return Response
     * @throws \Twig\Error\RuntimeError
     * @throws \Twig\Error\SyntaxError
     *
-     * @return Response
+     * @throws \Twig\Error\LoaderError
     */
    public function webUpload(Request $request, Response $response): Response
    {
@ -37,9 +37,9 @@ class UploadController extends Controller
     * @param  Request  $request
     * @param  Response  $response
     *
+     * @return Response
     * @throws FileExistsException
     *
-     * @return Response
     */
    public function upload(Request $request, Response $response): Response
    {
@ -113,7 +113,7 @@ class UploadController extends Controller
        ]);

        $json['message'] = 'OK.';
-        $json['url'] = urlFor("/$user->user_code/$code.$fileInfo[extension]");
+        $json['url'] = urlFor("/{$user->user_code}/{$code}.{$fileInfo['extension']}");

        $this->logger->info("User $user->username uploaded new media.", [$this->database->getPdo()->lastInsertId()]);

--- a/app/routes.php
+++ b/app/routes.php
@ -57,7 +57,7 @@ $app->group('', function (RouteCollectorProxy $group) {
    $group->post('/upload/{id}/publish', [MediaController::class, 'togglePublish'])->setName('upload.publish');
    $group->post('/upload/{id}/unpublish', [MediaController::class, 'togglePublish'])->setName('upload.unpublish');
    $group->get('/upload/{id}/raw', [MediaController::class, 'getRawById'])->add(AdminMiddleware::class)->setName('upload.raw');
-    $group->post('/upload/{id}/delete', [MediaController::class, 'delete'])->setName('upload.delete');
+    $group->map(['GET', 'POST'],'/upload/{id}/delete', [MediaController::class, 'delete'])->setName('upload.delete');
 })->add(App\Middleware\CheckForMaintenanceMiddleware::class)->add(AuthMiddleware::class);

 $app->get('/', [DashboardController::class, 'redirects'])->setName('root');
--- a/resources/templates/comp/modal_delete.twig
+++ b/resources/templates/comp/modal_delete.twig
@ -0,0 +1,19 @@
+<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{{ lang('confirm') }}</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>{{ lang('confirm_string') }}</p>
+            </div>
+            <div class="modal-footer">
+                <a href="#" class="btn btn-danger" id="modalDelete-link"><i class="fas fa-trash fa-fw"></i> {{ lang('delete') }}</a>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ lang('no') }}</button>
+            </div>
+        </div>
+    </div>
+</div>
--- a/resources/templates/upload/public.twig
+++ b/resources/templates/upload/public.twig
@ -3,8 +3,8 @@
 {% 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 }}">
+    {% if type == 'image' %}
+        <link rel="preload" href="{{ url }}/raw" as="{{ type }}">
    {% endif %}
 {% endblock %}

@ -17,10 +17,13 @@
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <div class="ml-auto">
-                    <a href="javascript:void(0)" class="btn btn-success my-2 my-sm-0 btn-clipboard" data-toggle="tooltip" title="{{ lang('copy_link') }}" data-clipboard-text="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension) }}"><i class="fas fa-link fa-lg fa-fw"></i></a>
+                    <a href="javascript:void(0)" class="btn btn-success my-2 my-sm-0 btn-clipboard" data-toggle="tooltip" title="{{ lang('copy_link') }}" data-clipboard-text="{{ url }}"><i class="fas fa-link fa-lg fa-fw"></i></a>
                    <a href="javascript:void(0)" class="btn btn-info my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('public.telegram') }}" onclick="$('#modalTelegramShare').modal('toggle')"><i class="fab fa-telegram-plane fa-lg fa-fw"></i></a>
-                    <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" class="btn btn-secondary my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('raw') }}"><i class="fas fa-file-alt fa-lg fa-fw"></i></a>
-                    <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-danger my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('download') }}"><i class="fas fa-cloud-download-alt fa-lg fa-fw"></i></a>
+                    <a href="{{ url }}/raw" class="btn btn-secondary my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('raw') }}"><i class="fas fa-file-alt fa-lg fa-fw"></i></a>
+                    <a href="{{ url }}/download" class="btn btn-warning my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('download') }}"><i class="fas fa-cloud-download-alt fa-lg fa-fw"></i></a>
+                    {% if session.get('logged') %}
+                        <a href="javascript:void(0)" class="btn btn-danger my-2 my-sm-0 public-delete" data-link="{{ route('upload.delete', {'id': media.mediaId}) }}" data-toggle="tooltip" title="{{ lang('delete') }}"><i class="fas fa-trash fa-lg fa-fw"></i></a>
+                    {% endif %}
                </div>
            </div>
        </div>
@ -30,12 +33,12 @@
        <div class="row ml-auto mr-auto">
            <div class="col-md-12 justify-content-center">
                {% if delete_token is not null %}
-                    <form method="post" action="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/delete/' ~ delete_token) }}">
+                    <form method="post" action="{{ url }}/delete/{{ delete_token }}">
                        <div class="text-center mb-4">
                            <p>{{ lang('public.delete_text') }}</p>
                            <div class="btn-group">
                                <button type="submit" class="btn btn-danger"><i class="fas fa-trash"></i> {{ lang('yes') }}</button>
-                                <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension) }}" class="btn btn-secondary">{{ lang('no') }}</a>
+                                <a href="{{ url }}" class="btn btn-secondary">{{ lang('no') }}</a>
                            </div>
                        </div>
                    </form>
@ -43,7 +46,7 @@
                {% 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 }}">
+                            <img src="{{ url }}/raw" class="img-thumbnail rounded mx-auto d-block" alt="{{ media.filename }}">
                        </div>
                    </div>
                    <div class="row">
@ -65,23 +68,23 @@
                {% elseif type is same as ('audio') %}
                    <div class="media-player media-audio">
                        <audio id="player" autoplay controls loop preload="auto">
-                            <source src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" type="{{ media.mimetype }}">
+                            <source src="{{ url }}/raw" type="{{ media.mimetype }}">
                            Your browser does not support HTML5 audio.
-                            <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
+                            <a href="{{ url }}/download" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
                        </audio>
                    </div>
                {% elseif type is same as ('video') %}
                    <div class="media-player">
                        <video id="player" autoplay controls loop preload="auto">
-                            <source src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" type="{{ media.mimetype }}">
+                            <source src="{{ url }}/raw" type="{{ media.mimetype }}">
                            Your browser does not support HTML5 video.
-                            <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
+                            <a href="{{ url }}/download" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
                        </video>
                    </div>
                {% elseif media.mimetype is same as ('application/pdf') %}
-                    <object type="{{ media.mimetype }}" data="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" class="pdf-viewer">
+                    <object type="{{ media.mimetype }}" data="{{ url }}/raw" class="pdf-viewer">
                        Your browser does not support PDF previews.
-                        <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
+                        <a href="{{ url }}/download" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
                    </object>
                {% else %}
                    <div class="text-center">
@ -102,7 +105,7 @@
                        </div>
                        <div class="row">
                            <div class="col-md-12">
-                                <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
+                                <a href="{{ url }}/download" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
                            </div>
                        </div>
                    </div>
@ -123,11 +126,12 @@
                    <textarea type="text" class="form-control mb-2" id="telegram-share-text" onclick="this.select()">{{ media.filename }}</textarea>
                </div>
                <div class="modal-footer">
-                    <button type="button" class="btn btn-info btn-block" id="telegram-share-button" onclick="app.telegramShare()" data-url="https://telegram.me/share/url?url={{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension) }}&text=">
+                    <button type="button" class="btn btn-info btn-block" id="telegram-share-button" onclick="app.telegramShare()" data-url="https://telegram.me/share/url?url={{ url }}&text=">
                        <i class="fab fa-telegram-plane fa-lg fa-fw"></i> {{ lang("send") }}</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ lang('cancel') }}</button>
                </div>
            </div>
        </div>
    </div>
+    {% include 'comp/modal_delete.twig' %}
 {% endblock %}
--- a/resources/templates/upload/web.twig
+++ b/resources/templates/upload/web.twig
@ -8,9 +8,18 @@
        {% include 'comp/alert.twig' %}
        <div class="card shadow-sm">
            <div class="card-body">
-                <div class="progress mb-3">
+                <div class="row mb-3">
+                    <div class="col-10">
+                        <div class="progress h-100">
                            <div class="progress-bar progress-bar-animated progress-bar-striped" style="width: 0;" id="uploadProgess"></div>
                        </div>
+                    </div>
+                    <div class="col-2 text-center">
+                        <button type="button" class="btn btn-sm btn-outline-danger btn-block" onclick="Dropzone.instances[0].removeAllFiles(true)" data-toggle="tooltip" title="{{ lang('cancel') }}"><i class="fas fa-times"></i></button>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
                        <form action="{{ route('upload') }}" method="post" id="upload-dropzone" class="dropzone">
                            <div class="fallback">
                                <input name="file" type="file" multiple>
@ -20,4 +29,6 @@
                    </div>
                </div>
            </div>
+        </div>
+    </div>
 {% endblock %}
--- a/resources/templates/user/index.twig
+++ b/resources/templates/user/index.twig
@ -54,7 +54,7 @@
                                <td class="text-right">
                                    <div class="btn-group">
                                        <a href="{{ route('user.edit', {'id': user.id}) }}" class="btn btn-outline-warning" data-toggle="tooltip" title="{{ lang('edit') }}"><i class="fas fa-pencil-alt"></i></a>
-                                        <a href="#" class="btn btn-outline-danger user-delete" data-link="{{ route('user.delete', {'id': user.id}) }}" data-toggle="tooltip" title="{{ lang('delete') }}"><i class="fas fa-trash"></i></a>
+                                        <a href="javascript:void(0)" class="btn btn-outline-danger user-delete" data-link="{{ route('user.delete', {'id': user.id}) }}" data-toggle="tooltip" title="{{ lang('delete') }}"><i class="fas fa-trash"></i></a>
                                    </div>
                                </td>
                            </tr>
@ -68,23 +68,5 @@
            </div>
        </div>
    </div>
-    <div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-hidden="true">
-        <div class="modal-dialog modal-sm">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">{{ lang('confirm') }}</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <p>{{ lang('confirm_string') }}</p>
-                </div>
-                <div class="modal-footer">
-                    <a href="#" class="btn btn-danger" id="modalDelete-link"><i class="fas fa-trash fa-fw"></i> {{ lang('delete') }}</a>
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ lang('no') }}</button>
-                </div>
-            </div>
-        </div>
-    </div>
+    {% include 'comp/modal_delete.twig' %}
 {% endblock %}
--- a/src/js/app.js
+++ b/src/js/app.js
@ -18,6 +18,7 @@ var app = {
        $('[data-toggle="popover"]').popover();

        $('.user-delete').click(app.modalDelete);
+        $('.public-delete').click(app.modalDelete);
        $('.media-delete').click(app.mediaDelete);
        $('.publish-toggle').click(app.publishToggle);
        $('.refresh-token').click(app.refreshToken);