SUBIR ARCHIVOS CON DRAG AND DROP JAVASCRIPT
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- En este tutorial aprenderás a crear una interfaz para arrastrar archivos de tu equipo y subirlos a un servidor con Javascript
👍 Apóyame con un like para llegar a más developers 😊
✅ Te invito a suscribirte al canal 👉 bit.ly/TH-cam-...
🔔 Activa la campanita para notificarte del siguiente video
Descarga los archivos del tutorial:
➡️ bit.ly/MRR-Gith...
➡️ bit.ly/Github-s...
➡️ bit.ly/MRR-Gith...
✅ Sígueme en las redes sociales:
Discord / discord
Facebook / vidamrr
Twitter / vidamrr
Instagram / vidamrr
❤ únete al canal para obtener beneficios exclusivos:
/ @vidamrr
😍 Más videos dentro del canal:
Café con Rivas - Vlogs bit.ly/mrr-vlogs
Curso de Node.js bit.ly/mrr-curs...
Curso de PHP + MySQL bit.ly/mrr-curs...
Basicos Dev bit.ly/basicos-dev
Tips y trucos bit.ly/tips-trucos
Mi primera app bit.ly/primera-app
Retos de programación bit.ly/problema...
Inspiración web bit.ly/mrr-insp...
Tutoriales Javascript bit.ly/tutorial...
Curso básico de CSS bit.ly/curso-cs...
Diseño elementos con CSS bit.ly/componen...
Mi primer sitio web con CSS bit.ly/primer-s...
Curso avanzado de CSS3 bit.ly/curso-css3
Sitio web Completo en CSS3 bit.ly/mrr-siti... - วิทยาศาสตร์และเทคโนโลยี
![Curso Javascript - Drag and Drop (2) Puzzle [dataTransfer]](http://i.ytimg.com/vi/wP-yu5cDtNc/mqdefault.jpg)
![[TH] RNT vs SPG - VCT Ascension Pacific - Day 1](http://i.ytimg.com/vi/RUTkf8Detj8/mqdefault.jpg)
Genial!!! seguiré el tuto para mejorar el upload que tengo en puro PHP. Gracias por el esfuerzo!
Wow, al fin encontré un vídeo en donde muestra como hacer estas cosas, muchas gracias por haber hecho esto :)
Genial! ya quiero verlo
Bro, excelente video, no conocía ciertas herramientas que usas en javascript para controlar los archivos. Sigue así!
Iba bien hasta el minuto 15, despues parecia que estaba hablando chino... me tocara veerlo varias veces para entender
;v EXELENTE
X2 jajaja
¿Cómo puedo agregar un botón para eliminar una imagen si me equivoque y cargue más imagenes de las que debía?
Me pregunto lo mismo
Excelente pregunta jajaja
Buenisimo video! Excelente la explicación, lo pude aplicar en mi trabajo
Excelente!! Que bueno que te sirvió 👏🏻👏🏻🎉
Gracias! me ayudo mucho a aterrizar barias cosas
hola como esta una pregunta lo estoy implementado en un proyecto de .net pero reviso el tema y siempre en la funcion processFiles(file) me llega undefined al revisar con console.log,
Le implemente un timeout pero sigue saliendo undefined
Un curso de CSS Grid como el que hiciste de Flexbox estaría genial 😁
hello, what extension do you use for javascript autocomplete code ?
Buenísimo tu video. Muchas gracias!!
Woow justo estaba buscando esto, pero tendré que esperar 4 días 😄
Buen video ,lo veré denuevo para seguir practicandolo💪🏼
Si quieren que al final siga cambiando de color tanto con el botón como arrastrando, comenten " dropArea.classList.remove("active");" en los eventos de "change" y "drop"
Hola. He probado el codigo. Funciona bien cuando el servidor de destino es local pero no funciona cuando el servidor de destino es remoto. ¿Cual podría ser el motivo?
Estás en el mismo dominio? Sino checa que no tengas problemas de CORS, cuando mandas de un dominio a otro generalmente se van a bloquear tus solicitudes
Me suscribo eres el mejor, gracias :D
Excelente, justo lo que buscaba
se ve bueno este tuto vamos a seguirlo
Donde esta el link para ver este codigo plis me urge
lo intento buscar en la descripcion, me meto al link y nada
Excelente, me encanta! Ahora, que cambios se podrían hacer para que en vez de imágenes fuesen Archivos?
solamente en validationExtensions cambialo por application/pdf, si no sabes que archivo es el que ocupas pon esta alerta => alert("Archivos permitidos: PDF____"+docType);
@@merlyndeikaroz1371 y si es para ambos ?
A ver si puedes poner tambien otro boton que sea “abrir camara del telefono y que suba la foto directamente”
buenas tardes me gusto el video y para subir y enviar solo archivos pdf es el mismo codigo solo tendria que cambiar algunas cosas verdad ??
si el cargue se realizara al servidor con php como seria mas o menos?
Buenas, primero buen video. segundo, te consulto, como podria implementar el eliminar? . lo puse dentro del const image = `... ` pero no hace nada, si cambio a : const image = `... ` me dice que no existe la funcion. entiendo que es porque pierde el contexto de donde esta. tenes alguna sugerencia? graciaas
Buenísimo!!
Muy bueno!
consulta: una vez subidas las imagenes se pueden descargar?
Se puede abrir el explorar de archivos con js? 🤔
Exelente el video!!
al llegar al servidor me surge este problema: ReferenceError: document is not defined
at Object. (F:\Ubicación\index.js:1:18)
at Module._compile (node:internal/modules/cjs/loader:1126:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47
[nodemon] app crashed - waiting for file changes before starting...
y para que solo se pueda 1?
Es posible copiar y pegar el archivo en un input?
Hola, una pregunta cual sería a tu consideración la mejor manera de manipular información como los id's con javascript solamente, por ejemplo para saber el id del registro que estoy editando, evitar ponerlo en un campo hidden tu que me recomendarías con sólo javascript, veo que en frameworks ya se hace casi automáticamente ya que examino el código fuente en el navegador y no veos esos campos, pero no logro realizar lo mismo solo con javascript y html. Gracias
El tema de JavaScript solito es que podrías manipular las datos, lo que debes hacer es guardar los ids en algún lado y ponerlos en los elementos, pero cada que necesites obtener el Id consultarlo desde la variable o arreglo donde están tus elementos. Así aunque el usuario modifique el HTML tú tienes tus datos en memoria
@@vidamrr Entonces los guardo en una variable global en JavaScript y acceder a ella posteriormente verdad. Muchas gracias
Eres un crack bro
cual de todos los enlaces es para descargar bro , solo tienes cursos de node,php y una web
Que extensión utilizas para las sugerencias de código mientras vas escribiendo
Es GitHub copilot, tienes que registrarte a la beta para que la extensión te funcione
Hola me gustaría saber si los datos enviados por Fetch se pueden recoger por un script de PHP, gracias.
Si, en PHP los datos los recibes con $_POST como siempre
muy bien hermano gracias!, solo como validas los archivos .csv?, cuando intento validarlos me manda directamente al else
Un poco tarde, pero puedes intentar con "const validExtensions = [ 'text/csv'] "
Puedes ir revisando las extensiones con : console.log(file.type);
esta bueno el video, pero no me funciona la parte del FileReader() cuando se realiza el fileReader.addEventListener, a alguien mas le ha pasado? estoy dandole vuelta y aun no veo el problema.
por si acaso, no se disparaba el evento porque habia colocado . fileReader.readAsDataURL(file) dentro del evento
Pero solo sirve para fotos.. Nop puedo subir videos.. Y como podria eliminar los que ya seleccione??
Eso es otro alcance, el video solo es para subir archivos, pero para eliminarlos tienes que igual implementar en el backend la funcion
@@vidamrr mmm no tienes un video de eso?? amigo
Nada entendí algo fácil,donde saco eso
no me funciona el data transfer :(
Uncaught TypeError: files is undefined a alguien le paso ?
revisa el nombre de tu variable, el error dice que file no existe
Subir mis archivos y descargar
"click" es nulo dice la consola