Con questo piccolo post voglio lasciarvi un semplice esempio di script per trascinare e caricare un’immagine dentro un form html dove con l’aiuto di JavaScript riusciremo ad avere un metodo semplice e molto d’effetto per le nostre pagine web.

Prima di tutto andiamo a creare una pagina html vuota. E’ sempre comodo partire da una struttura base di html che ci permetta di iniziare a inserire i blocchi di codice per fare i test e poi utilizzarli nei nostri script. La pagina index.html:

<!DOCTYPE html>
<html lang="it">
    <head>
        <title>Simple upload image</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Inserisco il foglio di stile -->
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <form name="simpleUpload">
            <!-- i campi per poter caricare il file -->
            <div id="dropArea" class="drop-area">
                <p>Trascina qui la tua immagine o <span class="browse">clicca per caricare</span></p>
                <input type="file" class="form-control file-input" id="imageInput1" name="imageInput1" accept="image/jpeg">
            </div>
            <br>
            <!-- inseriesco il valore base64 dell'immagine caricata-->
            <input type="hidden" id="imageBase64_1" name="frontedocumento" value="">
            <!-- visualizzo l'anteprima dell'immagine caricata-->
            <div id="previewContainer" class="preview"></div>  
        </form>
        <!-- inserisco lo script -->
        <script src="script.js"></script>
    </body>
</html>

Come si vede ho creato tre file in totale, uno è la index.html qui sopra, poi un file css e uno js. Il foglio di stile è molto semplice:

.drop-area {
    border: 2px dashed #007bff;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background-color: #f8f9fa;
    border-radius: 5px;
}

.drop-area p {
    margin: 0;
    font-size: 16px;
    color: #007bff;
}

.drop-area .browse {
    font-weight: bold;
    text-decoration: underline;
}

.file-input {
    display: none; /* Nasconde il normale input file */
}

.preview img {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

Ci sono le due drop area dove andiamo a trascinare l’immagine e il div dell’enteprima.

Il JS è più complesso perché oltre a creare l’anteprima genera il base64 dell’immagine così quando andiamo a salvare il modulo basta creare l’immagine dal base64, se si salva sul file system, altrimenti possiamo salvare il base64 direttamente sul database. Come ho già detto questo è un semplice esempio di script per trascinare e caricare un’immagine non c’è nulla di complicato o che non avete mai visto.

document.addEventListener('DOMContentLoaded', function() {
    const dropArea = document.getElementById('dropArea');
    const fileInput = document.getElementById('imageInput1');
    const imageBase64_1 = document.getElementById('imageBase64_1');
    const previewContainer = document.getElementById('previewContainer');

    // Evento per il click che apre il file input
    dropArea.addEventListener('click', () => fileInput.click());

    // Evento per il caricamento del file
    fileInput.addEventListener('change', (event) => {
        handleImageUpload(event.target.files[0]);
    });

    // Eventi Drag & Drop
    dropArea.addEventListener('dragover', (event) => {
        event.preventDefault();
        dropArea.classList.add('dragover');
    });

    dropArea.addEventListener('dragleave', () => {
        dropArea.classList.remove('dragover');
    });

    dropArea.addEventListener('drop', (event) => {
        event.preventDefault();
        dropArea.classList.remove('dragover');
        if (event.dataTransfer.files.length > 0) {
            handleImageUpload(event.dataTransfer.files[0]);
        }
    });

    function handleImageUpload(file) {
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const dataUrl = event.target.result;
                imageBase64_1.value = dataUrl;
                displayPreview(dataUrl);
            };
            reader.readAsDataURL(file);
        } else {
            alert("Seleziona un file immagine valido!");
        }
    }

    function displayPreview(dataUrl) {
        previewContainer.innerHTML = ''; // Pulisce il contenuto precedente
        const img = document.createElement('img');
        img.src = dataUrl;
        previewContainer.appendChild(img);
    }
});

Questo codice JavaScript come potete vedere vi permette di gestire il caricamento di immagini tramite un’area interattiva che supporta sia il click che il drag & drop.

Funzioni principali:
– Apre il selettore di file quando si clicca sull’area dropArea.
– Carica un’immagine quando l’utente seleziona un file o lo trascina nell’area.
– Converte l’immagine in Base64 con FileReader e la inserisce in un campo nascosto (imageBase64_1).
– Mostra l’anteprima dell’immagine nel previewContainer.
– Gestisce il drag & drop per migliorare l’esperienza utente.
– Se il file non è un’immagine, viene mostrato un messaggio di errore.

Puoi scaricare l’esempio completo qui: https://github.com/oldpan73/uploadimage

Può interessarti anche: https://www.salisnet.eu/2020/01/creare-una-ricerca-con-auto-completamento-del-testo/

Letture: 4
By : Andrea