👻 Drag and drop files with DROPZONE JS ⚡ and send files by FETCH to our SERVER 🌐

🙏 LIKE 👍🏻 SHARE 📲 COMMENT 🎇 ACTIVATE_NOTIFICATIONS 🔔
In this video we will show you an easy way to implement DROPZONE JS, which is an open source javascript library that helps us upload any type of files to our services by dragging and dropping in the indicated area, once we have the files in Our browser also shows how we can upload it using FETCH and with PHP, we carry out the procedure to upload the files to our server.
Project link on github: github.com/fra...
Note: Only the node_modules folder is missing, since I was not allowed to upload them because there are many files. But remember that you only have to execute the command "npm install --save dropzone" in the root of the project, and with that you will run the resources

[@AndresPedraza-wh5ud]

Excelente la explicación y muy bueno el ejemplo, muchas gracias!!

[@codigolibre29]

Que bueno que te fue de ayudar, Gracias por tu comentario.

[@jesuszunigaamador3226]

Calidad, me sirvio de mucho. muchas gracias!

[@codigolibre29]

Que bueno que te fue de ayuda, muchas gracias por tu comentario

[@jesuszunigaamador3226]

@@codigolibre29 seria excelente que hicieras el como poder editar esas fotos que se guardaron, como sugerencia a un proximo video.

[@codigolibre29]

Te refieres a cambiar tamaño de imagen, si boy a subir un video para moostrar eso, gracias por la recomendación e idea

[@jesuszunigaamador3226]

@@codigolibre29 también pero me refería a cuando quieras editar y sustituir una imagen ya subida por otra nueva

[@johnfelaifel]

Excelente, muchas gracias

[@codigolibre29]

Gracias por tu comentario

[@titorafael477]

Excelente video mi hermano...

[@codigolibre29]

Que bueno que te fue de ayuda, muchas gracias por tu comentario.

[@titorafael477]

@@codigolibre29tengo un proyecto en c# mvc y quiero mostrar alertas cuando el servidor no responde... puede ayudarme con eso?

[@codigolibre29]

​@@titorafael477 Hola que tal, pues la verdad esto tendria diferentes soluciones, Pero por ejemplo puedes usar usar JS con la function "FETCH", ejemplo "fetch( "url-a-tu-archivo-c#", { method:'POST', body: 'la-inormacion-que-envies-al-server' } ) .then( res => { // Aqui imprimirias la respuesta dependiendo lo que te arroje "res" } ) Esto lo obtendrias en tu archivo C# y ya decides que retornar. Como te digo podria tener diferentes soluciones, Pero pues espero poder darte una idea

[@titorafael477]

Sabes cómo agregar una pantalla de espera mientras se suben los archivos al servidor... Imaginemos que no responde el servidor... Y mientras tanto... El usuario da click en "subir archivo" muchas veces

[@EdgardoRuotolo]

Tengo dos preguntas: ¿Como vacías el formulario después de enviar? ¿Existe alguna forma de cambiar el nombre a los archivos después de ser subidos? Gracias

[@codigolibre29]

Hola que tal, disculpa por demorar en responderte, para limpiar el formulario solo seria cuention que cuando recibes desde php la respuesta "success" en el js, puedieras hacer un condicional de la siguiente manera: if ( res == "success" ) { window.location.reload() } .... con esto recargaras la pagina limpiando todo, para la siguiente pregunta, en php en el segundo parametro de la funcion move_upload_file puedes agregar el nombre que deseas de la siguiente manera: move_upload_file( $file['tmp_name'], 'folder_donde_se_guardara/el_nombre_que_desees.jpg' ); .... aqui es importante que agregres la extension, bueno pues espero te resuelva tus dudas, gracias por tu comentario.

[@c4rlosg]

Excelente explicación, tengo una pregunta, cuando capturo las imagenes me sale un X en rojo y sale un error al colocar el mouse encima., como hago para quitar ese error ?

[@codigolibre29]

Si te refieres a cuando las arrastras al dropzone, revisa la ruta en la declarancion de dropzone en el app.js. let myDropzone = new Dropzone('.dropzone', { url:'/youtube/dropzone/', =========>>>>> AQUI REVISA QUE SE LA RUTA DE TUS DIRECTORIOS maxFilesize:2, maxFiles:3, acceptedFiles:'image/jpeg, image/png', addRemoveLinks:true, dictRemoveFile:'Quitar' })

[@rafaelxboxdavid7130]

hola muy buen video tengo una duda como hago para cargar una sola imagen pero que esa imagen cubra todo el espacio del dropzone? que sea full-width y full-height

[@codigolibre29]

