#Karly
urban scroll
en la línea 15, verdad?
nimble ingot
Si
urban scroll
no... me devuelve la preview de la imagen
pero no me la almacena en multipleFiles[]
nimble ingot
Claro, tienes que llamar a actions dentro del componente PublishFiles
@urban scroll puedes mandar una captura más general de la 3° captura (sobre tus actions/store en el context)
urban scroll
quieres que te mande la funcion que actualiza todo publish?
esta función la estoy utilizando en la vista
lo rojo es la form que contiene el actions.publishProfile
y el amarillo es el componente que tiene que actualizar si se suben multipleFiles o no
funciona toda la vista, conectada con back, a excepción de esa parte T.T
nimble ingot
@urban scroll pero en que parte tienes para modificar multipleFiles en el estado de tu contexto, deberías de tener un action donde le pases un payload y este setea el valor de la propiedad multipleFiles
urban scroll
pues debería de ser la action independiente de publishProfile, porque si no, me actualiza todo, y no es lo que busco
nimble ingot
pues debería de ser la action independiente de publishProfile, porque si no, me ...
Es que no alcanzo a ver todos tus actions y el context, pero deberias de tener un action (independiente de publishProfile) que se encargue de recibir un parámetro (payload) y modificar el estado para multipleFiles
urban scroll
a ver.. tengo esto.. pero no funciona
me dice que multipleFiles no esta definido
es un poco frustrante.. no se explicarme, y esta parte de mi proyecto se me esta yendo un poco de las manos
sé lo que quiero hacer, pero no tengo los conocimientos necesarios para avanzar
nimble ingot
No te preocupes, que entre la comunidad se te ayudará en lo que necesites
Si te parece bien, puedes compartir el proyecto en algún repositorio, para poder verlo y decirte que deberías hacer
urban scroll
esta compartido
espera
te paso link
esa es mi rama, con todas las catualizaciones
el componente es publish-files y la vista es publish
en flux está todo el store/actions
y en api.. pues todo back..
te puedo hacer una consulta?
nimble ingot
https://github.com/KarlyMakowski/Ink_Zone/tree/firebase
Vale, le echare un vistazo al proyecto y te comento luego
nimble ingot
te puedo hacer una consulta?
Claro, dime
urban scroll
muchas gracias!
a ver, ademas de todo este engorro, estoy trabajando en un chat dentro de la página. Para ello, voy a utilizar firebase. Tengo que utilizar obligatoriamente la authentication email/password de firebase, o puedo utilizar mi back para ello
nimble ingot
a ver, ademas de todo este engorro, estoy trabajando en un chat dentro de la pág...
No, si vas a usar Firebase para el tema del chat y el almacenamiento de la DB, no es obligatorio usar la autenticación de Firebase, al ser 2 servicios independientes no se está obligado a usarse en conjunto, puedes usar una autenticación propia en tu back u otro servicio para ello (auth0, supabase, etc), pero si se quiere ahorrar tiempo en el desarrollo, lo mejor es usar el servicio de Firebase que hacerlo en el back
urban scroll
es que tenía que hacerlo. Es parte del proyecto.. igualmente me quedo mas tranquila pero socorro, ahora tengo que descubir como xD
madre mia
quien me mandará
nimble ingot
es que tenía que hacerlo. Es parte del proyecto.. igualmente me quedo mas tranqu...
Y tu backend es python, verdad?
Vale Karly, ya mire tu proyecto y lo que debes hacer es crear un action que se encargue de recibir el arreglo de los archivos y modificarlo en el estado para la propiedad multipleFiles, quedaría algo así:
setUploadFiles: (uploadedFiles) => setStore({ multipleFiles: uploadedFiles }),
Y dentro de tu función que hace onClick (handleClick) deberías de llamar al action: actions.setUploadFiles(uploadedFiles);
urban scroll
Si, python con Flask
urban scroll
Vale Karly, ya mire tu proyecto y lo que debes hacer es crear un action que se e...
Lo pruebo ahora mismo y te digo
🤞
me saca de la sesión
tendré que añadir e.preventDefault();?
si! lo tenía que añadir!
🎉 🎉
siiiiii!!!
funciona!!!!
joliiiiin mil graciaaaaas!!!!
nimble ingot
Si, python con Flask
No sabria ayudarte, no manejo Python, pero seguro alguien en el canal #🐍╏python te ayudará
nimble ingot
joliiiiin mil graciaaaaas!!!!
De nada 🙂
urban scroll
no te precoupes
me has ayudado un monton
mil mil gracias
ahora estoy intentando enseñarlo en el modal 😅
urban scroll
Hola Juan, perdona que te moleste. No sé si pregunto correctamente, pero al final estoy almacenando las imagenes en la db y estoy con el backend de python. Consigo subir una única imágen. Sabes que modificación tengo que hacer en el código para que sean varias? He visto un método que se llama request.files.getlist pero no sabría muy bien dónde implementarlo
nimble ingot
Hola @urban scroll
Lo más probable es que si le pasas un arreglo a la función de cloudinary los tomara como múltiples imágenes y se subiran, de no ser así, lo que puedes hacer es iterar todas las imágenes que le lleguen a la petición y realizar lo que ya tienes, pero dentro del bucle
urban scroll
vale, o sea que el código que tengo en front me sigue valiendo, pero tengo que modificarlo para hacer fetch con back y unificarlo?
nimble ingot
vale, o sea que el código que tengo en front me sigue valiendo, pero tengo que m...
Tu front tendría que enviar las múltiples imágenes a la petición de tu back, no sé si eso ya lo haga, de no estar, lo que tendrías que hacer es que el front envié un arreglo con todas las imágenes y que sea el back que las itere y las suba a cloudinary
urban scroll
al final he podido montar el back para que se suban todas las fotos a cloudinary te una vez! 🎉 Pero al montar el fetch, me dice que multipleFiles is not defined TypeError: The view function for 'api.multiple_upload' did not return a valid response. The function either returned None or ended without a return statement.
nimble ingot
@urban scroll Y ese mensaje donde te sale?
nimble ingot
Del backend o frontend?
urban scroll
esto, en el inspector
esta ultima foto en frront
y lo que te heescrito en la terminal de back
pero back esta funcionando
el problema es el fetch
hay algo que no estoy poniendo bien
y defionitivamente es multipleFiles
pero no se cómo lo tengo que cambiar
nimble ingot
El problema creo que lo tienes en la linea 505 de la imagen que enviaste, estas accediendo a multiplesFiles pero no es una variable declarada
Tienes que llamar esa variable del store
urban scroll
he probado a poner files
nimble ingot
const {multipleFiles} = getStore()
urban scroll
lo he probado
y me ssigue dando error
espera
mira
payload vacío y error 500
nimble ingot
Por que llamas a formData.getAll?
nimble ingot
Haz esto:
const {multipleFiles} = getStore();
console.log(multipleFiles)
Es con .set
urban scroll
Haz esto:
```js
const {multipleFiles} = getStore();
console.log(multipleFiles)
...
me devuelve un array vacío
estoy conectando mal con backend, verdad?
nimble ingot
payload vacío y error 500
Entra a payload de la petición
nimble ingot
Vale hay 2 errores, 1 en cada lado (front - back)
- Si te fijas en el flujo del back, si no pasa la condición del if, no va a retornar nada, tendrías que retornar una respuesta en esos casos
- La variable
multipleFilesdebería de tener los valores de las imágenes que quieres subir y no debería de estar vacío
urban scroll
pero multipleFiles no almacena la información?
nimble ingot
Si deberia, pero por alguna razón está vacia
urban scroll
no entiendo por que... he puesto el .set que me has recomendado y ya me aparece en el payload files
pero sigue sin aparecer nada
nimble ingot
@urban scroll tienes actualizado el repositorio para verlo?
nimble ingot
@urban scroll Es que tienes comentado el código que modifica el estado setUploadedFiles
urban scroll
pero me esta dando fallo el primer input
yo ahora estoy trabajando con multipleUpload
que va en el componente publish-files
en el primer input de la línea 13
multipleUpload esta en la línea 500
en flux
es la que llama a mi back end para con cloudinary
es que de hecho, debería de haber ya 4 archivos
porque los he subido
y estan en mi db
y ni siquiera estan
nimble ingot
Pero deberias primero añadirlo al estado y al momento de darle submit enviarlos a tu back
Lo que estas haciendo es que cada vez que se añadan imágenes se envían a tu back, pero se puede dar el caso que el usuario cargue cientos de imágenes pero nunca haga clic en Upload por lo cual se te llenará la DB
Haz lo siguiente, en onChange haz que las imagenes persistan en multipleFiles
Y al darle en clic sobre el input upload se envie la información, ahí si puedes usar multipleUpload
urban scroll
entonces, en el primer input tengo que llamar a setUploadFiles
pero de esa forma no se esta almacenando tampoco la info
o sea
me devuelve esto
bueno!
un paso!!!
me devuelve algo!!
joder
😭
estoy ya muy agobiada con esto, llevo desde el viernes pasado atrapada
y es que no doy con la tecla..
yuhu!
urban scroll
e.preventDefault();
const { files } = e.target
console.log(files)
setStore({ multipleFiles: files });
},```he hecho pequeña modificación
urban scroll
me devuelve esto
pero multipleUpload sigue sin funcionar y devolviendome esto
nimble ingot
Al darle click en upload que te imprime en la consola?
nimble ingot
Este error es debido a CORS entre comunicación de peticiones
Pon la url de local en las peticiones del back
urban scroll
si, pero sigue dandome el mismo error en put
nimble ingot
si, pero sigue dandome el mismo error en put
En postman como envias la información?
nimble ingot
En Postman en la parte derecha hay un apartado de code, abrelo y manda captura de lo que te sale
nimble ingot
Cambia la linea 513 por esto: formData.set("files", multipleFiles[0])
urban scroll
😱 se almacena! pero solo 1!
en plan
cuando hago el setUploadedFiles como que me enseña todas!
pero cuando le doy a upload, solo me guarda 1
mira, te enseño
setUploadFiles
multipleUpload
nimble ingot
Cambia la linea por esto: formData.set("files", Array.from(multipleFiles));
urban scroll
claro, me guarda la imagen en la posicion 0, no??
no.. ahora me da fallo
me da un error 500
y esto en payload
nimble ingot
Intenta esto:
formData.append("files", multipleFiles[0])
formData.append("files", multipleFiles[1])
si subo x ej 3 imagenes, si, me guarda la primera y la segunda, pero no la tercera
urban scroll
Cambia la linea por esto: `formData.set("files", Array.from(multipleFiles));`
con esto haciamos un array de multiplefiles, verdad?
nimble ingot
Intenta esto:
```js
formData.append("files", multipleFiles[0])
formData.append("...
Pero esto te sirivio?
Array.from(multipleFiles).forEach(file => formData.append("files", file));
esto no lo he probado
urban scroll
Cambia la linea por esto: `formData.set("files", Array.from(multipleFiles));`
he probado esto
y no me dejaba
urban scroll
Pero esto te sirivio?
esto lo tengo que poner despues de "files" cierto?
Array.from(multipleFiles).forEach(file => formData.append("files", file));
console.log("esto es formData", formData)```así?
nimble ingot
Sí, así