Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Progressbar not showing when using previewTemplate #612

Open
cnd-TLC opened this issue Nov 5, 2021 · 2 comments
Open

Progressbar not showing when using previewTemplate #612

cnd-TLC opened this issue Nov 5, 2021 · 2 comments

Comments

@cnd-TLC
Copy link

cnd-TLC commented Nov 5, 2021

I've tried to research more but still didn't come up with a solution. I'm using vue. As of the moment, I have this in my template. Everything works fine. The thumbnail, name, size, and even the custom remove button is displayed. Only the progressbar is missing.

template() {
                return `
                    <ul class="dz-preview dz-file-preview white pa-0 my-1 rounded divide-y shadow">
                        <div class="ma-0 px-2 py-3 divide-y">
                            <li class="dz-details flex items-center justify-between align-center">
                                <img data-dz-thumbnail />
                                <div class="dz-filename text-sm text-gray-700 col-5" style="word-wrap: break-word !important" data-dz-name></div>
                                <div class="dz-size text-sm text-gray-700" data-dz-size></div>
                                <p class="pa-0 ma-0 text-center font-medium text-sm text-red-400 hover:text-red-600 text-center cursor-pointer" data-dz-remove>Remove</p>
                            </li>
                            <!-- Upload Progress -->
                            <div class="dz-progress mt-1">
                                <span class="dz-upload" id="progress" data-dz-uploadprogress></span>
                            </div>
                            <div class="dz-error-message text-sm text-center red--text">
                                <span data-dz-errormessage></span>
                            </div>
                        </div>
                    </ul>
                `
            },

And these are my configurations

dropzoneOptions: {
                    url: 'api/managevehicle/store_image',
                    autoProcessQueue:false,
                    uploadMultiple: true,
                    thumbnailWidth: 50,
                    thumbnailHeight: null,
                    maxFilesize: 5,
                    acceptedFiles: ".jpeg,.jpg,.png,.gif,.pdf",
                    headers: {},
                    previewTemplate: this.template(),
                },
@Mecanik
Copy link

Mecanik commented Oct 22, 2023

I had the same issue, it's because the CSS is not loading.

@Mecanik
Copy link

Mecanik commented Oct 22, 2023

Just append dropzone to template container.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants