diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/assets/js/app.js | 1 | ||||
| -rw-r--r-- | resources/assets/js/profile.js | 26 | ||||
| -rw-r--r-- | resources/assets/js/setup.js | 5 | ||||
| -rw-r--r-- | resources/assets/sass/app.scss | 4 | ||||
| -rw-r--r-- | resources/views/layouts/app.blade.php | 2 | ||||
| -rw-r--r-- | resources/views/profile.blade.php | 31 |
6 files changed, 46 insertions, 23 deletions
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index 16d3a12..f50f805 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -7,5 +7,6 @@ window.openpgp = require('openpgp'); window.Vue = require('vue'); require('./bootstrap'); +require('./setup'); require('./profile'); require('./chat'); diff --git a/resources/assets/js/profile.js b/resources/assets/js/profile.js index bce94da..d834542 100644 --- a/resources/assets/js/profile.js +++ b/resources/assets/js/profile.js @@ -10,4 +10,30 @@ $("#avatarFile").on("change", () => { if (file) { reader.readAsDataURL(file); } +}); + +$("#avatarForm").submit(function (e) { + var url = "/avatar"; + var data = new FormData(); + $.each(jQuery('#avatarFile')[0].files, (i, file) => { + data.append('avatar', file); + }); + + e.preventDefault(); + $.ajax({ + url: url, + data: data, + cache: false, + contentType: false, + processData: false, + method: 'POST', + type: 'POST', + success: (data) => { + $("#avatarUploadSucceededAlert").show(); + $("#avatarUploadSucceededMessage").text(data.success); + }, + error: () => { + $("#avatarUploadFailedAlert").show(); + } + }); });
\ No newline at end of file diff --git a/resources/assets/js/setup.js b/resources/assets/js/setup.js new file mode 100644 index 0000000..880bf91 --- /dev/null +++ b/resources/assets/js/setup.js @@ -0,0 +1,5 @@ +$.ajaxSetup({ + headers: { + 'X-CSRF-Token': $('input[name="_token"]').val() + } +});
\ No newline at end of file diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index ce64b3f..bd5e1a5 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -13,4 +13,8 @@ .navbar-laravel { background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); +} + +.alert { + display: none; }
\ No newline at end of file diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 3204af3..f20d74a 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -82,6 +82,8 @@ @yield('content') </main> </div> + + {{ csrf_field() }} </body> </html>
\ No newline at end of file diff --git a/resources/views/profile.blade.php b/resources/views/profile.blade.php index 3d1eee2..c4a7db0 100644 --- a/resources/views/profile.blade.php +++ b/resources/views/profile.blade.php @@ -1,31 +1,17 @@ @extends('layouts.app') @section('content') <div class="container"> - <div class="row"> - @if ($message = Session::get('success')) - - <div class="alert alert-success alert-block"> + <div class="row"> + <div id="avatarUploadSucceededAlert" class="alert alert-success alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> - - <strong>{{ $message }}</strong> - + <strong id="avatarUploadSucceededMessage"></strong> </div> - - @endif @if (count($errors) > 0) - <div class="alert alert-danger"> - <strong>Whoops!</strong> There were some problems with your input. - <br> - <br> - <ul> - @foreach ($errors->all() as $error) - <li>{{ $error }}</li> - @endforeach - </ul> + <div id="avatarUploadFailedAlert" class="alert alert-danger"> + <strong>Whoops!</strong> There were some problems with your upload - please try again. </div> - @endif </div> - <div class="row justify-content-center"> + <div class="row justify-content-center"> <div class="profile-header-container"> <div class="profile-header-img"> <img id="image-preview" height="100px" width="100px" class="rounded-circle" src="/avatar/{{ $user->id }}" /> @@ -35,11 +21,10 @@ </div> </div> </div> - </div> + <div class="row justify-content-center"> - <form action="/avatar" method="post" enctype="multipart/form-data"> - @csrf + <form id="avatarForm"> <div class="form-group"> <input type="file" class="form-control-file" name="avatar" id="avatarFile" aria-describedby="fileHelp"> <small id="fileHelp" class="form-text text-muted">Please upload a valid image file. Size of image should not be more than 2MB.</small> |