diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3 index 735b2fed..b864a39c 100644 Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ diff --git a/osinaweb/osichat/__pycache__/consumers.cpython-310.pyc b/osinaweb/osichat/__pycache__/consumers.cpython-310.pyc index ea295c47..b66b1e0a 100644 Binary files a/osinaweb/osichat/__pycache__/consumers.cpython-310.pyc and b/osinaweb/osichat/__pycache__/consumers.cpython-310.pyc differ diff --git a/osinaweb/osichat/consumers.py b/osinaweb/osichat/consumers.py index aa8d91fa..5929236b 100644 --- a/osinaweb/osichat/consumers.py +++ b/osinaweb/osichat/consumers.py @@ -69,7 +69,10 @@ class OsitcomChatRoom(WebsocketConsumer): if event_type == 'load_chat': self.client_type = text_data_json.get('client_type') - self.load_chat_handler() + event = { + 'reconnecting' : text_data_json.get('reconnecting') + } + self.load_chat_handler(event) if event_type == 'start_conversation': chat_room = ChatRoom.objects.create( @@ -91,6 +94,18 @@ class OsitcomChatRoom(WebsocketConsumer): self.session_id, event ) + if event_type == 'typing': + print(text_data_json.get('typing_status')) + print(text_data_json.get('user_id')) + event = { + 'type': 'typing_handler', + 'user_id': text_data_json.get('user_id'), + 'typing_status': text_data_json.get('typing_status') + } + async_to_sync(self.channel_layer.group_send)( + self.session_id, event + ) + if event_type == 'send_message': if text_data_json.get('user_id'): member = get_object_or_404(User, id=text_data_json.get('user_id')) @@ -191,7 +206,9 @@ class OsitcomChatRoom(WebsocketConsumer): - def load_chat_handler(self): + + + def load_chat_handler(self, event): if self.chat_room: chat_room = self.chat_room chat_room_messages = ChatMessage.objects.filter(room=chat_room).order_by('date_sent') @@ -203,13 +220,14 @@ class OsitcomChatRoom(WebsocketConsumer): 'chat_room_messages': chat_room_messages, } if self.client_type == 'mobile_admin': - chat_room_data = model_to_dict(chat_room) - chat_room_messages_data = [model_to_dict(message) for message in chat_room_messages] - self.send(text_data=json.dumps({ - 'event_type': 'load_chat', - 'chat_room_data': chat_room_data, - 'chat_room_messages_data': chat_room_messages_data - },cls=DjangoJSONEncoder)) + chat_room_data = model_to_dict(chat_room) + chat_room_messages_data = [model_to_dict(message) for message in chat_room_messages] + self.send(text_data=json.dumps({ + 'event_type': 'load_chat', + 'chat_room_data': chat_room_data, + 'chat_room_messages_data': chat_room_messages_data + },cls=DjangoJSONEncoder)) + elif self.client_type == 'website_admin': html = render_to_string("chat_templates/chat-widget.html", context=context) self.send(text_data=json.dumps({ @@ -217,7 +235,13 @@ class OsitcomChatRoom(WebsocketConsumer): 'html': html, })) else: - html = render_to_string("chat-widget.html", context=context) + if event.get('reconnecting') == 'False': + html = render_to_string("chat-widget.html", context=context) + else: + if chat_room: + html = render_to_string("chat-room.html", context=context) + else: + html = render_to_string("start-conversation.html", context=context) self.send(text_data=json.dumps({ 'event_type': 'load_chat', 'html': html, @@ -241,6 +265,26 @@ class OsitcomChatRoom(WebsocketConsumer): 'html': html, })) + def typing_handler(self, event): + if event.get('typing_status') == 'typing': + if event.get('user_id'): + member = get_object_or_404(User, id=event.get('user_id')) + else: + member = None + + context = { + 'member': member, + } + + html = render_to_string("partials/typing.html", context=context) + self.send(text_data=json.dumps({ + 'event_type': 'typing', + 'html': html, + })) + else: + self.send(text_data=json.dumps({ + 'event_type': 'stopped_typing', + })) def send_message_handler(self, event): chat_message = get_object_or_404(ChatMessage, id=event['chat_message_id']) @@ -280,7 +324,6 @@ class OsitcomChatRoom(WebsocketConsumer): 'html': html, })) - def update_read_messages_handler(self, event): latest_unread_message_id = event.get('latest_unread_message_id') if latest_unread_message_id: diff --git a/osinaweb/osichat/templates/chat-room.html b/osinaweb/osichat/templates/chat-room.html index fb6eeb63..6966c2a6 100644 --- a/osinaweb/osichat/templates/chat-room.html +++ b/osinaweb/osichat/templates/chat-room.html @@ -50,7 +50,7 @@ class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs"> {% if message.member.staffprofile.image %} + src="http://192.168.1.106:8000{{message.member.staffprofile.image.url}}"> {% else %}

