0
195
Views¿Cómo puedo manejar el clic en la entrada del archivo con Vue?
Quiero controlar la pulsación de cancelación al cargar un archivo
Miré algunos ejemplos que se implementaron usando JavaScript puro aquí hay un ejemplo
Todos estos ejemplos funcionan bien, traté de implementar este ejemplo usando Vue JS, pero no me funciona correctamente
<div> <label for="upload" @click="initialize">Upload File</label> <input type="file" id="upload" ref="theFile" hidden /> </div> <script> export default { methods: { initialize() { document.body.onfocus = this.checkIt; alert("initializing"); }, checkIt() { if (this.$refs.theFile.value.length) alert("Files Loaded"); else alert("Cancel clicked"); document.body.onfocus = null; alert("checked"); }, }, }; </script>Puedes ver un ejemplo de mi código en codesandbox
·
Juan Pablo Isaza
1 answers
Answer question0
Como se indica en los comentarios, no hay un evento para capturar la cancelación y sería mejor simplemente agregar un botón de envío.
Habiendo dicho eso, esto le dirá si los archivos se cargaron cuando se dispare el próximo evento 'mouseenter' en el cuerpo. No le dirá si se hizo clic en el botón cancelar.
<template> <form> <label for="upload">Upload File</label> <input @click="onShowFileUpload" @change="onFileUpload" type="file" id="upload" ref="theFile" hidden /> </form> </template> <script> export default { methods: { onShowFileUpload() { this.$refs.theFile.value = ""; const onHandleMouseEnter = () => { if (this.$refs.theFile.value.length === 0) { console.log("No files loaded"); } document.body.removeEventListener("mouseenter", onHandleMouseEnter); }; document.body.addEventListener("mouseenter", onHandleMouseEnter); }, onFileUpload(event) { console.log("Files Uploaded"); }, }, }; </script> <style> html, body { height: 100%; height: 100%; } label { font-family: sans-serif; font-size: 20px; border: 1px solid tomato; padding: 7px 15px; cursor: pointer; } </style>
·
Juan Pablo Isaza
Report
Answer question