0.0.250

static/css/styles(boris).css

@@ -666,6 +666,30 @@
     border-radius: 10px;
 }
 
+/*file classes*/
+
+.file_border_cont{
+    padding: 5%;
+    width: 95%;
+    height: 100%;
+}
+
+.left_part_file_w{
+    width: 20%;
+    height: 100%;
+    float: left;
+}
+
+.right_part_file_w{
+    width: 80%;
+    height: 100%;
+    color: #FFFFFF;
+    font-size: 14px;
+    float: right;
+}
+
+/*end*/
+
 .container_text_message.left{
     border: 1px solid #FF613A;
     background: #FFFFFF;

static/img/svg/download_file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="#FFF"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>

static/js/user_profile(boris).js

@@ -117,23 +117,104 @@ function countLetters () {
 //
 // }
 
-function attachFilemeassge (el,id_ticket=null,sender,receiver){
-    let file = el.files[0];
 
-    let reader = new FileReader();
+// function getBase64(file,el) {
+//     const reader = new FileReader()
+//     let file_new = null
+//     let file_new_p = new Promise(function () {
+//         reader.readAsDataURL(file)
+//         reader.onload = function () {
+//             file_new = JSON.stringify({
+//                 'file': reader.result,
+//                 'file_type': el.type,
+//                 'file_name': el.name
+//             })
+//
+//         }
+//
+//     })
+//     file_new_p.then(function (){
+//         return file_new
+//     })
+// }
+//
+// async function fileListToBase64(fileList) {
+//   const files_for_data = []
+//
+//   for (let i = 0; i < fileList.length; i++) {
+//     let el = fileList[i]
+//     files_for_data.push(getBase64(fileList[i],el))
+//   }
+//
+//   return await Promise.all(files_for_data)
+// }
+function getBase64(file,el) {
+    const reader = new FileReader()
+    return new Promise(resolve => {
+      reader.onload = ev => {
+            resolve(file_new = JSON.stringify({
+                'file': reader.result,
+                'file_type': el.type,
+                'file_name': el.name
+               })
+            )
+      }
+      reader.readAsDataURL(file)
+    })
+}
+
+async function fileListToBase64(fileList) {
+  // create function which return resolved promise
+  // with data:base64 string
+
+  // here will be array of promisified functions
+  const promises = []
+  // loop through fileList with for loop
+  for (let i = 0; i < fileList.length; i++) {
+        let el = fileList[i]
+        promises.push(getBase64(fileList[i],el))
+  }
+  // array with base64 strings
+  return await Promise.all(promises)
+}
+
+async function attachFilemeassge (el,id_ticket=null,sender,receiver){
+    // let file = el.files[0];
+    let fileList = el.files;
+    const files_for_data = await fileListToBase64(fileList)
+    let data = files_for_data
+    sendMessage(id_ticket,sender,receiver,data)
+    // let reader = new FileReader();
+    // let mas_for_for_each = []
+
+    // for (let i = 0;i < el.files.length;i++){
+    //     let file_for_data_url_opert = el.files[i]
+    //
+    //     reader.readAsDataURL(file_for_data_url_opert);
+    //     reader.onload = function() {
+    //         // console.log(reader.result);
+    //         let file = JSON.stringify({
+    //             'file': reader.result,
+    //             'file_type': el.files[i].type,
+    //             'file_name': el.files[i].name
+    //         })
+    //         files_for_data.push(file)
+    //     };
+    //
+    //     reader.onerror = function() {
+    //         console.log(reader.error);
+    //     };
+    //
+    // }
+
+
+
+
+
 
-    reader.readAsDataURL(file);
 
 
-    reader.onload = function() {
-        // console.log(reader.result);
-        let data = reader.result
-        sendMessage(id_ticket,sender,receiver,data,file)
-    };
 
-    reader.onerror = function() {
-        console.log(reader.error);
-    };
 
 
 }
@@ -212,9 +293,9 @@ function selectedUserMessenger (ticket_id=null,user_id=null){
 }
 
 
-function sendMessage(id_ticket=null,sender,receiver,img_post=null,file=null){
+function sendMessage(id_ticket=null,sender,receiver,files=null){
     // import {sendMessageSocket} from "./chat_sockets";
-    if (!img_post){
+    if (!files){
         event.preventDefault()
     }
     let text = document.querySelector(".enter-message-inp").value
@@ -222,7 +303,7 @@ function sendMessage(id_ticket=null,sender,receiver,img_post=null,file=null){
     let img = document.querySelector(".attach-file-btn-message").dataset["file_img"]
 
 
-    if (img_post){
+    if (files){
 
         let data = {}
             if (id_ticket === null){
@@ -230,11 +311,7 @@ function sendMessage(id_ticket=null,sender,receiver,img_post=null,file=null){
                     'sender': sender,
                     'receiver': receiver,
                     'text': '',
-                    'file': JSON.stringify({
+                    'files': files
-                                'file': img_post,
-                                'file_type': file.type,
-                                'file_name': file.name
-                            })
                 }
             } else {
                  data = {
@@ -242,11 +319,7 @@ function sendMessage(id_ticket=null,sender,receiver,img_post=null,file=null){
                     'sender': sender,
                     'receiver': receiver,
                     'text': '',
-                    'file': JSON.stringify({
+                    'files': files
-                                'file': img_post,
-                                'file_type': file.type,
-                                'file_name': file.name
-                            })
                 }
             }
 

templates/blocks/profile/b_chats.html

@@ -62,7 +62,7 @@
             </div>
             <div class="right-part-block-enter-message">
 {#                <button class="attach-file-btn-message" onclick="attachFilemeassge(event,this,null,{{ user.id }},{{ cur_receiver.id }})"></button>#}
-                <input style="display: none;" type="file" onchange="attachFilemeassge(this,null,{{ user.id }},{{ cur_receiver.id }})" id="id_choce_file">
+                <input style="display: none;" type="file" onchange="attachFilemeassge(this,null,{{ user.id }},{{ cur_receiver.id }})" id="id_choce_file" multiple>
                 <label for="id_choce_file" class="attach-file-btn-message"></label>
                 <button class="send-message" onclick="sendMessage(null,{{ user.id }},{{ cur_receiver.id }})"></button>
 {#                <button class="send-message" onclick="send_ws_msg('message')"></button>#}

templates/blocks/profile/b_messages_container.html

@@ -1,7 +1,7 @@
 {% load static %}
 
 
-
+{% include "widgets/w_file.html" %}
 {% if not messages and ticket %}
     {% include "widgets/w_message.html" %}
 {% else %}

templates/widgets/w_file.html

@@ -0,0 +1,27 @@
+{% load static %}
+{% load tt_chat %}
+
+<div style="width: 100%;">
+        <div class="container-message_support_chat {% get_msg_side user ticket msg %}">
+        <div class="block_avatar_message {% get_msg_side user ticket msg %}">
+            <img src="{% static "delete_later/Avatar.png" %}">
+        </div>
+        <div class="block_text_message {% get_msg_side user ticket msg %}">
+            <div class="container_text_message {% get_msg_side user ticket msg %}">
+                <div class="file_border_cont">
+                    <div class="left_part_file_w">
+                        <a href="{% static "/img/svg/loader.svg" %}" download><img src="{% static "/img/svg/download_file.svg" %}" style="height:35px"></a>
+                    </div>
+                    <div class="right_part_file_w">
+                        <div>фывыфв</div>
+                        <div>1234 кб</div>
+                    </div>
+                    <div class="clear_both"></div>
+                </div>
+            </div>
+            <div class="data_send_message {% get_msg_side user ticket msg %}">
+                <span>{% if msg %}{{ msg.modifiedDT }}{% else %}{{ ticket.modifiedDT }}{% endif %}</span>
+            </div>
+        </div>
+    </div>
+</div>