jQuery Drag Drop Upload File

Enable drag-and-drop for file uploads.

$('#dropzone').on('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass('dragging');
}).on('dragleave', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).removeClass('dragging');
}).on('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).removeClass('dragging');
    
    var files = e.originalEvent.dataTransfer.files;
    uploadFiles(files);
});

function uploadFiles(files) {
    var formData = new FormData();
    $.each(files, function(i, file) {
        formData.append('file[]', file);
    });

    $.ajax({
        url: '/upload-files',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log('Files uploaded successfully!');
        }
    });
}

BBMCode

jQuery Auto Save Form Data in LocalStorage

Automatically save form data in local storage so that it persists on page refresh.

$('input, textarea').on('keyup', function() {
    var id = $(this).attr('id');
    var value = $(this).val();
    localStorage.setItem(id, value);
});

// Retrieve saved data
$('input, textarea').each(function() {
    var id = $(this).attr('id');
    if (localStorage.getItem(id)) {
        $(this).val(localStorage.getItem(id));
    }
});