Implemented a progress bar for uploading photos, and allowed multiple uploads using the single upload file control

2016-09-05 12:01:30 +01:00 · 2016-09-05 12:01:30 +01:00 · 80dd1e4a40
parent 69f9b0fb41
commit 80dd1e4a40
12 changed files with 247 additions and 30 deletions
--- a/app/Console/Commands/ProcessUploadCommand.php
+++ b/app/Console/Commands/ProcessUploadCommand.php
@ -62,24 +62,46 @@ class ProcessUploadCommand extends Command
    {
        $uploadsToProcess = Upload::where([
            ['is_completed', false],
-            ['is_processing', false]
+            ['is_processing', false],
+            ['is_ready', true]
        ])
            ->orderBy('created_at')
            ->get();

+        /** @var Upload $upload */
        foreach ($uploadsToProcess as $upload)
        {
+            $upload->is_processing = 1;
+            $upload->save();
+
            $this->output->writeln(sprintf('Processing upload #%d', $upload->id));
            $this->handleUpload($upload);
+
+            $upload->is_completed = 1;
+            $upload->is_processing = 0;
+            $upload->save();
        }
    }

    private function handleUpload(Upload $upload)
    {
        $photos = $upload->uploadPhotos;
+
+        /** @var UploadPhoto $photo */
        foreach ($photos as $photo)
        {
-            $this->handlePhoto($photo);
+            try
+            {
+                $this->handlePhoto($photo);
+                $upload->number_successful++;
+            }
+            catch (\Exception $ex)
+            {
+                $upload->number_failed++;
+                $photo->delete();
+            }
+
+            $upload->save();
        }
    }

--- a/app/Console/Kernel.php
+++ b/app/Console/Kernel.php
@ -29,7 +29,11 @@ class Kernel extends ConsoleKernel
        $schedule->command('twilight:process-uploads')
            ->everyMinute()
            ->when(function () {
-                return (Upload::where('is_completed', 0)->count() > 0);
+                return (Upload::where([
+                    'is_completed' => 0,
+                    'is_processing' => 0,
+                    'is_ready' => 1
+                ])->count() > 0);
            });
    }

--- a/app/Http/Controllers/Admin/AlbumController.php
+++ b/app/Http/Controllers/Admin/AlbumController.php
@ -6,6 +6,7 @@ use App\Album;
 use App\Facade\Theme;
 use App\Http\Controllers\Controller;
 use App\Http\Requests;
+use App\Upload;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\App;

@ -94,6 +95,22 @@ class AlbumController extends Controller
        return Theme::render('admin.edit_album', ['album' => $album]);
    }

+    public function monitorUpload($id, $upload_id)
+    {
+        $this->authorize('admin-access');
+
+        $upload = AlbumController::loadUpload($upload_id, $id);
+
+        return Theme::render('admin.album_upload_progress', ['upload' => $upload, 'album' => $upload->album]);
+    }
+
+    public function monitorUploadJson($id, $upload_id)
+    {
+        $this->authorize('admin-access');
+
+        return response()->json(AlbumController::loadUpload($upload_id, $id)->toArray());
+    }
+
    /**
     * Update the specified resource in storage.
     *
@ -142,4 +159,25 @@ class AlbumController extends Controller

        return $album;
    }
+
+    /**
+     * @param $id
+     * @param $albumId
+     * @return Upload|null
+     */
+    private static function loadUpload($id, $albumId)
+    {
+        $upload = Upload::where([
+            'id' => intval($id),
+            'album_id' => intval($albumId)
+        ])->first();
+
+        if (is_null($upload))
+        {
+            App::abort(404);
+            return null;
+        }
+
+        return $upload;
+    }
 }
