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.61k stars 288 forks source link

File upload does not work in SvelteKit #413

Open TheBous opened 2 months ago

TheBous commented 2 months ago

Summary

File upload component does not work in Sveltekit

Steps to Reproduce


<div
    id="hs-file-upload"
    data-hs-file-upload={`{
    "url": "/upload",
    "extensions": {
      "default": {
        "class": "shrink-0 size-5"
      },
      "xls": {
        "class": "shrink-0 size-5"
      },
      "zip": {
        "class": "shrink-0 size-5"
      },
    }
  }`}
>
    <template data-hs-file-upload-preview="">
        <div
            class="p-3 bg-white border border-solid border-gray-300 rounded-xl dark:bg-neutral-800 dark:border-neutral-600"
        >
            <div class="mb-2 flex justify-between items-center">
                <div class="flex items-center gap-x-3">
                    <span
                        class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-lg dark:border-neutral-700 dark:text-neutral-500"
                        data-hs-file-upload-file-icon=""
                    >
                        <img class="rounded-lg hidden" data-dz-thumbnail="" />
                    </span>
                    <div>
                        <p class="text-sm font-medium text-gray-800 dark:text-white">
                            <span
                                class="truncate inline-block max-w-[300px] align-bottom"
                                data-hs-file-upload-file-name=""
                            ></span>.<span data-hs-file-upload-file-ext=""></span>
                        </p>
                        <p
                            class="text-xs text-gray-500 dark:text-neutral-500"
                            data-hs-file-upload-file-size=""
                        ></p>
                    </div>
                </div>
                <div class="inline-flex items-center gap-x-2">
                    <button
                        type="button"
                        class="text-gray-500 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200"
                        data-hs-file-upload-remove=""
                    >
                        <svg
                            class="shrink-0 size-4"
                            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="M3 6h18"></path>
                            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
                            <line x1="10" x2="10" y1="11" y2="17"></line>
                            <line x1="14" x2="14" y1="11" y2="17"></line>
                        </svg>
                    </button>
                </div>
            </div>

            <div class="flex items-center gap-x-3 whitespace-nowrap">
                <div
                    class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-700"
                    role="progressbar"
                    aria-valuenow="0"
                    aria-valuemin="0"
                    aria-valuemax="100"
                    data-hs-file-upload-progress-bar=""
                >
                    <div
                        class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition-all duration-500 hs-file-upload-complete:bg-green-600 dark:bg-blue-500"
                        style="width: 0"
                        data-hs-file-upload-progress-bar-pane=""
                    ></div>
                </div>
                <div class="w-10 text-end">
                    <span class="text-sm text-gray-800 dark:text-white">
                        <span data-hs-file-upload-progress-bar-value="">0</span>%
                    </span>
                </div>
            </div>
        </div>
    </template>

    <div
        class="cursor-pointer p-12 flex justify-center bg-white border border-dashed border-gray-300 rounded-xl dark:bg-neutral-800 dark:border-neutral-600"
        data-hs-file-upload-trigger=""
    >
        <div class="text-center">
            <svg
                class="w-16 text-gray-400 mx-auto dark:text-neutral-400"
                width="70"
                height="46"
                viewBox="0 0 70 46"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M6.05172 9.36853L17.2131 7.5083V41.3608L12.3018 42.3947C9.01306 43.0871 5.79705 40.9434 5.17081 37.6414L1.14319 16.4049C0.515988 13.0978 2.73148 9.92191 6.05172 9.36853Z"
                    fill="currentColor"
                    stroke="currentColor"
                    stroke-width="2"
                    class="fill-white stroke-gray-400 dark:fill-neutral-800 dark:stroke-neutral-500"
                ></path>
                <path
                    d="M63.9483 9.36853L52.7869 7.5083V41.3608L57.6982 42.3947C60.9869 43.0871 64.203 40.9434 64.8292 37.6414L68.8568 16.4049C69.484 13.0978 67.2685 9.92191 63.9483 9.36853Z"
                    fill="currentColor"
                    stroke="currentColor"
                    stroke-width="2"
                    class="fill-white stroke-gray-400 dark:fill-neutral-800 dark:stroke-neutral-500"
                ></path>
                <rect
                    x="17.0656"
                    y="1.62305"
                    width="35.8689"
                    height="42.7541"
                    rx="5"
                    fill="currentColor"
                    stroke="currentColor"
                    stroke-width="2"
                    class="fill-white stroke-gray-400 dark:fill-neutral-800 dark:stroke-neutral-500"
                ></rect>
                <path
                    d="M47.9344 44.3772H22.0655C19.3041 44.3772 17.0656 42.1386 17.0656 39.3772L17.0656 35.9161L29.4724 22.7682L38.9825 33.7121C39.7832 34.6335 41.2154 34.629 42.0102 33.7025L47.2456 27.5996L52.9344 33.7209V39.3772C52.9344 42.1386 50.6958 44.3772 47.9344 44.3772Z"
                    stroke="currentColor"
                    stroke-width="2"
                    class="stroke-gray-400 dark:stroke-neutral-500"
                ></path>
                <circle
                    cx="39.5902"
                    cy="14.9672"
                    r="4.16393"
                    stroke="currentColor"
                    stroke-width="2"
                    class="stroke-gray-400 dark:stroke-neutral-500"
                ></circle>
            </svg>

            <div class="mt-4 flex flex-wrap justify-center text-sm leading-6 text-gray-600">
                <span class="pe-1 font-medium text-gray-800 dark:text-neutral-200">
                    Drop your file here or
                </span>
                <span
                    class="bg-white font-semibold text-blue-600 hover:text-blue-700 rounded-lg decoration-2 hover:underline focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-600 focus-within:ring-offset-2 dark:bg-neutral-800 dark:text-blue-500 dark:hover:text-blue-600"
                    >browse</span
                >
            </div>

            <p class="mt-1 text-xs text-gray-400 dark:text-neutral-400">Pick a photo up to 2MB.</p>
        </div>
    </div>

    <div class="mt-4 space-y-3 empty:mt-0" data-hs-file-upload-previews=""></div>
</div>

I just copied the snipper from preline.js official documentation but when I click on browser nothing happened! Why?

Demo Link

https://stackblitz.com/edit/preline-v2-svelte-wqlfe4

Expected Behavior

No response

Actual Behavior

No response

Screenshots

No response

TheBous commented 1 month ago

Y'all alive?

olegpix commented 1 month ago

@TheBous Hi, Please check out this demo, it contains a working demo of file upload.