diff --git a/resources/js/components/compras/Body.vue b/resources/js/components/compras/Body.vue
index 23e9f0a..9828a73 100644
--- a/resources/js/components/compras/Body.vue
+++ b/resources/js/components/compras/Body.vue
@@ -11,7 +11,9 @@
         <div class="block pb-6" id="canasta-compras-seccion"
              :class="seccionActiva === 'canasta-compras-seccion' ? 'is-active' : 'is-hidden'">
             <div class="block" id="canasta-compras-seccion">
-                <p> Todavía no hay nada por acá </p>
+                <div class="buttons is-right">
+                    <compras-canasta-input></compras-canasta-input>
+                </div>
             </div>
         </div>
     </div>
@@ -20,11 +22,13 @@
 <script>
 import TabsSecciones from "../comunes/TabsSecciones.vue";
 import DropdownDescargar from "./DropdownDescargar.vue";
+import CanastaInput from "./CanastaInput.vue";
 
 export default {
     components: {
         TabsSecciones,
         DropdownDescargar,
+        CanastaInput,
     },
     data() {
         return {
@@ -32,7 +36,7 @@ export default {
                 { id: "canasta-compras", nombre: "Canasta" }],
             tabActiva: "pedidos-compras",
             seccionActiva: "pedidos-compras-seccion",
-            hayAprobados: true,
+            archivo: undefined,
         }
     },
     methods: {
diff --git a/resources/js/components/compras/CanastaInput.vue b/resources/js/components/compras/CanastaInput.vue
new file mode 100644
index 0000000..22bc687
--- /dev/null
+++ b/resources/js/components/compras/CanastaInput.vue
@@ -0,0 +1,69 @@
+<template>
+    <div class="block">
+        <div class="file has-name is-right">
+            <label class="file-label">
+                <input
+                    class="file-input"
+                    type="file"
+                    name="canasta"
+                    @change="onFileChange"
+                />
+                <span class="file-cta">
+                <span class="file-icon">
+                  <i class="fas fa-cloud-upload-alt"></i>
+                </span>
+                <span class="file-label">Subir canasta</span>
+              </span>
+                <span class="file-name" v-if="archivo">
+                {{ archivo.nombre }}
+              </span>
+            </label>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+    name: "CanastaInput",
+    data() {
+        return {
+            archivo: null,
+            cargando: false,
+        };
+    },
+    methods: {
+        async onFileChange(event) {
+            const archivo = event.target.files[0];
+            if (archivo && archivo.type === "text/csv") {
+                this.archivo = { file: archivo, nombre: archivo.name };
+                const formData = new FormData();
+                formData.append("file", this.archivo.file);
+
+                try {
+                    this.cargando = true;
+                    const response = await axios.post("/cargar-canasta", formData, {
+                        headers: {
+                            "Content-Type": "multipart/form-data",
+                        },
+                    });
+                    this.$root.$toast(response.data.message || "Canasta cargada!");
+                } catch (error) {
+                    this.$root.$toast(error.response?.data?.message || "Hubo errores.");
+                } finally {
+                    this.cargando = false;
+                    this.archivo = null;
+                }
+            } else {
+                this.$root.$toast("La canasta debe ser .CSV")
+                this.archivo = null;
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+</style>