Fix/file upload (#19)

* Refactor form handling in CreateSend and improve PasswordInput component

* Replace v-select with v-btn-toggle for type selection in Create.vue

* chore: update changelog for version 1.0.9 and enhance file upload validation

---------

Co-authored-by: George Petrakis <g.petrakis@natechbanking.com>

Author: kek-Sec

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [1.0.9]
+
+### Changed
+- Improved the "Type" selector on the Create Secret page to use a visually appealing slider toggle with icons for "Text" and "File".
+- After creating a secret, all input fields are now cleared for a better user experience.
+- Enhanced file upload validation to reliably detect selected files and prevent false "Please select a file" errors.
+
+### Fixed
+- Fixed an issue where file uploads would sometimes incorrectly show "Please select a file" even when a file was chosen.
+
+### UI/UX
+- The form now resets when navigating to the Create page via the logo or Create+ button.
+
 ## [1.0.8]
 ### UI Enhancements
 - **Redesigned Header and Footer**: Modernized header/footer with theme toggle and improved visual consistency.

internal/handlers/handlers.go

@@ -3,7 +3,7 @@ package handlers
 
 import (
 	"fmt"
-	"io/ioutil"
+	"io"
 	"log"
 	"net/http"
 	"os"
@@ -22,10 +22,19 @@ import (
 // It accepts form data for type (text/file), optional password, one-time use, and expiration.
 func CreateSend(cfg config.Config, db *gorm.DB) gin.HandlerFunc {
 	return func(c *gin.Context) {
-		stype := c.PostForm("type")
-		pw := c.PostForm("password")
-		ot := c.PostForm("onetime")
-		exp := c.PostForm("expires")
+		// Explicitly parse the multipart form before accessing form values.
+		// This is crucial for handling mixed file/text forms reliably in Gin.
+		if err := c.Request.ParseMultipartForm(cfg.MaxFileSize + 1024*1024); err != nil { // Add buffer to max size
+			log.Println("Error parsing multipart form:", err)
+			c.AbortWithStatusJSON(http.StatusBadRequest, gin.H{"error": "Invalid form data or file too large"})
+			return
+		}
+
+		// Use c.Request.FormValue now that the form is parsed.
+		stype := c.Request.FormValue("type")
+		pw := c.Request.FormValue("password")
+		ot := c.Request.FormValue("onetime")
+		exp := c.Request.FormValue("expires")
 
 		log.Println("CreateSend called with type:", stype)
 
@@ -63,7 +72,7 @@ func CreateSend(cfg config.Config, db *gorm.DB) gin.HandlerFunc {
 		key := deriveKey(pw, cfg)
 
 		if stype == "text" {
-			text := c.PostForm("data")
+			text := c.Request.FormValue("data")
 			if text == "" {
 				log.Println("Error: 'data' field is empty for text type")
 				c.AbortWithStatusJSON(http.StatusBadRequest, gin.H{"error": "Data field is required for text type"})
@@ -92,30 +101,24 @@ func CreateSend(cfg config.Config, db *gorm.DB) gin.HandlerFunc {
 		}
 
 		if stype == "file" {
-			file, err := c.FormFile("file")
+			// Use c.Request.FormFile now that the form is parsed.
+			file, header, err := c.Request.FormFile("file")
 			if err != nil {
 				log.Println("Error retrieving file from form data:", err)
 				c.AbortWithStatusJSON(http.StatusBadRequest, gin.H{"error": "Failed to retrieve file from form data"})
 				return
 			}
+			defer file.Close()
 
-			log.Println("Received file:", file.Filename, "Size:", file.Size)
+			log.Println("Received file:", header.Filename, "Size:", header.Size)
 
-			if file.Size > cfg.MaxFileSize {
-				log.Printf("Error: File size (%d bytes) exceeds maximum allowed size (%d bytes)\n", file.Size, cfg.MaxFileSize)
+			if header.Size > cfg.MaxFileSize {
+				log.Printf("Error: File size (%d bytes) exceeds maximum allowed size (%d bytes)\n", header.Size, cfg.MaxFileSize)
 				c.AbortWithStatusJSON(http.StatusRequestEntityTooLarge, gin.H{"error": "File size exceeds the maximum allowed limit"})
 				return
 			}
 
-			f, err := file.Open()
-			if err != nil {
-				log.Println("Error opening uploaded file:", err)
-				c.AbortWithStatusJSON(http.StatusInternalServerError, gin.H{"error": "Failed to open uploaded file"})
-				return
-			}
-			defer f.Close()
-
-			data, err := ioutil.ReadAll(f)
+			data, err := io.ReadAll(file)
 			if err != nil {
 				log.Println("Error reading file data:", err)
 				c.AbortWithStatusJSON(http.StatusInternalServerError, gin.H{"error": "Failed to read file data"})
@@ -130,8 +133,7 @@ func CreateSend(cfg config.Config, db *gorm.DB) gin.HandlerFunc {
 			}
 
 			fp := filepath.Join(cfg.StoragePath, hash)
-			err = ioutil.WriteFile(fp, []byte(enc), 0600)
-			if err != nil {
+			if err := os.WriteFile(fp, []byte(enc), 0600); err != nil {
 				log.Println("Error writing encrypted file to storage:", err)
 				c.AbortWithStatusJSON(http.StatusInternalServerError, gin.H{"error": "Failed to write encrypted file to storage"})
 				return
@@ -143,7 +145,7 @@ func CreateSend(cfg config.Config, db *gorm.DB) gin.HandlerFunc {
 				Hash:      hash,
 				Type:      "file",
 				FilePath:  fp,
-				FileName:  file.Filename,
+				FileName:  header.Filename,
 				Password:  pw,
 				OneTime:   oneTime,
 				ExpiresAt: expiresAt,
@@ -192,7 +194,7 @@ func GetSend(cfg config.Config, db *gorm.DB) gin.HandlerFunc {
 			}
 			c.String(http.StatusOK, string(d))
 		} else {
-			d, err := ioutil.ReadFile(s.FilePath)
+			d, err := os.ReadFile(s.FilePath)
 			if err != nil {
 				c.AbortWithStatus(http.StatusInternalServerError)
 				return
@@ -246,4 +248,4 @@ func CheckPasswordProtection(db *gorm.DB) gin.HandlerFunc {
 		// Return whether the send requires a password
 		c.JSON(http.StatusOK, gin.H{"requiresPassword": s.Password != ""})
 	}
-}
+}

ui/src/components/PasswordInput.vue

@@ -4,18 +4,20 @@
     :type="showPassword ? 'text' : 'password'"
     :model-value="modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
+    variant="outlined"
+    prepend-inner-icon="mdi-lock"
   >
     <template v-slot:append-inner>
       <v-tooltip text="Toggle Password Visibility">
-        <template v-slot:activator="{ on, attrs }">
-          <v-btn icon v-bind="attrs" v-on="on" @click="showPassword = !showPassword" size="small">
+        <template v-slot:activator="{ props }">
+          <v-btn icon v-bind="props" @click="showPassword = !showPassword" size="small">
             <v-icon>{{ showPassword ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
           </v-btn>
         </template>
       </v-tooltip>
       <v-tooltip text="Generate Random Password">
-        <template v-slot:activator="{ on, attrs }">
-          <v-btn icon color="primary" v-bind="attrs" v-on="on" @click="generateNewPassword" size="small" style="margin-left: 4px">
+        <template v-slot:activator="{ props }">
+          <v-btn icon color="primary" v-bind="props" @click="generateNewPassword" size="small" style="margin-left: 4px">
             <v-icon>mdi-refresh</v-icon>
           </v-btn>
         </template>

ui/src/pages/Create.vue

@@ -4,14 +4,21 @@
       <v-card-title class="text-h5 text-md-h4 font-weight-bold text-center mb-4">Create a New Secret 🔑</v-card-title>
       <v-card-text>
         <v-form @submit.prevent="handleSubmit">
-          <v-select
-            label="Type"
+          <v-btn-toggle
             v-model="type"
-            :items="['text', 'file']"
-            required
-            variant="outlined"
-            class="mb-2"
-          ></v-select>
+            mandatory
+            class="mb-4 d-flex justify-center"
+            color="primary"
+            rounded
+            group
+          >
+            <v-btn value="text" class="px-6" rounded>
+              <v-icon left>mdi-text</v-icon> Text
+            </v-btn>
+            <v-btn value="file" class="px-6" rounded>
+              <v-icon left>mdi-file</v-icon> File
+            </v-btn>
+          </v-btn-toggle>
 
           <v-textarea
             v-if="type === 'text'"
@@ -88,11 +95,11 @@
 import { ref, watch } from 'vue';
 import { createSend } from '../services/api.js';
 import PasswordInput from '../components/PasswordInput.vue';
-import { formStore } from '../stores/formStore.js'; // Import the store
+import { formStore } from '../stores/formStore.js';
 
 const type = ref('text');
 const textSecret = ref('');
-const fileBlob = ref(null);
+// v-file-input uses an array for its model, so initialize it as such.
 const files = ref([]);
 const password = ref('');
 const oneTime = ref(false);
@@ -112,14 +119,6 @@ const expirationOptions = [
   { title: '1 Week', value: '168h' }
 ];
 
-watch(files, (newFiles) => {
-  if (Array.isArray(newFiles) && newFiles.length > 0) {
-    fileBlob.value = newFiles[0];
-  } else {
-    fileBlob.value = null;
-  }
-});
-
 function resetForm() {
   type.value = 'text';
   textSecret.value = '';
@@ -152,12 +151,17 @@ async function handleSubmit() {
     }
     formData.append('data', textSecret.value);
   } else if (type.value === 'file') {
-    if (!fileBlob.value) {
-      errorMessage.value = 'Please select a file';
+    // Debug log
+    console.log('files.value:', files.value);
+    // Ensure files.value is an array and has a File object
+    const fileArr = Array.isArray(files.value) ? files.value : (files.value ? [files.value] : []);
+    if (!fileArr.length || !(fileArr[0] instanceof File)) {
+      errorMessage.value = 'Please select a file 😟';
       loading.value = false;
       return;
     }
-    formData.append('file', fileBlob.value);
+    const fileToUpload = fileArr[0];
+    formData.append('file', fileToUpload, fileToUpload.name);
   }
 
   if (password.value.trim()) {
@@ -171,6 +175,13 @@ async function handleSubmit() {
   try {
     const result = await createSend(formData);
     resultHash.value = result.hash;
+    // Clear form inputs but keep the result hash visible
+    type.value = 'text';
+    textSecret.value = '';
+    files.value = [];
+    password.value = '';
+    oneTime.value = false;
+    expires.value = '24h';
   } catch (err) {
     errorMessage.value = err.message || 'Failed to create secret';
   } finally {

version.yaml

@@ -1,2 +1,2 @@
 #Application version following https://semver.org/
-version: 1.0.7
+version: 1.0.9