Estoy creando este componente que le permite al usuario enviar una imagen única o múltiple usando socket io. Pero tengo este problema sobre cómo puedo iterar en FileList que se puede usar como un blob y luego pasar a FileReader para leer como URL de datos.

Función para subir imágenes

 const handleOnUploadChat = (e) => { let fileArr = Array.from(e.target.files); setUploadImgChat(fileArr); };

Función para enviar mensaje

 const handleSendMessage = (e) => { e.preventDefault(); if (newMessage) { const messageData = { conversationId: currentConversationInfo._id, senderId: currentAccountInfo._id, messageText: newMessage.messageText, }; // dispatch(registerMessage(messageData)); socket?.emit('sendMessage', { senderId: currentAccountInfo, receiverId: currentConversationInfo.members.find( (id) => id !== currentAccountInfo._id ), message: newMessage.messageText, imagesFilename: uploadImgChat.map((file) => file.name), imagesFileType: uploadImgChat.map((file) => file.type), images: uploadImgChat.map((file) => file), }); setCurrentMessage((currentMessage) => [ ...currentMessage, { senderId: currentAccountInfo, messageText: newMessage.messageText }, ]); } };

Función obtener mensaje

 socket.on('getMessage', (data) => { const blob = new Blob([data.images], { type: data.imagesFileType }); const reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = function () { setReceiveImg(reader.result); }; setArrivalMessage({ senderId: data.accountId, messageText: data.message, messageImg: receiveImg, createdAt: Date.now(), }); });