@ -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 = `
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" class = "w-7 text-white notFilledSvg" >
< path d = "M8 7L16 7" stroke = "currentColor" stroke - width = "1.5" stroke - linecap = "round" stroke - linejoin = "round" > < / p a t h >
< path d = "M8 11L12 11" stroke = "currentColor" stroke - width = "1.5" stroke - linecap = "round" stroke - linejoin = "round" > < / p a t h >
@ -82,39 +83,40 @@ function displayDocumentDuringUpload(file) {
< / s v g >
` ;
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 ) ;
}
} ) ( ) ;
emile
9 months ago
