Dropping an image on page doesn't respect filename #2824

New Issue

OVERLORD · 2026-02-05T05:21:35+03:00

OVERLORD commented

2026-02-05 05:21:35 +03:00

Originally created by @labor4 on GitHub (Jun 1, 2022).

Describe the Bug

Drag-N-Drop filenames are only respected in the rich gallery.
If I drag the image directly onto the page, a filename "image-"+Date.now()+"."+ext is chosen instead.

Steps to Reproduce

Drag image to page directly
open image details to see filename

Expected Behaviour

same as rich gallery

I don't know how to compile this js code in laravel, so didn't test, but I guess it's in public/dist/app.js.
Suggestion:

/**
 * Upload an image file to the server
 * @param {File} file
 * @param {int} pageId
 */
async function uploadImageFile(file, pageId) {
    if (file === null || file.type.indexOf('image') !== 0) {
        throw new Error(`Not an image file`);
    }

    let ext = 'png';
    let chosen_filename = "image-";
    
    if (file.name) {
        let fileNameMatches = file.name.match(/\.(.+)$/);
        if (fileNameMatches.length > 1) ext = fileNameMatches[1];
        
        chosen_filename = file.name.replace(/\.[^/.]+$/, "");
    
    } else {
        
        chosen_filename = chosen_filename + Date.now();
    
    }
    
    const remoteFilename = chosen_filename + "." + ext;
    const formData = new FormData();
    formData.append('file', file, remoteFilename);
    formData.append('uploaded_to', pageId);

    const resp = await window.$http.post(window.baseUrl('/images/gallery'), formData);
    return resp.data;
}

Screenshots or Additional Context

No response

Browser Details

No response

Exact BookStack Version

BookStack v22.04.2

PHP Version

8.0

Hosting Environment

apache2+php-fpm

Originally created by @labor4 on GitHub (Jun 1, 2022). ### Describe the Bug Drag-N-Drop filenames are only respected in the rich gallery. If I drag the image directly onto the page, a filename `"image-"+Date.now()+"."+ext` is chosen instead. ### Steps to Reproduce - Drag image to page directly - open image details to see filename ### Expected Behaviour same as rich gallery I don't know how to compile this js code in laravel, so didn't test, but I guess it's in `public/dist/app.js`. Suggestion: ``` /** * Upload an image file to the server * @param {File} file * @param {int} pageId */ async function uploadImageFile(file, pageId) { if (file === null || file.type.indexOf('image') !== 0) { throw new Error(`Not an image file`); } let ext = 'png'; let chosen_filename = "image-"; if (file.name) { let fileNameMatches = file.name.match(/\.(.+)$/); if (fileNameMatches.length > 1) ext = fileNameMatches[1]; chosen_filename = file.name.replace(/\.[^/.]+$/, ""); } else { chosen_filename = chosen_filename + Date.now(); } const remoteFilename = chosen_filename + "." + ext; const formData = new FormData(); formData.append('file', file, remoteFilename); formData.append('uploaded_to', pageId); const resp = await window.$http.post(window.baseUrl('/images/gallery'), formData); return resp.data; } ``` ### Screenshots or Additional Context _No response_ ### Browser Details _No response_ ### Exact BookStack Version BookStack v22.04.2 ### PHP Version 8.0 ### Hosting Environment apache2+php-fpm

OVERLORD added the 🐛 Bug label 2026-02-05 05:21:35 +03:00

OVERLORD closed this issue

2026-02-05 05:21:37 +03:00

OVERLORD commented

2026-02-05 05:21:41 +03:00

@ssddanbrown commented on GitHub (Jun 7, 2022):

Thanks for this request @labor4.
I've now updated this to use the original file name where existing, in commit 3fe666f36a.
This will be part of the next feature release.

@ssddanbrown commented on GitHub (Jun 7, 2022): Thanks for this request @labor4. I've now updated this to use the original file name where existing, in commit 3fe666f36a7642c7910e6e0dc2f44916931a00b1. This will be part of the next feature release.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#2824