{{message.member.first_name.0}}{{message.member.last_name.0}}

{% endif %} @@ -95,7 +95,7 @@ {% else %} {% if message.chatmessageattachment.is_image %}
- +
{% else %}
@@ -117,27 +117,15 @@ {% endif %} {% endfor %}
- + - - - +
+
+
{% csrf_token %}
@@ -167,7 +155,7 @@
- +

Osichat 2.0 by Ositcom

diff --git a/osinaweb/osichat/templates/partials/message-attachment.html b/osinaweb/osichat/templates/partials/message-attachment.html index 978a4a50..e4316856 100644 --- a/osinaweb/osichat/templates/partials/message-attachment.html +++ b/osinaweb/osichat/templates/partials/message-attachment.html @@ -1,7 +1,7 @@ {% if message_attachment.message.member %} {% if file_type == 'image' %}
- +
{% else %}
@@ -23,7 +23,7 @@ {% else %} {% if file_type == 'image' %}
- +
{% else %}
diff --git a/osinaweb/osichat/templates/partials/message.html b/osinaweb/osichat/templates/partials/message.html index 31005e3f..6f0e18a1 100644 --- a/osinaweb/osichat/templates/partials/message.html +++ b/osinaweb/osichat/templates/partials/message.html @@ -5,7 +5,7 @@ class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs"> {% if chat_message.member.staffprofile.image %} + src="http://192.168.1.106:8000{{chat_message.member.staffprofile.image.url}}"> {% else %}

{{chat_message.member.first_name.0}}{{chat_message.member.last_name.0}}

{% endif %} diff --git a/osinaweb/osichat/templates/partials/typing.html b/osinaweb/osichat/templates/partials/typing.html index 3ca4eefe..6053471c 100644 --- a/osinaweb/osichat/templates/partials/typing.html +++ b/osinaweb/osichat/templates/partials/typing.html @@ -1,2 +1,18 @@ -{% load static %} - +
+
+ {% if member.staffprofile.image %} + + {% else %} +

{{member.first_name.0}}{{member.last_name.0}}

+ {% endif %} +
+
+
+
+
+
+
+
diff --git a/osinaweb/osichat/templates/partials/unread-messages.html b/osinaweb/osichat/templates/partials/unread-messages.html index 8d2159c2..5f5653d8 100644 --- a/osinaweb/osichat/templates/partials/unread-messages.html +++ b/osinaweb/osichat/templates/partials/unread-messages.html @@ -7,7 +7,7 @@ class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs"> {% if latest_unread_message.member.staffprofile.image %} + src="http://192.168.1.106:8000{{latest_unread_message.member.staffprofile.image.url}}"> {% else %}

{{latest_unread_message.member.first_name.0}}{{latest_unread_message.member.last_name.0}}

{% endif %} @@ -45,7 +45,7 @@
{% else %}
- +
{% endif %} diff --git a/osinaweb/osichat/templates/start-chat.html b/osinaweb/osichat/templates/start-chat.html index 4814b0c7..94228cb6 100644 --- a/osinaweb/osichat/templates/start-chat.html +++ b/osinaweb/osichat/templates/start-chat.html @@ -62,7 +62,7 @@
- +

Osichat 2.0 by Ositcom

