Cette implémentation utilise ASP.NET avec le contrôle FileUpload pour gérer le téléchargement de fichiers, et intègre Bootstrap pour la prévisualisation d'images. La base de données sous-jacente est PostgreSQL, et le framework MooTools est utilisé pour des fonctinonalités supplémentaires. Le code comprend des modifications structurelles pour réduire la similarité avec l'original.
Code de la page frontale (HTML)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload_handler.aspx.cs" Inherits="upload_handler" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title>Gestion des téléchargements</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.2.0/css/fileinput.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.2.0/js/fileinput.min.js"></script>
<style>
.container-main {
max-width: 800px;
margin: 50px auto;
padding: 20px;
}
.upload-section {
margin-bottom: 30px;
border: 1px solid #ddd;
padding: 15px;
}
.file-list-table {
width: 100%;
margin-top: 20px;
}
.download-link {
cursor: pointer;
color: #337ab7;
}
</style>
</head>
<body>
<form id="mainForm" runat="server">
<div class="container-main">
<div class="upload-section">
<h3>Télécharger une image</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#imageModal">
Ouvrir la modale d'upload
</button>
</div>
<div class="upload-section">
<h3>Télécharger un fichier</h3>
<asp:FileUpload ID="fileUploader" runat="server" CssClass="btn btn-default" />
<asp:Button ID="btnUploadFile" runat="server" Text="Envoyer" OnClick="btnUploadFile_Click" CssClass="btn btn-success" />
<asp:Button ID="btnDownloadFile" runat="server" Text="Télécharger" OnClick="btnDownloadFile_Click" CssClass="btn btn-info" />
<asp:GridView ID="fileGrid" runat="server" AutoGenerateColumns="False" CssClass="table table-striped file-list-table">
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" />
<asp:BoundField DataField="nom" HeaderText="Nom du fichier" />
<asp:BoundField DataField="taille" HeaderText="Taille" />
<asp:BoundField DataField="extension" HeaderText="Type" />
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" runat="server" OnCommand="lnkDownload_Command" CommandArgument='<%# Eval("chemin") %>' CssClass="download-link">Télécharger</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="lblStatus" runat="server" />
</div>
</div>
<!-- Modale Bootstrap pour l'upload d'image -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Upload d'image</h4>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
<input id="imageInput" type="file" class="file" multiple data-show-preview="true" data-allowed-file-extensions='["jpg", "png"]' />
<div class="form-group">
<label for="imageName">Nom</label>
<input type="text" class="form-control" id="imageName" placeholder="Entrez un nom" />
</div>
<div class="form-group">
<label for="imageDesc">Description</label>
<textarea class="form-control" id="imageDesc" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary" onclick="submitImage();">Soumettre</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Code côté serveur (C#)
using System;
using System.Data;
using System.IO;
using Npgsql;
using System.Web;
using System.Web.UI;
public partial class upload_handler : System.Web.UI.Page
{
private const string ConnString = "Server=localhost; Port=5432;Database=city;User ID=postgres;Password=postgres";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadFileList();
}
}
protected void btnUploadFile_Click(object sender, EventArgs e)
{
if (fileUploader.HasFile)
{
string originalPath = fileUploader.PostedFile.FileName;
string fileName = Path.GetFileName(originalPath);
string extension = Path.GetExtension(fileName).ToLower();
int fileSize = fileUploader.PostedFile.ContentLength;
// Générer un nom unique pour éviter les conflits
string uniqueName = DateTime.Now.ToString("yyyyMMddHHmmss") + new Random().Next(1000, 9999) + extension;
string uploadDir = Path.Combine(Server.MapPath("uploads"), DateTime.Now.ToString("yyyy-MM-dd"));
if (!Directory.Exists(uploadDir))
{
Directory.CreateDirectory(uploadDir);
}
string savePath = Path.Combine(uploadDir, uniqueName);
fileUploader.PostedFile.SaveAs(savePath);
// Chemin relatif pour stockage en base
string relativePath = "uploads/" + DateTime.Now.ToString("yyyy-MM-dd") + "/" + uniqueName;
InsertFileRecord(uniqueName, fileSize, extension, relativePath);
LoadFileList();
lblStatus.Text = "Fichier téléchargé avec succès.";
}
else
{
lblStatus.Text = "Veuillez sélectionner un fichier.";
}
}
private void InsertFileRecord(string name, int size, string type, string path)
{
using (NpgsqlConnection conn = new NpgsqlConnection(ConnString))
{
conn.Open();
string query = "INSERT INTO files (filename, filesize, filetype, filepath) VALUES (@name, @size, @type, @path)";
using (NpgsqlCommand cmd = new NpgsqlCommand(query, conn))
{
cmd.Parameters.AddWithValue("@name", name);
cmd.Parameters.AddWithValue("@size", size);
cmd.Parameters.AddWithValue("@type", type);
cmd.Parameters.AddWithValue("@path", path);
cmd.ExecuteNonQuery();
}
}
}
private void LoadFileList()
{
using (NpgsqlConnection conn = new NpgsqlConnection(ConnString))
{
conn.Open();
string query = "SELECT fileid AS id, filename AS nom, filesize AS taille, filetype AS extension, filepath AS chemin FROM files";
using (NpgsqlDataAdapter adapter = new NpgsqlDataAdapter(query, conn))
{
DataTable dt = new DataTable();
adapter.Fill(dt);
fileGrid.DataSource = dt;
fileGrid.DataBind();
}
}
}
protected void lnkDownload_Command(object sender, System.Web.UI.WebControls.CommandEventArgs e)
{
string filePath = e.CommandArgument.ToString();
if (!string.IsNullOrEmpty(filePath))
{
string fullPath = Server.MapPath(filePath);
if (File.Exists(fullPath))
{
Response.ContentType = "application/octet-stream";
Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(Path.GetFileName(fullPath)));
Response.TransmitFile(fullPath);
Response.End();
}
else
{
lblStatus.Text = "Fichier non trouvé.";
}
}
}
protected void btnDownloadFile_Click(object sender, EventArgs e)
{
lblStatus.Text = "Fonctionnalité de téléchargement en cours de développement.";
}
}