Adding Caption Field Below Image Preview in FileUploadWithPreview

[rafig256]

Hi,

First, thank you for this great library—it’s been really helpful! I’m trying to add a text input field under each image preview that acts as a caption (or alt text) for the uploaded images. Ideally, the caption field would appear automatically below each image preview as soon as a new file is selected and displayed.

I’ve tried various approaches, including adding an event listener to detect when an image is added, but I haven’t been successful in reliably appending the caption field directly under each preview image. Could you provide some guidance on the best way to achieve this, or if possible, share an example code snippet?

Here are the main points of what I'm looking for:

A text input (for caption/alt text) should appear under each image preview.
The caption field should be linked to the specific image in the preview so that multiple uploads have their own captions.
Thank you in advance for any help you can provide!

[johndatserakis]

Hi there - thank you for your message.

Sorry for the delay - I'm just super swamped right now.

I see what you're saying in your message, and I was able to throw together a kinda hacky (but working 😄) solution that should give you what you need to play around with. Here's the CodeSandbox link. Video attached. I take the name of each item and line it up with the class nodes that hold the appropriate image.

The hacky party is the setTimeout - the issue is that we don't know when all the items are drawn to the DOM, and it's a slightly long process with heavy images, so you'll just have to guesstimate the time you'll need.

In the future, I should add a "All images are done drawing to the DOM" type of event. One day I can get to that, but not right now. That would be what helps for this particular scenario.

Hopefully this helps a bit! Sorry it's not perfect.

image-label-work.mp4

[rafig256]

Thank you for your time and effort. I will definitely use your solution soon.

[Izopi4a]

because the codepen is not available for me, here is my implementation for copy pasta.

window.addEventListener(Events.IMAGE_ADDED, (e: Event) => {
    const {detail} = e as unknown as ImageAddedEvent;
    const uploads = detail.cachedFileArray.slice().reverse()

    for (let i = 0;i < detail.addedFilesCount; i++)
    {
        const item:File = uploads[i];

        setTimeout(() => {
            const previewItem = document.querySelector('[data-upload-name="'+item.name+'"]') as HTMLDivElement;
            previewItem.addEventListener('dblclick', (e) => {
                console.log('dblclick');
            })
        }, 1000); //this timeout should be checked on slow mobile device

        uploadFileInChunks(item);
    }

    // console.log('detail', detail);
});

[johndatserakis]

Sorry about that, I've updated the CodeSandbox link and it should work properly now.