From d7f847279848ae3b90769e7cda8907a1602c98a9 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 9 Oct 2025 11:54:15 +0000
Subject: [PATCH 1/2] Add a waiting modal for image uploads and display image
 thumbnails in the media library

Implement a loading dialog for ongoing image uploads and display actual image previews within the media library component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/AfZNdRv
---
 .replit                                |  4 ----
 client/src/components/media-upload.tsx |  8 ++++++--
 client/src/pages/new-post.tsx          | 21 ++++++++++++++++++++-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/.replit b/.replit
index e1a1709..d2b4742 100644
--- a/.replit
+++ b/.replit
@@ -46,10 +46,6 @@ externalPort = 6000
 localPort = 43245
 externalPort = 3001
 
-[[ports]]
-localPort = 44509
-externalPort = 8000
-
 [[ports]]
 localPort = 46681
 externalPort = 5173
diff --git a/client/src/components/media-upload.tsx b/client/src/components/media-upload.tsx
index 4f825ea..ea14abb 100644
--- a/client/src/components/media-upload.tsx
+++ b/client/src/components/media-upload.tsx
@@ -131,11 +131,15 @@ export default function MediaUpload() {
                     className="flex items-center gap-4 p-4 rounded-xl bg-muted/30 border border-border/50 cursor-pointer hover:bg-muted hover:shadow-md transition-all"
                     data-testid={`media-item-${media.id}`}
                   >
-                    <div className="w-14 h-14 rounded-lg bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center flex-shrink-0">
+                    <div className="w-14 h-14 rounded-lg bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center flex-shrink-0 overflow-hidden">
                       {media.type === "video" ? (
                         <Video className="w-7 h-7 text-secondary" />
                       ) : (
-                        <ImageIcon className="w-7 h-7 text-primary" />
+                        <img 
+                          src={media.originalUrl} 
+                          alt={media.fileName}
+                          className="w-full h-full object-cover"
+                        />
                       )}
                     </div>
                     <div className="flex-1 min-w-0">
diff --git a/client/src/pages/new-post.tsx b/client/src/pages/new-post.tsx
index 9b3b4db..3bd1486 100644
--- a/client/src/pages/new-post.tsx
+++ b/client/src/pages/new-post.tsx
@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { useLocation } from "wouter";
-import { Send, Sparkles, Image as ImageIcon, Calendar, Upload, Camera, GripVertical } from "lucide-react";
+import { Send, Sparkles, Image as ImageIcon, Calendar, Upload, Camera, GripVertical, Loader2 } from "lucide-react";
 import { useDropzone } from "react-dropzone";
 import {
   DndContext,
@@ -29,6 +29,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import type { SocialPage, Media } from "@shared/schema";
@@ -691,6 +692,24 @@ export default function NewPost() {
         </div>
       </main>
       
+      <Dialog open={uploadMutation.isPending}>
+        <DialogContent className="sm:max-w-md [&>button]:hidden">
+          <div className="flex flex-col items-center justify-center py-8">
+            <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6">
+              <Loader2 className="w-10 h-10 text-primary animate-spin" />
+            </div>
+            <h3 className="text-xl font-semibold text-foreground mb-2">
+              Upload en cours...
+            </h3>
+            <p className="text-sm text-muted-foreground text-center">
+              Votre image est en cours de téléchargement et de traitement.
+              <br />
+              Veuillez patienter.
+            </p>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       <PreviewModal
         open={previewModalOpen}
         onOpenChange={setPreviewModalOpen}

From 5aed651aff307e6ae5253f84b359fea3588eaffa Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 9 Oct 2025 11:54:29 +0000
Subject: [PATCH 2/2] Add a loading modal to the new post upload and image
 previews in the media library

Add loading modal to new post upload functionality and implement image previews in the media library for better file identification.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/AfZNdRv