diff --git a/osinaweb/osinacore/templates/chat_templates/chat-room.html b/osinaweb/osinacore/templates/chat_templates/chat-room.html index 2bda13f8..0d07c30c 100644 --- a/osinaweb/osinacore/templates/chat_templates/chat-room.html +++ b/osinaweb/osinacore/templates/chat_templates/chat-room.html @@ -1,7 +1,7 @@ {% load static %} - +
@@ -76,7 +76,6 @@
-
{ const conversationContainer = document.getElementById('inner-conversation') conversationContainer.innerHTML = html; - const guestSessionId = document.getElementById('sessionid').textContent; - const chatRoomId = document.getElementById('chatRoomId').textContent.trim(); + const guestSessionId = document.getElementById('sessionid').textContent.trim(); + const userId = document.getElementById('userId').textContent.trim(); // Close the previous WebSocket connection if it exists if (chatWebSocket) { chatWebSocket.close(); @@ -28,12 +28,11 @@ function openConversation(chatId) { event.preventDefault(); const message = event.target.elements.message.value; - const user_id = event.target.elements.user_id.value; const eventMessage = { 'event_type': 'send_message', 'message': message, - 'user_id': user_id + 'user_id': userId }; chatWebSocket.send(JSON.stringify(eventMessage)); @@ -41,6 +40,8 @@ function openConversation(chatId) { event.target.reset(); }); + + chatWebSocket.onclose = function () { console.log('WebSocket connection to osichat closed'); }; diff --git a/osinaweb/static/js/osichat-admin/textarea.js b/osinaweb/static/js/osichat-admin/textarea.js index 815d9e93..608b7a4e 100644 --- a/osinaweb/static/js/osichat-admin/textarea.js +++ b/osinaweb/static/js/osichat-admin/textarea.js @@ -15,14 +15,35 @@ } // INITIALIZE ELEMENTS - const chatRoomId = document.getElementById('chatRoomId').textContent.trim(); const form = document.querySelector('#sendMessage'); const textarea = document.querySelector('#dynamicTextarea'); const conversationContainer = document.getElementById('conversation'); const submitButton = document.getElementById('submitMessageButton'); + const typingUserId = document.getElementById('userId').textContent.trim(); + let typingTimeout; // EVENT LISTENERS - textarea.addEventListener('input', () => adjustTextAreaAndButton(textarea, submitButton)); + textarea.addEventListener('input', function () { + // Adjust textarea and button + adjustTextAreaAndButton(dynamicTextarea, submitButton); + console.log(chatWebSocket); + chatWebSocket.send(JSON.stringify({ + 'event_type': 'typing', + 'user_id': typingUserId, + 'typing_status': 'typing' + })); + + clearTimeout(typingTimeout); + typingTimeout = setTimeout(function() { + chatWebSocket.send(JSON.stringify({ + 'event_type': 'typing', + 'user_id': typingUserId, + 'typing_status': 'stopped_typing' + })); + }, 3000); + }); + + form.addEventListener('submit', (event) => { textarea.style.height = '50px'; @@ -33,5 +54,4 @@ }, 100); }); - console.log('hi from textarea script'); })(); diff --git a/osinaweb/static/js/osichat/conversation.js b/osinaweb/static/js/osichat/conversation.js index fc2aabee..5e38fa01 100644 --- a/osinaweb/static/js/osichat/conversation.js +++ b/osinaweb/static/js/osichat/conversation.js @@ -1,14 +1,18 @@ const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws"; -const domain = "192.168.1.111:8000"; +const domain = "192.168.1.106:8000"; let osichatSocket; let isOpen = false; +let chatLoaded = false; + + + // FUNCTION TO FETCH THE SESSION ID async function fetchSessionID() { let session_id = 'Unknown'; while (session_id === 'Unknown') { try { - const response = await fetch('http://192.168.1.111:3000/get-client-session/'); + const response = await fetch('http://192.168.1.106:3000/get-client-session/'); const data = await response.json(); if (data.session_id) { session_id = data.session_id; @@ -20,6 +24,20 @@ async function fetchSessionID() { return session_id; } +// FUNCTIONS TO SHOW & HIDE THE LOADER +function showLoader() { + const osichatLoader = document.getElementById('osichatLoader'); + if (osichatLoader) { + osichatLoader.classList.remove('hidden'); + } +} + +function hideLoader() { + const osichatLoader = document.getElementById('osichatLoader'); + if (osichatLoader) { + osichatLoader.classList.add('hidden'); + } +} // FUNCTION TO APPEND THE TEXTAREA SCRIPT function appendTextAreaScript(domain, chatDiv) { @@ -29,7 +47,6 @@ function appendTextAreaScript(domain, chatDiv) { chatDiv.appendChild(textareaScript); } - // FUNCTION TO HANDLE FORM SUBMISSION function handleFormSubmission(form, eventType, osichatSocket) { form.addEventListener('submit', function (event) { @@ -41,23 +58,23 @@ function handleFormSubmission(form, eventType, osichatSocket) { formData.forEach((value, key) => { eventMessage[key] = value; }); - osichatSocket.send(JSON.stringify(eventMessage)); form.reset(); }); } - // FUNCTION TO HANDLE LOAD CHAT EVENT function handleLoadChatEvent(data, osichatSocket) { - const osichatLoader = document.getElementById('osichatLoader'); - - let chatDiv = document.getElementById('roomContainer'); //CASE WHERE WIDGET IS ALREADY LOADED, DISPLAY THE CHAT PAGES(START/CONVERSATION) IN ROOM CONTAINER + chatLoaded = true; + hideLoader(); + let chatDiv = document.getElementById('roomContainer'); // CASE WHERE WIDGET IS ALREADY LOADED, DISPLAY THE CHAT PAGES(START/CONVERSATION) IN ROOM CONTAINER if (!chatDiv) { - chatDiv = document.getElementById('osichat'); //CASE WHERE WIDGET IS NOT LOADED, DISPLAY THE WHOLE CHATWIDGET IN OSICHAT + chatDiv = document.getElementById('osichat'); // CASE WHERE WIDGET IS NOT LOADED, DISPLAY THE WHOLE CHATWIDGET IN OSICHAT } + chatDiv.innerHTML = data.html; + if (!document.querySelector('script[src="http://' + domain + '/static/js/osichat/chat-toggle.js"]')) { const script = document.createElement('script'); script.type = 'text/javascript'; @@ -90,12 +107,16 @@ async function initializeChatWebSocket() { osichatSocket = new WebSocket(osichatSocketUrl); osichatSocket.onopen = () => { - console.log('WebSocket connection to osichat established'); - osichatSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_guest' })); + if(!chatLoaded){ + osichatSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_guest', 'reconnecting': 'False'})); + }else{ + osichatSocket.send(JSON.stringify({ 'event_type': 'load_chat', 'client_type': 'website_guest', 'reconnecting': 'True'})); + } }; osichatSocket.onmessage = function (e) { const data = JSON.parse(e.data); + const typingDiv = document.getElementById('typing'); switch (data.event_type) { case 'load_chat': handleLoadChatEvent(data, osichatSocket); @@ -103,20 +124,23 @@ async function initializeChatWebSocket() { case 'start_conversation': handleLoadChatEvent(data, osichatSocket); break; + case 'typing': + typingDiv.classList.remove('hidden'); + typingDiv.innerHTML = data.html; + break; + case 'stopped_typing': + typingDiv.classList.add('hidden'); + break; case 'send_message': - console.log('h') - console.log(isOpen) - if (isOpen) { // Id chat widget isOpen(declared in chat-toggle.js) mark all messages as read by guest else just return number of unread messages + if (isOpen) { // If chat widget isOpen (declared in chat-toggle.js) mark all messages as read by guest else just return number of unread messages osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'open' })); - console.log(isOpen) } else { osichatSocket.send(JSON.stringify({ 'event_type': 'update_read_messages', 'chat_state': 'closed' })); } const messagesDiv = document.getElementById('messages'); messagesDiv.insertAdjacentHTML('beforeend', data.html); - if (data.user) { //If it is sent by an Osina user play a notification sound for the guest + if (data.user) { // If it is sent by an Osina user play a notification sound for the guest const notificationSound = document.getElementById('notification-sound'); - console.log(notificationSound) notificationSound.play(); } break; @@ -128,15 +152,14 @@ async function initializeChatWebSocket() { break; case 'update_read_messages': const unreadMessages = document.getElementById(`unreadMessages`); - if (!isOpen){ - unreadMessages.classList.remove('hidden') - console.log(unreadMessages) + if (!isOpen) { + unreadMessages.classList.remove('hidden'); unreadMessages.innerHTML = data.html; const script = document.createElement('script'); script.src = `http://${domain}/static/js/osichat/chat-toggle.js`; document.body.appendChild(script); - } else{ - unreadMessages.classList.add('hidden') + } else { + unreadMessages.classList.add('hidden'); } break; default: @@ -146,13 +169,29 @@ async function initializeChatWebSocket() { osichatSocket.onclose = () => { console.log('WebSocket connection to osichat closed'); - // osichatLoader.classList.remove('hidden'); + showLoader(); + setTimeout(() => { + console.log('Attempting to reconnect to WebSocket...'); + initializeChatWebSocket(); + }, 2000); }; osichatSocket.onerror = (error) => { console.log('WebSocket error:', error); - // osichatLoader.classList.remove('hidden'); + showLoader(); }; } -initializeChatWebSocket(); \ No newline at end of file + +window.addEventListener('offline', () => { + showLoader(); + if (osichatSocket) { + osichatSocket.close(); + } +}); + +// INITIALIZE CHAT WEB SOCKET +initializeChatWebSocket(); + + + diff --git a/osinaweb/static/js/osichat/textarea.js b/osinaweb/static/js/osichat/textarea.js index abd0c223..ee484829 100644 --- a/osinaweb/static/js/osichat/textarea.js +++ b/osinaweb/static/js/osichat/textarea.js @@ -1,3 +1,4 @@ +(function() { // FUNCTION TO ADJUST TEXTAREA HEIGHT AND SUBMIT BUTTON VISIBILITY function adjustTextAreaAndButton(textarea, submitButton) { // Adjust the height of the textarea @@ -34,3 +35,5 @@ form.addEventListener('submit', (event) => { conversationContainer.scrollTop = conversationContainer.scrollHeight; }, 100); }); + +})(); diff --git a/osinaweb/static/js/osichat/upload-file.js b/osinaweb/static/js/osichat/upload-file.js index e1bc5b4e..39d56bb3 100644 --- a/osinaweb/static/js/osichat/upload-file.js +++ b/osinaweb/static/js/osichat/upload-file.js @@ -1,80 +1,81 @@ -const imageDomain = "http://192.168.1.111:8000"; - -// TO TRIGGER TEH FILE UPLOADER WHEN CLICKING ON THE UPLOAD FILE SVG -document.getElementById('svgFileUpload').addEventListener('click', function() { - document.getElementById('fileupload').click(); -}); - -document.getElementById('fileupload').addEventListener('change', function(event) { - let files = event.target.files; - - for (let file of files) { - let formData = new FormData(); - formData.append('file', file); - formData.append('filename', file.name); - - // Display the file during upload - if (file.type.startsWith('image/')) { - displayImageDuringUpload(file); - } else { - displayDocumentDuringUpload(file); - } +(function () { + const imageDomain = "http://192.168.1.106:8000"; + + // TO TRIGGER TEH FILE UPLOADER WHEN CLICKING ON THE UPLOAD FILE SVG + document.getElementById('svgFileUpload').addEventListener('click', function () { + document.getElementById('fileupload').click(); + }); + + document.getElementById('fileupload').addEventListener('change', function (event) { + let files = event.target.files; - // Perform the upload - fetch(`${imageDomain}/chat-file-uploader/`, { - method: 'POST', - body: formData, - }) - .then(response => response.json()) - .then(data => { - if (data.data === 'Uploaded Successfully') { - const fullPath = `${imageDomain}/${data.existingPath}`; - updateSelectTag(fullPath, file.name); - if (file.type.startsWith('image/')) { - osichatSocket.send(JSON.stringify({ 'event_type': 'uploaded_file', 'path': data.existingPath, 'file_type': 'image', 'file_name': file.name })); - } else { - osichatSocket.send(JSON.stringify({ 'event_type': 'uploaded_file', 'path': data.existingPath, 'file_type': 'document', 'file_name': file.name })); - } + for (let file of files) { + let formData = new FormData(); + formData.append('file', file); + formData.append('filename', file.name); + + // Display the file during upload + if (file.type.startsWith('image/')) { + displayImageDuringUpload(file); } else { - console.error('Upload failed'); + displayDocumentDuringUpload(file); } - }) - .catch(error => console.error('Error:', error)); + + // Perform the upload + fetch(`${imageDomain}/chat-file-uploader/`, { + method: 'POST', + body: formData, + }) + .then(response => response.json()) + .then(data => { + if (data.data === 'Uploaded Successfully') { + const fullPath = `${imageDomain}/${data.existingPath}`; + updateSelectTag(fullPath, file.name); + if (file.type.startsWith('image/')) { + osichatSocket.send(JSON.stringify({ 'event_type': 'uploaded_file', 'path': data.existingPath, 'file_type': 'image', 'file_name': file.name })); + } else { + osichatSocket.send(JSON.stringify({ 'event_type': 'uploaded_file', 'path': data.existingPath, 'file_type': 'document', 'file_name': file.name })); + } + } else { + console.error('Upload failed'); + } + }) + .catch(error => console.error('Error:', error)); + } + event.target.value = ''; + }); + + function displayImageDuringUpload(file) { + let reader = new FileReader(); + reader.onload = function (event) { + let outerDiv = document.createElement('div'); + outerDiv.id = 'uploading-' + file.name; + outerDiv.className = 'w-fit p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue'; + + let div = document.createElement('div'); + let img = document.createElement('img'); + img.src = event.target.result; + img.style.opacity = '0.2'; + + div.appendChild(img); + + outerDiv.appendChild(div); + + document.getElementById('messages').appendChild(outerDiv); + }; + reader.readAsDataURL(file); } - event.target.value = ''; -}); -function displayImageDuringUpload(file) { - let reader = new FileReader(); - reader.onload = function(event) { + + function displayDocumentDuringUpload(file) { let outerDiv = document.createElement('div'); outerDiv.id = 'uploading-' + file.name; - outerDiv.className = 'w-fit p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue'; - - let div = document.createElement('div'); - let img = document.createElement('img'); - img.src = event.target.result; - img.style.opacity = '0.2'; - - div.appendChild(img); - - outerDiv.appendChild(div); - - document.getElementById('messages').appendChild(outerDiv); - }; - reader.readAsDataURL(file); -} - + outerDiv.className = 'w-full p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue'; -function displayDocumentDuringUpload(file) { - let outerDiv = document.createElement('div'); - outerDiv.id = 'uploading-' + file.name; - outerDiv.className = 'w-full p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue'; + let flexContainer = document.createElement('div'); + flexContainer.className = 'w-full flex items-center gap-1'; - let flexContainer = document.createElement('div'); - flexContainer.className = 'w-full flex items-center gap-1'; - - let svg = ` + let svg = ` @@ -82,39 +83,40 @@ function displayDocumentDuringUpload(file) { `; - let svgDiv = document.createElement('div'); - svgDiv.innerHTML = svg; + let svgDiv = document.createElement('div'); + svgDiv.innerHTML = svg; - let textContainer = document.createElement('div'); - textContainer.className = 'flex flex-col'; + let textContainer = document.createElement('div'); + textContainer.className = 'flex flex-col'; - let uploadingText = document.createElement('span'); - uploadingText.id = 'uploading-' + file.name; - uploadingText.textContent = 'Uploading...'; + let uploadingText = document.createElement('span'); + uploadingText.id = 'uploading-' + file.name; + uploadingText.textContent = 'Uploading...'; - let fileNameDiv = document.createElement('div'); - fileNameDiv.className = 'file-name'; - fileNameDiv.textContent = file.name; + let fileNameDiv = document.createElement('div'); + fileNameDiv.className = 'file-name'; + fileNameDiv.textContent = file.name; - textContainer.appendChild(uploadingText); - textContainer.appendChild(fileNameDiv); + textContainer.appendChild(uploadingText); + textContainer.appendChild(fileNameDiv); - flexContainer.appendChild(svgDiv); - flexContainer.appendChild(textContainer); + flexContainer.appendChild(svgDiv); + flexContainer.appendChild(textContainer); - outerDiv.appendChild(flexContainer); + outerDiv.appendChild(flexContainer); - document.getElementById('messages').appendChild(outerDiv); -} + document.getElementById('messages').appendChild(outerDiv); + } -function updateSelectTag(path, fileName) { - let option = document.createElement('option'); - option.value = path; - option.textContent = fileName; - option.selected = true; - document.getElementById('filePathInput').appendChild(option); -} + function updateSelectTag(path, fileName) { + let option = document.createElement('option'); + option.value = path; + option.textContent = fileName; + option.selected = true; + document.getElementById('filePathInput').appendChild(option); + } +})();