Hola que tal, en este caso, primero donde instanciamos Dropzone en app.js debemos decirle que solo acepte un archivo y obviamente dejar en que sea solo imagen. "" let myDropzone = new Dropzone('.dropzone', { maxFiles:1, }) """ Despues en el archivo html dentro del contenedor con la clase "dropzone" agregar una etiqueta imagen """ """ Y para finaliza la funcion de dropzone "addedFile" solo debes agregar lo siguiente """ myDropzone.on('addedfile', file =>{ arrImages.push(file); document.querySelector('.dz-preview').style.display = 'none'; const img = URL.createObjectUrl( file ); document.querySelector('#superview').src = img; }) """ Como puedes ver aqui, lo que hacems es ocultar los contenedores originales de las imagenes que nos muestra dropzone y hacemos que la imagen se cargue en nuestra etiqueta html con el id "superview". Una vez asi, puedes jugar con el tamaño de la imagen "superview" con los estilos css que necesites. Espero te pueda ser de utilidad., Gracias por comentar

[@lourdesruiz563]

para subir PDF como haces para llamarlo en lugar de image y como declaro en python ese campo me puedes orientar por favor ?

[@codigolibre29]

Hola que tal, bueno para empezar cuando inicializamos dropzone en el archivo app.js, en el atributo "acceptedFiles" debes agregar 'application/pdf', para que pueda aceptar archivos pdf, para el envio desde js seria igual ya que dropzone nos arroja los archivos en tipo file, despues de eso puede usar algo similar a esto *** import requests url = 'ejemplo.com/subir' archivo_path = '/ruta/a/miarchivo.pdf' encabezados = {'Content-Type': 'application/pdf'} datos = open(archivo_path, 'rb').read() respuesta = requests.post(url, headers=encabezados, data=datos) if respuesta.ok: print('El archivo fue subido correctamente.') else: print('Algo salió mal mientras subía el archivo.') *** para que cargues la imagen desde python

[@juanbriceno7223]

Excelente video😄, como le haría para insertar el dropzone si es parte de un formulario y a la vez insertar los otros datos del formulario? gracias!

[@codigolibre29]

unicamente deves agregar tus inputs debajo del contanedor de dropzone, ejem:

[@chacataplan]

hay alguna forma de omitir o anular el envio automatico al servidor puesnto que necesito validar mas los archivos y y esto lo mandare con datos en otro post

[@codigolibre29]

Las validaciones las pudes hacer en el archivo upload.php, si tus validaciones son correctar ya ejecutas "move_uploaded_file( $file['tmp_name'], 'uploads/' . $file['name'] )" para subir la imagen.

[@zerik2095]

Hola, gran vídeo, quiero subir fotos que van a ser para perfiles de empleados, como le puedo hacer para que verifique que el archivo tenga el mismo nombre del empleado y que se asocie la foto al empleado, tengo dividido el nombre en 3 datos, nombre, apellido 1 y 2, al final de la misma tabla tengo donde se guardara la foto.

[@codigolibre29]

Hola que tal, primero que todo disculpa por la demora en la respuesta. Para responder a tu pregunta, me imagino que en el formulario donde quieres guardar el empleado ahi tienes el elemento dropzone tambien, asi que cuando mandes la foto por el "FormData", mandas la imagen como se mensiona en el video "imgData.append('file', arrImages)" y tambien puede anexar el nombre el usuario del input html donde tienes el nombre , despues en la parte del backend en php al usar la funcion "move_uploaded_file" tendria que pasar por parametros "move_uploaded_file( $file['tmp_name'], 'uploads/'. $_POST['name_user'] . 'jpg' )".... Es importante que aqui agregues la extension. del archivo, espero pueda ser de ayuda.

[@JuanFcoHGon2014]

Genial, ahora lo que quiero hacer es que se puedan crear iconos diferentes según el tipo de fichero que he subido y en tu ejemplo al darle a guardar no se queda guardado

[@codigolibre29]

Mira no entiendo bien, donde quieres los iconos, pero en lo de que no se sube la imagen, revisa los permisos de la carpeta destino probablemente no tiene permisos de escritura.

[@EdgardoRuotolo]

@@codigolibre29 pucha amigo, responde mi mensaje. Ayúdame!!!

[@ithielragnaros]

es windows lo que usas o ubuntu por que si es windows como consigo tu interfaz?

[@codigolibre29]

Hola que tal, no es windows es una distribucion llamada kde neon y esta basada enn ubuntu.

[@Christopher-ll4zz]

Excelente video, pero tengo un problema cuando intento enviar los archivos al upload.php, me dice que hay un error con el json que estoy enviando, no he podido solucionarlo, si me ayudas te lo agradecería :D

[@codigolibre29]

Hola que tal gracias por tu comentario... mira pues el error pueden ser varias las razones, tendriamos que revisar tu codigo, pero aqui esta el link de la practica: github.com/frankenstein291294/implement-dropzone-js para que descargues el proyecto y revises bien y veas donde estas mal

[@Christopher-ll4zz]

@@codigolibre29 Me estuve guiando con tu proyecto, y me lanza el siguiente error "Uncaught (in promise) SyntaxError: Unexpected non-whitespace character after JSON at position 97"

[@Christopher-ll4zz]

@@codigolibre29 Ahora me aparece como enviado pero no me aparece el archivo en la carpeta xd

[@codigolibre29]

Si estas usando xampp, lo mas probable es que la carpeta donde estas guardando el archivo no tenga permisos de escritura, revisa eso y agregale permisos de escritura, con eso deberia quedar

[@Christopher-ll4zz]

@@codigolibre29 he pasado por varios errores, ahora el último es que me tira directamente al fail del upload.php, lo raro es que cuando hago echo al file con jsonencode si lo está recibiendo, inclusive puedo ver sus atributos

[@alfredomercado3285]

sabes a qué se deba que me sale un error [object Object] ?

[@codigolibre29]

Aparentemente estas mandando mal el elemento img. En la descripcion del video esta el enlace al projecto en github, para que lo descargues y revises en que estas mal