--- a/app/Http/Controllers/Admin/PhotoController.php
+++ b/app/Http/Controllers/Admin/PhotoController.php
@ -42,35 +42,49 @@ class PhotoController extends Controller
    {
        $this->authorize('admin-access');

-        /** @var UploadedFile $photoFile */
-        $photoFile = UploadedFile::createFromBase($request->files->get('photo'));
+        $photoFiles = $request->files->get('photo');

        // Load the linked album
        $album = AlbumController::loadAlbum($request->get('album_id'));

-        /** @var File $savedFile */
-        $savedFile = $album->getAlbumSource()->saveUploadedPhoto($album, $photoFile);
-
-        $photo = new Photo();
-        $photo->album_id = $album->id;
-        $photo->name = $photoFile->getClientOriginalName();
-        $photo->file_name = $savedFile->getFilename();
-        $photo->mime_type = $savedFile->getMimeType();
-        $photo->file_size = $savedFile->getSize();
-        $photo->save();
-
        $upload = new Upload();
+        $upload->album_id = $album->id;
        $upload->is_completed = false;
        $upload->is_processing = false;
-        $upload->number_photos = 1;
+        $upload->is_ready = false;
+        $upload->number_photos = 0;
        $upload->save();

-        $uploadPhoto = new UploadPhoto();
-        $uploadPhoto->upload_id = $upload->id;
-        $uploadPhoto->photo_id = $photo->id;
-        $uploadPhoto->save();
+        foreach ($photoFiles as $photoFile)
+        {
+            $photoFile = UploadedFile::createFromBase($photoFile);

-        exit();
+            /** @var File $savedFile */
+            $savedFile = $album->getAlbumSource()->saveUploadedPhoto($album, $photoFile);
+
+            $photo = new Photo();
+            $photo->album_id = $album->id;
+            $photo->name = $photoFile->getClientOriginalName();
+            $photo->file_name = $savedFile->getFilename();
+            $photo->mime_type = $savedFile->getMimeType();
+            $photo->file_size = $savedFile->getSize();
+            $photo->save();
+
+            $upload->number_photos++;
+
+            $uploadPhoto = new UploadPhoto();
+            $uploadPhoto->upload_id = $upload->id;
+            $uploadPhoto->photo_id = $photo->id;
+            $uploadPhoto->save();
+        }
+
+        $upload->is_ready = true;
+        $upload->save();
+
+        return redirect(route('albums.monitorUpload', [
+            'id' => $album->id,
+            'upload_id' => $upload->id
+        ]));
    }

    /**
--- a/app/Upload.php
+++ b/app/Upload.php
@ -26,6 +26,11 @@ class Upload extends Model
    protected $hidden = [
    ];

+    public function album()
+    {
+        return $this->belongsTo(Album::class);
+    }
+
    public function uploadPhotos()
    {
        return $this->hasMany(UploadPhoto::class);
--- a/database/migrations/2016_09_02_144354_create_uploads_table.php
+++ b/database/migrations/2016_09_02_144354_create_uploads_table.php
@ -15,12 +15,17 @@ class CreateUploadsTable extends Migration
    {
        Schema::create('uploads', function (Blueprint $table) {
            $table->increments('id');
+            $table->unsignedInteger('album_id');
            $table->boolean('is_completed');
            $table->boolean('is_processing');
            $table->integer('number_photos')->default(0);
            $table->integer('number_successful')->default(0);
            $table->integer('number_failed')->default(0);
            $table->timestamps();
+
+            $table->foreign('album_id')
+                  ->references('id')->on('albums')
+                  ->onDelete('cascade');
        });
    }

--- a/database/migrations/2016_09_05_102036_add_upload_is_ready_column.php
+++ b/database/migrations/2016_09_05_102036_add_upload_is_ready_column.php
@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddUploadIsReadyColumn extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('uploads', function (Blueprint $table)
+        {
+            $table->boolean('is_ready');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('uploads', function (Blueprint $table)
+        {
+            $table->dropColumn('is_ready');
+        });
+    }
+}
--- a/public/themes/bootstrap3/theme.css
+++ b/public/themes/bootstrap3/theme.css
@ -13,9 +13,14 @@
 }

 .navbar .avatar {
-    left: -28px;
-    position: absolute;
-    top: 9px;
+    border-radius: 20px;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.panel .progress {
+    margin-top: 20px;
+    margin-bottom: 0;
 }

 .tab-content {
--- a/resources/views/themes/base/admin/album_upload_progress.blade.php
+++ b/resources/views/themes/base/admin/album_upload_progress.blade.php
@ -0,0 +1,84 @@
+@extends('themes.base.layout')
+@section('title', 'Processing...')
+
+@section('content')
+    <div class="container" style="margin-top: 40px;">
+        <div class="row">
+            <div class="col-xs-12 col-sm-8 col-sm-offset-2">
+                <div class="panel panel-default" id="status-panel">
+                    <div class="panel-heading">Processing...</div>
+                    <div class="panel-body">
+                        <p>Your upload is now being processed.</p>
+                        <div id="progress-bar-container">
+                            <div class="progress"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="panel panel-default" id="complete-panel" style="display: none;">
+                    <div class="panel-heading">Upload completed</div>
+                    <div class="panel-body">
+                        <p>Your upload has completed.</p>
+                        <div class="btn-toolbar btn-group-sm pull-right">
+                            <a class="btn btn-default" href="{{ $album->url() }}">View album</a>
+                            <a class="btn btn-primary" href="{{ route('albums.show', ['id' => $album->id]) }}">Back to album settings</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('scripts')
+    <script type="text/javascript">
+        var refreshInterval = null;
+
+        function refreshStatus()
+        {
+            $.get('{{ route('albums.monitorUploadJson', ['id' => $album->id, 'upload_id' => $upload->id]) }}', function(data)
+            {
+                var total = data.number_photos;
+
+                if (data.is_completed)
+                {
+                    // Stop the refresh
+                    window.clearInterval(refreshInterval);
+
+                    // Display the complete box
+                    $('#status-panel').hide();
+                    $('#complete-panel').show();
+                }
+
+                var successPercentage = (data.number_successful / data.number_photos) * 100;
+                var failedPercentage = (data.number_failed / data.number_photos) * 100;
+
+                {{-- Render a Bootstrap-3 compatible progress bar --}}
+                var progressBar = $('<div/>').addClass('progress');
+
+                {{-- Successful --}}
+                var progressBarSuccess = $('<div/>')
+                        .addClass('progress-bar')
+                        .addClass('progress-bar-success')
+                        .css('width', parseInt(successPercentage) + '%')
+                        .appendTo(progressBar);
+                var progressBarSuccessSpan = $('<span/>').addClass('sr-only').html(parseInt(successPercentage) + '% successful').appendTo(progressBarSuccess);
+
+                {{-- Failed --}}
+                var progressBarError = $('<div/>')
+                                .addClass('progress-bar')
+                                .addClass('progress-bar-warning')
+                                .css('width', parseInt(failedPercentage) + '%')
+                                .appendTo(progressBar);
+                var progressBarErrorSpan = $('<span/>').addClass('sr-only').html(parseInt(failedPercentage) + '% failed').appendTo(progressBarError);
+
+                {{-- Add to DOM --}}
+                $('#progress-bar-container').html(progressBar[0].outerHTML);
+            });
+        }
+
+        $(document).ready(function() {
+            refreshInterval = window.setInterval(refreshStatus, 1000);
+        });
+    </script>
+@endpush
--- a/resources/views/themes/base/admin/show_album.blade.php
+++ b/resources/views/themes/base/admin/show_album.blade.php
@ -19,13 +19,13 @@
                    {{-- Tab panes --}}
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="upload-tab">
-                            <h4>Upload a single image</h4>
+                            <h4>Upload single images</h4>

                            {!! Form::open(['route' => 'photos.store', 'method' => 'POST', 'files' => true]) !!}
                            {!! Form::hidden('album_id', $album->id) !!}

                            <div class="form-group">
-                                {!! Form::file('photo', ['class' => 'control-label']) !!}
+                                {!! Form::file('photo[]', ['class' => 'control-label', 'multiple' => 'multiple']) !!}
                            </div>

                            <div>
--- a/resources/views/themes/base/partials/navbar.blade.php
+++ b/resources/views/themes/base/partials/navbar.blade.php
@ -42,9 +42,10 @@
                    <li><a href="{{ url('/register') }}">Register</a></li>
                @else
                    <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
-                            <img class="avatar" src="{{ \App\Helpers\MiscHelper::gravatarUrl(Auth::user()->email, 32) }}" alt="{{ Auth::user()->name }}" title="{{ Auth::user()->name }}" />
-                            {{ Auth::user()->name }} <span class="caret"></span>
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="padding-top: 4px; padding-bottom: 4px;">
+                            {{ Auth::user()->name }}
+                            <img class="avatar" src="{{ \App\Helpers\MiscHelper::gravatarUrl(Auth::user()->email, 42) }}" alt="{{ Auth::user()->name }}" title="{{ Auth::user()->name }}" />
+                            <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
--- a/routes/web.php
+++ b/routes/web.php
@ -17,8 +17,13 @@ Auth::routes();
 Route::group(['prefix' => 'admin'], function () {
    Route::get('/', 'Admin\DefaultController@index')->name('admin');

+    // Album management
    Route::get('albums/{id}/delete', 'Admin\AlbumController@delete')->name('albums.delete');
+    Route::get('albums/{id}/monitor/{uploadId}.json', 'Admin\AlbumController@monitorUploadJson')->name('albums.monitorUploadJson');
+    Route::get('albums/{id}/monitor/{uploadId}', 'Admin\AlbumController@monitorUpload')->name('albums.monitorUpload');
    Route::resource('albums', 'Admin\AlbumController');
+
+    // Photo management
    Route::resource('photos', 'Admin\PhotoController');
 });