Dropzone file upload component not working

[telumletiferum]

So I have tried to use the drag and drop example provided in the File Upload component page. It just straight up doesn't want to work. Looking in the console I get this:

Uncaught SyntaxError: JSON.parse: expected ',' or '}' after property value in object at line 5 column 30 of the JSON data
    l flyonui.js:57
    autoInit flyonui.js:57
    autoInit flyonui.js:57
    192 flyonui.js:57
    192 flyonui.js:57
    i flyonui.js:199
    393 flyonui.js:105
    i flyonui.js:199
    319 flyonui.js:105
    i flyonui.js:199
    800 flyonui.js:160
    i flyonui.js:199
    <anonymous> flyonui.js:199
    <anonymous> flyonui.js:199
    <anonymous> flyonui.js:1
    <anonymous> flyonui.js:1
flyonui.js:57:413

I have all the scripts in my Layout.astro file:

<script src="../../node_modules/flatpickr/dist/flatpickr.js"></script>
<script src="../../node_modules/flyonui/flyonui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js" ></script>

[yagnikvamja]

Hello @telumletiferum ,

Hi! 👋 The error you're seeing:

Uncaught SyntaxError: JSON.parse: expected ',' or '}'

…usually means there's an issue with how the JSON is written in your data-file-upload attribute.

In Astro, when passing JSON with double quotes (like inside an SVG string), you must escape those quotes using \\" and wrap with data-file-upload={` .... `} — because the string is being interpreted as JavaScript inside a JSX-like expression. If you don't escape them, the browser can't parse it correctly.

✅ Here's how to fix it:

  <div
      data-file-upload={`{
        "url": "/upload",
        "extensions": {
          "csv": {
            "icon": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><path d=\\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\\"/><path d=\\"M14 2v4a2 2 0 0 0 2 2h4\\"/><path d=\\"m5 12-3 3 3 3\\"/><path d=\\"m9 18 3-3-3-3\\"/></svg>",
            "class": "shrink-0 size-5"
          }
        }
      }`} >

      <div class="bg-base-200/60 rounded-box flex flex-col justify-center border-2 border-base-content/20 border-dashed"  >
        <div class="text-center cursor-pointer p-12" data-file-upload-trigger="">
          <p class="text-base-content/50 mb-3 text-sm">Choose a file with a size up to 2MB.</p>
          <button class="btn btn-soft btn-sm btn-primary text-nowrap"> <span class="icon-[tabler--file-upload] size-4.5 shrink-0"></span> Drag & Drop to Upload </button>
          <p class="text-base-content/50 my-2 text-xs">or</p>
          <p class="link link-animated link-primary font-medium text-sm">Browse</p>
        </div>
        <div class="mx-12 mb-8 space-y-2 empty:m-0" data-file-upload-previews=""></div>
      </div>
    </div>

This ensures the JSON remains valid and JSON.parse() won't throw an error.

[telumletiferum]

Thanks for the help. It worked!