search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

`HSFileUpload.getInstance` cannot be instantiated to receive events from Dropzone #425

Closed luishiguera closed 2 months ago

luishiguera commented 3 months ago

Summary

I cannot instantiate HSFileUpload to receive events and responses from the upload endpoint to store the URLs

Steps to Reproduce

  1. Import preline, lodash, dropzone and tailwind
  2. Use the data-hs-file-upload attribute: Follow the instructions from https://preline.co/plugins/html/file-upload.html
  3. Initialize HSFileUpload <script> window.addEventListener('load', () => { const { element } = HSFileUpload.getInstance('#hs-file-upload', true); console.log(element); }); </script>

Demo Link

https://stackblitz.com/edit/vitejs-vite-gk4mac?file=index.html&terminal=dev

Expected Behavior

Use the HSFileUpload wrapper to access Dropzone methods

Actual Behavior

TypeError: Cannot read properties of null (reading 'getInstance')

Screenshots

image image

langscot commented 3 months ago

Take your Preline CDN script tag out of <head> and put it near the end of your tag. For example,

<body>
    <!-- main content -->
    <script src="https://cdn.jsdelivr.net/npm/preline@2.4.1/dist/preline.min.js"></script>
</body>

I did this in the StackBlitz and it started working.

luishiguera commented 2 months ago

it worked, thank you

billpebert commented 6 days ago

@langscot Hi, the suggested solution doesn't working on my code regarding this doc https://preline.co/docs/file-upload.html#error

i've also installed these following packages: npm i lodash dropzone @preline/file-upload

image

image

this is the config on resources\js\app.js image