Improvement: Add Upload Button to Image Gallery (#4500) * Improvement: Add Upload Button to Image Gallery - Added an Upload Image button to the Image Gallery for a more intuitive experience and easier use on mobile devices (so I can upload some awesome GIFs right from my phone) - Adjusted the `<select class="gallery-sort-select">` menu styling for better consistency with other sections, making it more compact and reducing wasted space * Fix type error --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

40a46bee9d3aec4c909ff2e8efa114ed693983af

Rivelle <rivelle.days@gmail.com>

Signed

Parents: 9a5235efcd41db249ec083ebdba735c89f940f23

public/scripts/extensions/gallery/index.js+45 -5 Viewed

 });
 const SORT = Object.freeze({
     NAME_ASC: { value: 'nameAsc', field: 'name', order: 'asc', label: t`Sort By: Name (A-Z)` },
     NAME_DESC: { value: 'nameDesc', field: 'name', order: 'desc', label: t`Sort By: Name (Z-A)` },
     DATE_ASCDATE_DESC: { value: 'dateAscdateDesc', field: 'date', order: 'ascdesc', label: t`Sort By: Date (Oldest First)Newest` },
     DATE_DESCDATE_ASC: { value: 'dateDescdateAsc', field: 'date', order: 'descasc', label: t`Sort By: Date (Newest First)Oldest` },
 });
 const defaultSettings = Object.freeze({

     const titleText = document.createElement('span');
     titleText.textContent = t`Image Gallery`;
     dragTitle.append(titleText);
++
 +    // Create a container for the controls
 +    const controlsContainer = document.createElement('div');
 +    controlsContainer.classList.add('flex-container', 'alignItemsCenter');
++
     const sortSelect = document.createElement('select');
     sortSelect.classList.add('gallery-sort-select');

     });
     sortSelect.value = getSortOrder();
     dragTitlecontrolsContainer.appendappendChild(sortSelect);
++
 +    // Create the "Add Image" button
 +    const addImageButton = document.createElement('div');
 +    addImageButton.classList.add('menu_button', 'menu_button_icon', 'interactable');
 +    addImageButton.title = 'Add Image';
 +    addImageButton.innerHTML = '<i class="fa-solid fa-plus fa-fw"></i><div>Add Image</div>';
++
 +    // Create a hidden file input
 +    const fileInput = document.createElement('input');
 +    fileInput.type = 'file';
 +    fileInput.accept = 'image/*';
 +    fileInput.multiple = true;
 +    fileInput.style.display = 'none';
++
 +    // Trigger file input when the button is clicked
 +    addImageButton.addEventListener('click', () => {
 +        fileInput.click();
 +    });
++
 +    // Handle file selection
 +    fileInput.addEventListener('change', async () => {
 +        const files = fileInput.files;
 +        if (files.length > 0) {
 +            for (const file of files) {
 +                await uploadFile(file, url);
 +            }
 +            // Refresh the gallery
 +            closeButton.trigger('click');
 +            await showCharGallery();
 +        }
 +    });
++
 +    controlsContainer.appendChild(addImageButton);
 +    dragTitle.append(controlsContainer);
 +    newElement.append(fileInput); // Append hidden file input to the main element
     // add no-scrollbar class to this element
     newElement.addClass('no-scrollbar');

public/scripts/extensions/gallery/style.css+3 -2 Viewed

     display: flex;
     align-items: center;
     justify-content: center;
 +    gap: 4px;
+}
 .gallery-folder-input {

     text-overflow: ellipsis;
     width: 100%;
     opacity: 0.8;
     background-color: nonevar(--black30a);
 +    border: 1px solid var(--SmartThemeBorderColor);
     background-image: url(/img/down-arrow.svg);
     background-repeat: no-repeat;
     background-position: right 6px center;
     background-size: 8px 5px;
     padding-right: 20px;
 -    font-size: calc(var(--mainFontSize)* 0.9);
     margin-bottom: 0;
+}