Polished base64 encoder

Frontend/src/components/encoder/EncoderButtonComponent.vue

@@ -3,7 +3,7 @@
 
 const props = defineProps(
     {
-        encodeType: {type:String,required:true},
+        operationType: {type:String,required:true},
         code: {type: String, required: true}
     }
 )
@@ -15,16 +15,16 @@ const emit = defineEmits([
 
 function convert(){
     console.log("works")
-    switch(props.encodeType.toLowerCase()){
+    switch(props.operationType.toLowerCase()){
-        case "base64":{
+        case "encode":{
             emit('update:result', btoa(props.code) )
             break;
         }
-        case "text":{
+        case "decode":{
             emit('update:result', atob(props.code) )
             break;
         }
-        case "image":{
+        case "show image":{
             emit('image:show', props.code )
             break;
         }
@@ -35,5 +35,5 @@ function convert(){
 </script>
 
 <template>
-    <button @click="convert()" class="tool-button">{{ props.encodeType }}</button>
+    <button @click="convert()" class="tool-button">{{ props.operationType }}</button>
 </template>

Frontend/src/views/Base64EncoderView.vue

@@ -21,8 +21,12 @@ function showImage(newImage : string){
 
 function convertImageToBase64(file : any){
     const reader = new FileReader()
-    reader.onloadend = () => (console.log(data.value = reader.result?.toString().split(',')[1]))
+    reader.onloadend = () => {
+        data.value = reader.result?.toString().split(',')[1]
+        showImage(data.value)
+    }
     reader.readAsDataURL(file.target.files[0])
+    
 }
 
 function clear(){
@@ -38,18 +42,17 @@ function clear(){
 <div id="layoutFull" class="w-full h-full flex flex-col xl:flex-row gap-4">
     <div id="layoutLeft" class="flex flex-col w-full xl:w-1/2 h-1/3 xl:h-full gap-4">
         <div class="w-full flex flex-row place-content-between items-center">
-            <label class="dark:text-white text-center">Base64/Text</label>
+            <label class="dark:text-white text-center">Base64 Encoder</label>
-            <div class="flex flex-row items-center gap-2">
+            <div class="flex flex-row items-center gap-2 overflow-x-scroll">
                 <button class="tool-button" @click="clear()">Clear</button>
-                <label class="text-grey-900 dark:text-white">Convert to</label>
+                <EncoderButton @image:show="showImage" :code="data" operation-type="Show Image"></EncoderButton>
-                <EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
+                <div class="w-2"></div>
-                <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
+                <EncoderButton @update:result="setTextFieldValue" :code="data" operation-type="Encode"></EncoderButton>
-                <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
+                <EncoderButton @update:result="setTextFieldValue" :code="data" operation-type="Decode"></EncoderButton>
             </div>
             
         </div>
         <div id="codeEditor" class="w-full h-full xl:h-1/3 flex flex-col">
-            
             <CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent>
         </div>
         <div class="flex flex-row justify-center w-full">