Pass file name of cropped avatar to form data

When avatar is cropped, all filename data including file extension is lost, leading to uploads like <hash>.blob that are causing mime issues in some setups.

This MR extends updateProfileImages with avatarName and passes original filename alongside with blob of cropped image to be specified in form data.

src/components/settings_modal/tabs/profile_tab.js

@@ -193,8 +193,8 @@ const ProfileTab = {
     submitAvatar (cropper, file) {
       const that = this
       return new Promise((resolve, reject) => {
-        function updateAvatar (avatar) {
-          that.$store.state.api.backendInteractor.updateProfileImages({ avatar })
+        function updateAvatar (avatar, avatarName) {
+          that.$store.state.api.backendInteractor.updateProfileImages({ avatar, avatarName })
             .then((user) => {
               that.$store.commit('addNewUsers', [user])
               that.$store.commit('setCurrentUser', user)
@@ -207,9 +207,9 @@ const ProfileTab = {
         }
 
         if (cropper) {
-          cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
+          cropper.getCroppedCanvas().toBlob((data) => updateAvatar(data, file.name), file.type)
         } else {
-          updateAvatar(file)
+          updateAvatar(file, file.name)
         }
       })
     },