Ajax instead of form for avatar post.

9 files changed, 63 insertions, 27 deletions

diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index d82ee98..2cfbea7 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -27,7 +27,6 @@ class UserController extends Controller
         Storage::put('avatars/' . $avatarName, (string) $fittedAvatar);
         $user->avatar = $avatarName;
         $user->save();
-        return back()
-            ->with('success', 'You have successfully uploaded the avatar.');
+        return response()->json(array('success'=>'You have successfully uploaded the avatar.'));
     }
 }
diff --git a/public/css/app.css b/public/css/app.css
index 4f0c90a..c26b6bb 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10423,3 +10423,7 @@ a.text-dark:focus {
           box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
 }
 
+.alert {
+  display: none;
+}
+
diff --git a/public/js/app.js b/public/js/app.js
index e0e3ac0..00c8898 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -149,7 +149,7 @@ module.exports = __webpack_require__(42);
 /* 12 */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("/**\n * First we will load all of this project's JavaScript dependencies which\n * includes Vue and other libraries. It is a great starting point when\n * building robust, powerful web applications using Vue and Laravel.\n */\n\nwindow.openpgp = __webpack_require__(13);\nwindow.Vue = __webpack_require__(14);\n__webpack_require__(17);\n__webpack_require__(40);\n__webpack_require__(41);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9yZXNvdXJjZXMvYXNzZXRzL2pzL2FwcC5qcz9iMTVmIl0sIm5hbWVzIjpbIndpbmRvdyIsIm9wZW5wZ3AiLCJyZXF1aXJlIiwiVnVlIl0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0FBTUFBLE9BQU9DLE9BQVAsR0FBaUIsbUJBQUFDLENBQVEsRUFBUixDQUFqQjtBQUNBRixPQUFPRyxHQUFQLEdBQWEsbUJBQUFELENBQVEsRUFBUixDQUFiO0FBQ0EsbUJBQUFBLENBQVEsRUFBUjtBQUNBLG1CQUFBQSxDQUFRLEVBQVI7QUFDQSxtQkFBQUEsQ0FBUSxFQUFSIiwiZmlsZSI6IjEyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBGaXJzdCB3ZSB3aWxsIGxvYWQgYWxsIG9mIHRoaXMgcHJvamVjdCdzIEphdmFTY3JpcHQgZGVwZW5kZW5jaWVzIHdoaWNoXG4gKiBpbmNsdWRlcyBWdWUgYW5kIG90aGVyIGxpYnJhcmllcy4gSXQgaXMgYSBncmVhdCBzdGFydGluZyBwb2ludCB3aGVuXG4gKiBidWlsZGluZyByb2J1c3QsIHBvd2VyZnVsIHdlYiBhcHBsaWNhdGlvbnMgdXNpbmcgVnVlIGFuZCBMYXJhdmVsLlxuICovXG5cbndpbmRvdy5vcGVucGdwID0gcmVxdWlyZSgnb3BlbnBncCcpO1xud2luZG93LlZ1ZSA9IHJlcXVpcmUoJ3Z1ZScpO1xucmVxdWlyZSgnLi9ib290c3RyYXAnKTtcbnJlcXVpcmUoJy4vcHJvZmlsZScpO1xucmVxdWlyZSgnLi9jaGF0Jyk7XG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gLi9yZXNvdXJjZXMvYXNzZXRzL2pzL2FwcC5qcyJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///12\n");
