Fixes

project/templates/lilcity/test.html

@@ -2,6 +2,7 @@
 
 {% block title %}School LIL.CITY{% endblock title %}
 {% block content %}
+  {{ request.user.auth_token }}
   <course-redactor author-picture="http://localhost:8000/static/img/user.jpg" author-name="Vitaly Baev"></course-redactor>
 {% endblock content %}
 {% block foot %}

web/build/css/app.css

@@ -4012,9 +4012,14 @@ a.grey-link:hover {
   flex: 0 0 calc(25% - 20px);
 }
 
+.kit__gallery .kit__photo--loading, .kit__preview--loading {
+  opacity: 0.5;
+}
+
 .kit__pic {
   display: block;
   width: 100%;
+  object-fit: contain;
 }
 
 .kit__theme {
@@ -4174,6 +4179,10 @@ a.grey-link:hover {
   background: #FF9393;
 }
 
+.message_info {
+  background: #8ECFC0;
+}
+
 .searching {
   display: -ms-flexbox;
   display: flex;

web/src/components/blocks/BlockImages.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="kit__gallery">
-      <div class="kit__preview" v-for="image in images">
+      <div class="kit__preview" v-for="image in images" v-bind:class="{ 'kit__preview--loading': image.loading }">
         <img :src="image.src" class="kit__pic">
       </div>
       <div class="kit__photo">
@@ -32,6 +32,11 @@
 </template>
 
 <script>
+    import axios from 'axios';
+    import {api} from "../../js/modules/api";
+
+    axios.defaults.headers.common['Authorization'] = `Token 134937192e3d8f7590ff28093e82b635cab432da`;
+
     export default {
         name: "block-images",
         props: ["title", "text", "images"],
@@ -49,8 +54,27 @@
                         let images = this.images;
                         images.push({
                             src: reader.result,
+                            loading: true,
                         });
                         this.$emit('update:images', images);
+
+                        api.uploadImage(reader.result, '134937192e3d8f7590ff28093e82b635cab432da')
+                            .then((response) => {
+                                console.log('completed', response);
+
+                                let images = this.images;
+                                images.forEach((image, index) => {
+                                    if (image.src === reader.result) {
+                                        images[index].id = response.data.id;
+                                        images[index].loading = false;
+                                        images[index].src = response.data.image;
+                                    }
+                                });
+                                this.$emit('update:images', images);
+                            })
+                            .catch((error) => {
+                                console.log('error', error);
+                            });
                     };
                     if (file) {
                         reader.readAsDataURL(file);

web/src/js/modules/api.js

@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+axios.defaults.headers.post['Content-Type'] = 'application/json';
+axios.defaults.headers.post['Accept'] = 'application/json';
+
+export const api = {
+    uploadImage: (imageData, accessToken) => {
+        return axios.post('/api/v1/image-objects/', {
+            image: imageData,
+        }, {
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    }
+};

web/src/sass/_common.sass

@@ -3107,9 +3107,12 @@ a.grey-link
   &__preview
     margin: 0 10px 20px
     flex: 0 0 calc(25% - 20px)
+    &--loading
+      opacity: 0.5
   &__pic
     display: block
     width: 100%
+    object-fit: contain
   &__theme
     margin-bottom: 30px
     padding-bottom: 5px