JavaScript Image File Management

Efficiently manage image files in JavaScript by generating lists with links and download buttons. Explore examples to dump all files by file extension to a list with links, styled download buttons, and JavaScript-only solutions.

Dump all files by file extension to a List with Links

let links = [];
const fileExtensions = ['png', 'jpg', 'gif', 'mkv', 'tar', 'zip', 'rar', 'mp4', 'jpeg'];

document.querySelectorAll('img').forEach(img => {
    let src = img.src;
    let extension = src.split('.').pop().toLowerCase();
    if (fileExtensions.includes(extension)) {
        links.push(src);
    }
});

// Open a new tab with a blank page
let newTab = window.open('about:blank', '_blank');
let newTabDocument = newTab.document;

// Create a list of href links
let ul = newTabDocument.createElement('ul');
links.forEach(link => {
    let li = newTabDocument.createElement('li');
    let a = newTabDocument.createElement('a');
    a.href = link;
    a.textContent = link.split('/').pop(); // Set the text content to the file name
    a.style.display = 'block'; // Display each link on a new line
    li.appendChild(a);
    ul.appendChild(li);
});
newTabDocument.body.appendChild(ul);

Dump all files by file extension to a List with Links and Download Buttons

let links = [];
const fileExtensions = ['png', 'jpg', 'gif', 'mkv', 'tar', 'zip', 'rar', 'mp4', 'jpeg'];

document.querySelectorAll('img').forEach(img => {
    let src = img.src;
    let extension = src.split('.').pop().toLowerCase();
    if (fileExtensions.includes(extension)) {
        links.push(src);
    }
});

// Open a new tab with a blank page
let newTab = window.open('about:blank', '_blank');
let newTabDocument = newTab.document;

// Create a list of href links with download buttons
let ul = newTabDocument.createElement('ul');
links.forEach(link => {
    let li = newTabDocument.createElement('li');
    let a = newTabDocument.createElement('a');
    a.href = link;
    a.textContent = link.split('/').pop(); // Set the text content to the file name
    a.style.display = 'block'; // Display each link on a new line

    // Create a download button
    let downloadButton = newTabDocument.createElement('button');
    downloadButton.textContent = 'Download';
    downloadButton.onclick = function() {
        window.open(link, '_blank').focus(); // Open the image in a new tab for download
    };
    li.appendChild(a);
    li.appendChild(downloadButton);
    ul.appendChild(li);
});
newTabDocument.body.appendChild(ul);

Dump all files by file extension to a List with Links and Download Buttons (Styled)

// CSS for styling
const styles = `
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f8f8f8;
    }
    ul {
        list-style: none;
        padding: 0;
    }
    li {
        margin-bottom: 10px;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
    }
    a {
        flex: 1;
        text-decoration: none;
        color: #333;
    }
    button {
        border: none;
        background-color: #4CAF50;
        color: white;
        padding: 8px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    button:hover {
        background-color: #45a049;
    }
`;

let newTab = window.open('about:blank', '_blank');
let newTabDocument = newTab.document;

let styleElement = newTabDocument.createElement('style');
styleElement.innerHTML = styles;
newTabDocument.head.appendChild(styleElement);

let ul = newTabDocument.createElement('ul');
links.forEach(link => {
    let li = newTabDocument.createElement('li');
    let a = newTabDocument.createElement('a');
    a.href = link;
    a.textContent = link.split('/').pop(); // Set the text content to the file name

    let downloadButton = newTabDocument.createElement('button');
    downloadButton.textContent = 'Download';
    downloadButton.onclick = function() {
        window.open(link, '_blank').focus(); // Open the image in a new tab for download
    };

    // Append elements to the list item
    li.appendChild(a);
    li.appendChild(downloadButton);
    ul.appendChild(li);
});

newTabDocument.body.appendChild(ul);

Dump all files by file extension to a List with Links and Download Buttons (JavaScript Only)

// Create a list of href links with download buttons
let ul = document.createElement('ul');
links.forEach(link => {
    let li = document.createElement('li');
    let a = document.createElement('a');
    a.href = link;
    a.textContent = link.split('/').pop(); // Set the text content to the file name

    // Create a download button
    let downloadButton = document.createElement('button');
    downloadButton.textContent = 'Download';
    downloadButton.onclick = function() {
        downloadFile(link); // Call the downloadFile function with the image link
    };

    // Append elements to the list item
    li.appendChild(a);
    li.appendChild(downloadButton);
    ul.appendChild(li);
});

// Append the list to the document body
document.body.appendChild(ul);

// Function to download the file
function downloadFile(url) {
    let fileName = url.split('/').pop(); // Extract the file name from the URL
    let a = document.createElement('a');
    a.href = url;
    a.download = fileName; // Set the file name for downloading
    document.body.appendChild(a);
    a.click(); // Simulate a click on the anchor element to trigger the download
    document.body.removeChild(a);
}