+eval("/**\n * First we will load all of this project's JavaScript dependencies which\n * includes Vue and other libraries. It is a great starting point when\n * building robust, powerful web applications using Vue and Laravel.\n */\n\nwindow.openpgp = __webpack_require__(13);\nwindow.Vue = __webpack_require__(14);\n__webpack_require__(17);\n__webpack_require__(47);\n__webpack_require__(40);\n__webpack_require__(41);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9yZXNvdXJjZXMvYXNzZXRzL2pzL2FwcC5qcz9iMTVmIl0sIm5hbWVzIjpbIndpbmRvdyIsIm9wZW5wZ3AiLCJyZXF1aXJlIiwiVnVlIl0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0FBTUFBLE9BQU9DLE9BQVAsR0FBaUIsbUJBQUFDLENBQVEsRUFBUixDQUFqQjtBQUNBRixPQUFPRyxHQUFQLEdBQWEsbUJBQUFELENBQVEsRUFBUixDQUFiO0FBQ0EsbUJBQUFBLENBQVEsRUFBUjtBQUNBLG1CQUFBQSxDQUFRLEVBQVI7QUFDQSxtQkFBQUEsQ0FBUSxFQUFSO0FBQ0EsbUJBQUFBLENBQVEsRUFBUiIsImZpbGUiOiIxMi5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRmlyc3Qgd2Ugd2lsbCBsb2FkIGFsbCBvZiB0aGlzIHByb2plY3QncyBKYXZhU2NyaXB0IGRlcGVuZGVuY2llcyB3aGljaFxuICogaW5jbHVkZXMgVnVlIGFuZCBvdGhlciBsaWJyYXJpZXMuIEl0IGlzIGEgZ3JlYXQgc3RhcnRpbmcgcG9pbnQgd2hlblxuICogYnVpbGRpbmcgcm9idXN0LCBwb3dlcmZ1bCB3ZWIgYXBwbGljYXRpb25zIHVzaW5nIFZ1ZSBhbmQgTGFyYXZlbC5cbiAqL1xuXG53aW5kb3cub3BlbnBncCA9IHJlcXVpcmUoJ29wZW5wZ3AnKTtcbndpbmRvdy5WdWUgPSByZXF1aXJlKCd2dWUnKTtcbnJlcXVpcmUoJy4vYm9vdHN0cmFwJyk7XG5yZXF1aXJlKCcuL3NldHVwJyk7XG5yZXF1aXJlKCcuL3Byb2ZpbGUnKTtcbnJlcXVpcmUoJy4vY2hhdCcpO1xuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIC4vcmVzb3VyY2VzL2Fzc2V0cy9qcy9hcHAuanMiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///12\n");
 
 /***/ }),
 /* 13 */
