Rendering the File List Client Side

Instead of references my list is images. How would I be able to output this:

`<a href="{{ uploaded_asset(image.imagePath) }}">

<img src="{{ image.imagePath|imagine_filter('squared_thumbnail_medium') }}" />

</a>`
in the:
render() {

const itemsHtml = this.images.map(image => {
    return```

Hi!

I used this tutorial to create a small upload system.
Right now, in the render method in the JS file, we have:

render() {
        const itemsHtml = this.references.map(reference => {
            console.log(reference);
            return `
                <li class="list-group-item d-flex justify-content-between align-items-center"
                    data-id="${reference.id}"
                >
                    <span class="drag-handle fa fa-reorder"></span>
                    <input type="text"
                           value="${reference.originalFilename}"
                           class="form-control js-edit-filename" style="width: auto;">
                    <span>
                        <a href="/admin/post/references/${reference.id}/download" class="btn btn-link btn-sm">
                            <span class="fa fa-download" style="vertical-align: middle"></span>
                        </a>
                        <button class="js-reference-delete btn btn-link btn-sm">
                            <span class="fa fa-trash"></span>
                        </button>
                    </span>
                </li>`
        });

        this.$element.html(itemsHtml.join(''));
    }

The result is a list of uploads, with:

• a handle to reorganize the uploads
• an input, to modify the file name
• an upload icon
• a delete icon

My upload system only concerns images. So I'd like to be able to display a thumbnail of the uploaded image.
But I'm having trouble.

In twig files, I can do this to display the image:

<img src="{{ reference.filePath|imagine_filter('thumb') }}" >

Which will call :

public function getFilePath(): string
{
    return UploadHelper::POST_REFERENCE.'/'.$this->getFilename();
}

But in JS? I did try the full path, /public/uploads/post_reference/reference_filename but it did not work.

Any idea or help ?

Thanks for the hard work !

thank you @tisserand for this beautiful javascript code, I know you inspired it from React, but it's still beautiful.

Hi, is posbile with dropzone o fileType of symfony . read the content the file then save each one in a entity Post ?, the client need insert 600 post at day from the file, how can make this? plus this filetype live othes field like texttype and datetime, like form with children

return
        <li class="list-group-item d-flex justify-content-between align-items-center">
            ${reference.originalFilename}
        
            <span>
                &lt;a href="/admin/article/references/${reference.id}/download"><span class="fa fa-download"></span></a>
            &lt;/span>
        &lt;/li>

You're introducing an XSS vulnerability here. Unless Symfony does anything special to the original file name, it'll be whatever the user chooses, even if that includes special characters like &lt; or " that are needed to introduce onwhatever="" attributes or script tags to the page.

After adding the class ReferenceList and putting the var Referencelist inside the document.ready function, I got this error in the console:

ReferenceError: ReferenceList is not defined admin_article_form.js:3:9

After putting it outside the document.ready, after the class, it worked, am I the only one? A wrong scope?

EDIT: no luck, later on same thing happens when trying to pass back the updated references.
EDIT: My fault, I had put the function initializeDropzone within the document.ready

EDIT: After putting everything in the right place, there is no feedback in the client side list when a new file was uploaded, in the console: "TypeError: referenceList.addReference is not a function"
What could be wrong?