Mejora del Widget de Feedback: Soporte para Subida de Múltiples Imágenes
Introducción
En el proyecto devlog-ist/landing, un proyecto enfocado en crear una landing page atractiva y funcional, hemos mejorado el widget de feedback para permitir a los usuarios adjuntar múltiples imágenes. Esta funcionalidad es crucial para obtener retroalimentación más precisa y visual por parte de los usuarios.
El Desafío
Anteriormente, los usuarios no podían adjuntar imágenes al enviar feedback. Esto limitaba la capacidad de comunicar problemas visuales o sugerencias de diseño de manera efectiva. El principal desafío era permitir la subida de múltiples imágenes sin comprometer el rendimiento y la seguridad de la aplicación.
La Solución
Implementamos la funcionalidad que permite a los usuarios adjuntar hasta 5 capturas de pantalla (con un tamaño máximo de 2 MB cada una) al enviar feedback. Las imágenes se almacenan en el disco público y se muestran en la vista FeedbackResource del administrador. Este es un ejemplo ilustrativo de cómo se podría manejar la subida de archivos en el backend:
class FeedbackController
{
public function store(Request $request)
{
$request->validate([
'comment' => 'required|string',
'images' => 'array|max:5',
'images.*' => 'image|mimes:jpeg,png,jpg|max:2048',
]);
$feedback = Feedback::create(['comment' => $request->input('comment')]);
if ($request->hasFile('images')) {
foreach ($request->file('images') as $image) {
$path = $image->store('feedback_images', 'public');
$feedback->images()->create(['path' => $path]);
}
}
return response()->json(['message' => 'Feedback submitted successfully'], 201);
}
}
Decisiones Clave
- Límite de 5 imágenes: Se estableció un límite para evitar el abuso y optimizar el espacio de almacenamiento.
- Tamaño máximo de 2 MB por imagen: Para asegurar una carga rápida y evitar problemas de rendimiento.
- Almacenamiento en disco público: Facilita el acceso y la gestión de las imágenes.
Resultados
- Mejora en la calidad del feedback recibido.
- Mayor claridad en la comunicación de problemas visuales.
- Facilitación del proceso de identificación y resolución de problemas por parte del equipo de desarrollo.
Lecciones Aprendidas
La implementación de esta funcionalidad nos enseñó la importancia de proporcionar a los usuarios las herramientas necesarias para comunicar sus ideas de manera efectiva. La capacidad de adjuntar imágenes ha mejorado significativamente la calidad del feedback y ha optimizado el proceso de desarrollo.