@@ -335,7 +335,7 @@ eval("\n\n/**\n * Syntactic sugar for invoking a function and expanding an array
 /* 40 */
 /***/ (function(module, exports) {
 
-eval("$(\"#avatarFile\").on(\"change\", function () {\n    var preview = document.querySelector('#image-preview');\n    var file = document.querySelector(\"#avatarFile\").files[0];\n    var reader = new FileReader();\n\n    reader.addEventListener(\"load\", function () {\n        preview.src = reader.result;\n    }, false);\n\n    if (file) {\n        reader.readAsDataURL(file);\n    }\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9yZXNvdXJjZXMvYXNzZXRzL2pzL3Byb2ZpbGUuanM/MWEwMCJdLCJuYW1lcyI6WyIkIiwib24iLCJwcmV2aWV3IiwiZG9jdW1lbnQiLCJxdWVyeVNlbGVjdG9yIiwiZmlsZSIsImZpbGVzIiwicmVhZGVyIiwiRmlsZVJlYWRlciIsImFkZEV2ZW50TGlzdGVuZXIiLCJzcmMiLCJyZXN1bHQiLCJyZWFkQXNEYXRhVVJMIl0sIm1hcHBpbmdzIjoiQUFBQUEsRUFBRSxhQUFGLEVBQWlCQyxFQUFqQixDQUFvQixRQUFwQixFQUE4QixZQUFNO0FBQ2hDLFFBQUlDLFVBQVVDLFNBQVNDLGFBQVQsQ0FBdUIsZ0JBQXZCLENBQWQ7QUFDQSxRQUFJQyxPQUFPRixTQUFTQyxhQUFULENBQXVCLGFBQXZCLEVBQXNDRSxLQUF0QyxDQUE0QyxDQUE1QyxDQUFYO0FBQ0EsUUFBSUMsU0FBUyxJQUFJQyxVQUFKLEVBQWI7O0FBRUFELFdBQU9FLGdCQUFQLENBQXdCLE1BQXhCLEVBQWdDLFlBQU07QUFDbENQLGdCQUFRUSxHQUFSLEdBQWNILE9BQU9JLE1BQXJCO0FBQ0gsS0FGRCxFQUVHLEtBRkg7O0FBSUEsUUFBSU4sSUFBSixFQUFVO0FBQ05FLGVBQU9LLGFBQVAsQ0FBcUJQLElBQXJCO0FBQ0g7QUFDSixDQVpEIiwiZmlsZSI6IjQwLmpzIiwic291cmNlc0NvbnRlbnQiOlsiJChcIiNhdmF0YXJGaWxlXCIpLm9uKFwiY2hhbmdlXCIsICgpID0+IHtcbiAgICB2YXIgcHJldmlldyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNpbWFnZS1wcmV2aWV3Jyk7XG4gICAgdmFyIGZpbGUgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKFwiI2F2YXRhckZpbGVcIikuZmlsZXNbMF07XG4gICAgdmFyIHJlYWRlciA9IG5ldyBGaWxlUmVhZGVyKCk7XG5cbiAgICByZWFkZXIuYWRkRXZlbnRMaXN0ZW5lcihcImxvYWRcIiwgKCkgPT4ge1xuICAgICAgICBwcmV2aWV3LnNyYyA9IHJlYWRlci5yZXN1bHQ7XG4gICAgfSwgZmFsc2UpO1xuXG4gICAgaWYgKGZpbGUpIHtcbiAgICAgICAgcmVhZGVyLnJlYWRBc0RhdGFVUkwoZmlsZSk7XG4gICAgfVxufSk7XG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIC4vcmVzb3VyY2VzL2Fzc2V0cy9qcy9wcm9maWxlLmpzIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///40\n");
+eval("$(\"#avatarFile\").on(\"change\", function () {\n    var preview = document.querySelector('#image-preview');\n    var file = document.querySelector(\"#avatarFile\").files[0];\n    var reader = new FileReader();\n\n    reader.addEventListener(\"load\", function () {\n        preview.src = reader.result;\n    }, false);\n\n    if (file) {\n        reader.readAsDataURL(file);\n    }\n});\n\n$(\"#avatarForm\").submit(function (e) {\n    var url = \"/avatar\";\n    var data = new FormData();\n    $.each(jQuery('#avatarFile')[0].files, function (i, file) {\n        data.append('avatar', file);\n    });\n\n    e.preventDefault();\n    $.ajax({\n        url: url,\n        data: data,\n        cache: false,\n        contentType: false,\n        processData: false,\n        method: 'POST',\n        type: 'POST',\n        success: function success(data) {\n            $(\"#avatarUploadSucceededAlert\").show();\n            $(\"#avatarUploadSucceededMessage\").text(data.success);\n        },\n        error: function error() {\n            $(\"#avatarUploadFailedAlert\").show();\n        }\n    });\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9yZXNvdXJjZXMvYXNzZXRzL2pzL3Byb2ZpbGUuanM/MWEwMCJdLCJuYW1lcyI6WyIkIiwib24iLCJwcmV2aWV3IiwiZG9jdW1lbnQiLCJxdWVyeVNlbGVjdG9yIiwiZmlsZSIsImZpbGVzIiwicmVhZGVyIiwiRmlsZVJlYWRlciIsImFkZEV2ZW50TGlzdGVuZXIiLCJzcmMiLCJyZXN1bHQiLCJyZWFkQXNEYXRhVVJMIiwic3VibWl0IiwiZSIsInVybCIsImRhdGEiLCJGb3JtRGF0YSIsImVhY2giLCJqUXVlcnkiLCJpIiwiYXBwZW5kIiwicHJldmVudERlZmF1bHQiLCJhamF4IiwiY2FjaGUiLCJjb250ZW50VHlwZSIsInByb2Nlc3NEYXRhIiwibWV0aG9kIiwidHlwZSIsInN1Y2Nlc3MiLCJzaG93IiwidGV4dCIsImVycm9yIl0sIm1hcHBpbmdzIjoiQUFBQUEsRUFBRSxhQUFGLEVBQWlCQyxFQUFqQixDQUFvQixRQUFwQixFQUE4QixZQUFNO0FBQ2hDLFFBQUlDLFVBQVVDLFNBQVNDLGFBQVQsQ0FBdUIsZ0JBQXZCLENBQWQ7QUFDQSxRQUFJQyxPQUFPRixTQUFTQyxhQUFULENBQXVCLGFBQXZCLEVBQXNDRSxLQUF0QyxDQUE0QyxDQUE1QyxDQUFYO0FBQ0EsUUFBSUMsU0FBUyxJQUFJQyxVQUFKLEVBQWI7O0FBRUFELFdBQU9FLGdCQUFQLENBQXdCLE1BQXhCLEVBQWdDLFlBQU07QUFDbENQLGdCQUFRUSxHQUFSLEdBQWNILE9BQU9JLE1BQXJCO0FBQ0gsS0FGRCxFQUVHLEtBRkg7O0FBSUEsUUFBSU4sSUFBSixFQUFVO0FBQ05FLGVBQU9LLGFBQVAsQ0FBcUJQLElBQXJCO0FBQ0g7QUFDSixDQVpEOztBQWNBTCxFQUFFLGFBQUYsRUFBaUJhLE1BQWpCLENBQXdCLFVBQVVDLENBQVYsRUFBYTtBQUNqQyxRQUFJQyxNQUFNLFNBQVY7QUFDQSxRQUFJQyxPQUFPLElBQUlDLFFBQUosRUFBWDtBQUNBakIsTUFBRWtCLElBQUYsQ0FBT0MsT0FBTyxhQUFQLEVBQXNCLENBQXRCLEVBQXlCYixLQUFoQyxFQUF1QyxVQUFDYyxDQUFELEVBQUlmLElBQUosRUFBYTtBQUNoRFcsYUFBS0ssTUFBTCxDQUFZLFFBQVosRUFBc0JoQixJQUF0QjtBQUNILEtBRkQ7O0FBSUFTLE1BQUVRLGNBQUY7QUFDQXRCLE1BQUV1QixJQUFGLENBQU87QUFDSFIsYUFBS0EsR0FERjtBQUVIQyxjQUFNQSxJQUZIO0FBR0hRLGVBQU8sS0FISjtBQUlIQyxxQkFBYSxLQUpWO0FBS0hDLHFCQUFhLEtBTFY7QUFNSEMsZ0JBQVEsTUFOTDtBQU9IQyxjQUFNLE1BUEg7QUFRSEMsaUJBQVMsaUJBQUNiLElBQUQsRUFBVTtBQUNmaEIsY0FBRSw2QkFBRixFQUFpQzhCLElBQWpDO0FBQ0E5QixjQUFFLCtCQUFGLEVBQW1DK0IsSUFBbkMsQ0FBd0NmLEtBQUthLE9BQTdDO0FBQ0gsU0FYRTtBQVlIRyxlQUFPLGlCQUFNO0FBQ1RoQyxjQUFFLDBCQUFGLEVBQThCOEIsSUFBOUI7QUFDSDtBQWRFLEtBQVA7QUFnQkgsQ0F4QkQiLCJmaWxlIjoiNDAuanMiLCJzb3VyY2VzQ29udGVudCI6WyIkKFwiI2F2YXRhckZpbGVcIikub24oXCJjaGFuZ2VcIiwgKCkgPT4ge1xuICAgIHZhciBwcmV2aWV3ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2ltYWdlLXByZXZpZXcnKTtcbiAgICB2YXIgZmlsZSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXCIjYXZhdGFyRmlsZVwiKS5maWxlc1swXTtcbiAgICB2YXIgcmVhZGVyID0gbmV3IEZpbGVSZWFkZXIoKTtcblxuICAgIHJlYWRlci5hZGRFdmVudExpc3RlbmVyKFwibG9hZFwiLCAoKSA9PiB7XG4gICAgICAgIHByZXZpZXcuc3JjID0gcmVhZGVyLnJlc3VsdDtcbiAgICB9LCBmYWxzZSk7XG5cbiAgICBpZiAoZmlsZSkge1xuICAgICAgICByZWFkZXIucmVhZEFzRGF0YVVSTChmaWxlKTtcbiAgICB9XG59KTtcblxuJChcIiNhdmF0YXJGb3JtXCIpLnN1Ym1pdChmdW5jdGlvbiAoZSkge1xuICAgIHZhciB1cmwgPSBcIi9hdmF0YXJcIjtcbiAgICB2YXIgZGF0YSA9IG5ldyBGb3JtRGF0YSgpO1xuICAgICQuZWFjaChqUXVlcnkoJyNhdmF0YXJGaWxlJylbMF0uZmlsZXMsIChpLCBmaWxlKSA9PiB7XG4gICAgICAgIGRhdGEuYXBwZW5kKCdhdmF0YXInLCBmaWxlKTtcbiAgICB9KTtcblxuICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAkLmFqYXgoe1xuICAgICAgICB1cmw6IHVybCxcbiAgICAgICAgZGF0YTogZGF0YSxcbiAgICAgICAgY2FjaGU6IGZhbHNlLFxuICAgICAgICBjb250ZW50VHlwZTogZmFsc2UsXG4gICAgICAgIHByb2Nlc3NEYXRhOiBmYWxzZSxcbiAgICAgICAgbWV0aG9kOiAnUE9TVCcsXG4gICAgICAgIHR5cGU6ICdQT1NUJyxcbiAgICAgICAgc3VjY2VzczogKGRhdGEpID0+IHtcbiAgICAgICAgICAgICQoXCIjYXZhdGFyVXBsb2FkU3VjY2VlZGVkQWxlcnRcIikuc2hvdygpO1xuICAgICAgICAgICAgJChcIiNhdmF0YXJVcGxvYWRTdWNjZWVkZWRNZXNzYWdlXCIpLnRleHQoZGF0YS5zdWNjZXNzKTtcbiAgICAgICAgfSxcbiAgICAgICAgZXJyb3I6ICgpID0+IHtcbiAgICAgICAgICAgICQoXCIjYXZhdGFyVXBsb2FkRmFpbGVkQWxlcnRcIikuc2hvdygpO1xuICAgICAgICB9XG4gICAgfSk7XG59KTtcblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gLi9yZXNvdXJjZXMvYXNzZXRzL2pzL3Byb2ZpbGUuanMiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///40\n");
 
 /***/ }),
 /* 41 */
@@ -349,5 +349,15 @@ eval("// var openpgp = window.openpgp;\n\n// var options = {\n//     userIds: [{
 
 eval("// removed by extract-text-webpack-plugin//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9yZXNvdXJjZXMvYXNzZXRzL3Nhc3MvYXBwLnNjc3M/NTEwNiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiI0Mi5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIHJlbW92ZWQgYnkgZXh0cmFjdC10ZXh0LXdlYnBhY2stcGx1Z2luXG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9yZXNvdXJjZXMvYXNzZXRzL3Nhc3MvYXBwLnNjc3Ncbi8vIG1vZHVsZSBpZCA9IDQyXG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///42\n");
 
+/***/ }),
+/* 43 */,
+/* 44 */,
+/* 45 */,
+/* 46 */,
+/* 47 */
+/***/ (function(module, exports) {
+
+eval("$.ajaxSetup({\n    headers: {\n        'X-CSRF-Token': $('input[name=\"_token\"]').val()\n    }\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9yZXNvdXJjZXMvYXNzZXRzL2pzL3NldHVwLmpzPzkzMWMiXSwibmFtZXMiOlsiJCIsImFqYXhTZXR1cCIsImhlYWRlcnMiLCJ2YWwiXSwibWFwcGluZ3MiOiJBQUFBQSxFQUFFQyxTQUFGLENBQVk7QUFDUkMsYUFBUztBQUNMLHdCQUFnQkYsRUFBRSxzQkFBRixFQUEwQkcsR0FBMUI7QUFEWDtBQURELENBQVoiLCJmaWxlIjoiNDcuanMiLCJzb3VyY2VzQ29udGVudCI6WyIkLmFqYXhTZXR1cCh7XG4gICAgaGVhZGVyczoge1xuICAgICAgICAnWC1DU1JGLVRva2VuJzogJCgnaW5wdXRbbmFtZT1cIl90b2tlblwiXScpLnZhbCgpXG4gICAgfVxufSk7XG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIC4vcmVzb3VyY2VzL2Fzc2V0cy9qcy9zZXR1cC5qcyJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///47\n");
+
 /***/ })
 /******/ ]);
\ No newline at end of file
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>