[ { "path": ".gitignore", "content": "node_modules\r\ndist\r\nstorybook-static\r\npackage-lock.json\r\n.DS_Store\r\n.svelte-kit\r\n" }, { "path": ".prettierrc", "content": "{\n\t\"useTabs\": false,\n\t\"singleQuote\": false,\n\t\"trailingComma\": \"none\",\n\t\"printWidth\": 100,\n\t\"plugins\": [\"prettier-plugin-svelte\"],\n\t\"overrides\": [{ \"files\": \"*.svelte\", \"options\": { \"parser\": \"svelte\" } }],\n\t\"arrowParens\": \"avoid\"\n}\n\n" }, { "path": ".storybook/main.js", "content": "export default {\n stories: [\"../stories/**/*.stories.js\"],\n addons: [\"@storybook/addon-links\", \"@storybook/addon-essentials\", \"@storybook/addon-interactions\"],\n framework: {\n name: \"@storybook/sveltekit\",\n options: {},\n },\n docs: {\n autodocs: true,\n },\n};\n" }, { "path": ".storybook/preview-head.html", "content": "\n" }, { "path": "README.md", "content": "# svelte-file-dropzone\r\n\r\n[![NPM](https://img.shields.io/npm/v/svelte-file-dropzone.svg)](https://www.npmjs.com/package/svelte-file-dropzone)\r\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/svelte-file-dropzone.svg)](https://www.npmjs.com/package/svelte-file-dropzone)\r\n\r\nSvelteJS component for file upload and dropzone.The component is Svelte implementation of [react-dropzone](https://github.com/react-dropzone/react-dropzone).\r\n\r\n## Demo\r\n\r\n[Click here for Storybook link](https://svelte-file-dropzone.netlify.app/?path=/info/examples--basic-dropzone)\r\n\r\n## Installation\r\n\r\n```\r\nnpm install svelte-file-dropzone\r\n\r\nor\r\n\r\nyarn add svelte-file-dropzone\r\n```\r\n\r\n## Usage\r\n\r\n```svelte\r\n\r\n\r\n\r\n
    \r\n {#each files.accepted as item}\r\n
  1. {item.name}
    2. \r\n {/each}\r\n
\r\n```\r\n\r\n## API\r\n\r\n### Props\r\n\r\n| Prop Name | Description | Default Value |\r\n| --------------------- | ---------------------------------------------------------------------------------------- | ------------- |\r\n| accept | Set accepted file types. See https://github.com/okonet/attr-accept for more information. | undefined |\r\n| disabled | | false |\r\n| maxSize | | Infinity |\r\n| minSize | | 0 |\r\n| multiple | if true, multiple files can be selected at once | true |\r\n| preventDropOnDocument | 1231 | true |\r\n| noClick | disable click events | false |\r\n| noKeyboard | disable keyboard events | false |\r\n| noDrag | disable drag events | false |\r\n| containerClasses | custom container classes | \"\" |\r\n| containerStyles | custom inline container styles | \"\" |\r\n| disableDefaultStyles | don't apply default styles to container | false |\r\n| inputElement | reference to inputElement | undefined |\r\n| required | html5 required attribute added to input | false |\r\n\r\n### Events\r\n\r\n| Event Name | Description | `event.detail` info |\r\n| ---------------- | ----------- | -------------------------------------- |\r\n| dragenter | | `{dragEvent: event}` |\r\n| dragover | | `{dragEvent: event}` |\r\n| dragleave | | `{dragEvent: event}` |\r\n| drop | | `{acceptedFiles,fileRejections,event}` |\r\n| filedropped | | `{event}` |\r\n| droprejected | | `{fileRejections,event}` |\r\n| dropaccepted | | `{acceptedFiles,event}` |\r\n| filedialogcancel | | |\r\n\r\n### Examples\r\n\r\n[Click here](https://github.com/thecodejack/svelte-file-dropzone/tree/master/stories/views) to view stories implementation\r\n\r\n## Credits\r\n\r\nComponent is reimplementation [react-dropzone](https://github.com/react-dropzone/react-dropzone). Complete credit goes to author and contributors of [react-dropzone](https://github.com/react-dropzone/react-dropzone).\r\n\r\n## License\r\n\r\nMIT\r\n" }, { "path": "TODO", "content": "\nTodo:\n ✔ Git repo @done(20-06-17 21:58)\n ✔ npm initial publish @done(20-06-18 22:34)\n ✔ setup netlify @done(20-06-17 22:55)\n ✔ Fix README.md @done(20-06-17 22:28)\n ✔ Add README.md to Notes of storybook @done(20-06-18 22:34)\n ✔ Build setup @done(20-06-17 22:33)\n ☐ Advanced Examples\n ☐ Custom Dropzone with delete file etc\n ✔ CustomDropzone with different drop behaviour @done(20-06-18 22:34)\n \n" }, { "path": "demo/.gitignore", "content": ".DS_Store\nnode_modules\n/build\n/.svelte-kit\n/package\n.env\n.env.*\n!.env.example\nvite.config.js.timestamp-*\nvite.config.ts.timestamp-*\n" }, { "path": "demo/.npmrc", "content": "engine-strict=true\n" }, { "path": "demo/.prettierignore", "content": "# Ignore files for PNPM, NPM and YARN\npnpm-lock.yaml\npackage-lock.json\nyarn.lock\n" }, { "path": "demo/.prettierrc", "content": "{\n\t\"useTabs\": true,\n\t\"singleQuote\": true,\n\t\"trailingComma\": \"none\",\n\t\"printWidth\": 100,\n\t\"plugins\": [\"prettier-plugin-svelte\"],\n\t\"overrides\": [{ \"files\": \"*.svelte\", \"options\": { \"parser\": \"svelte\" } }]\n}\n" }, { "path": "demo/README.md", "content": "# create-svelte\n\nEverything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).\n\n## Creating a project\n\nIf you're seeing this, you've probably already done this step. Congrats!\n\n```bash\n# create a new project in the current directory\nnpm create svelte@latest\n\n# create a new project in my-app\nnpm create svelte@latest my-app\n```\n\n## Developing\n\nOnce you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:\n\n```bash\nnpm run dev\n\n# or start the server and open the app in a new browser tab\nnpm run dev -- --open\n```\n\n## Building\n\nTo create a production version of your app:\n\n```bash\nnpm run build\n```\n\nYou can preview the production build with `npm run preview`.\n\n> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.\n" }, { "path": "demo/package.json", "content": "{\n\t\"name\": \"demo\",\n\t\"version\": \"0.0.1\",\n\t\"private\": true,\n\t\"scripts\": {\n\t\t\"dev\": \"vite dev\",\n\t\t\"build\": \"vite build\",\n\t\t\"preview\": \"vite preview\",\n\t\t\"check\": \"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json\",\n\t\t\"check:watch\": \"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch\",\n\t\t\"test\": \"vitest\",\n\t\t\"lint\": \"prettier --check .\",\n\t\t\"format\": \"prettier --write .\"\n\t},\n\t\"devDependencies\": {\n\t\t\"@sveltejs/adapter-auto\": \"^3.0.0\",\n\t\t\"@sveltejs/kit\": \"^2.5.5\",\n\t\t\"@sveltejs/vite-plugin-svelte\": \"^3.0.0\",\n\t\t\"prettier\": \"^3.1.1\",\n\t\t\"prettier-plugin-svelte\": \"^3.1.2\",\n\t\t\"svelte\": \"^4.2.12\",\n\t\t\"svelte-check\": \"^3.6.0\",\n\t\t\"tslib\": \"^2.4.1\",\n\t\t\"typescript\": \"^5.0.0\",\n\t\t\"vite\": \"^5.0.3\",\n\t\t\"vitest\": \"^1.0.0\"\n\t},\n\t\"type\": \"module\"\n}\n" }, { "path": "demo/src/app.d.ts", "content": "// See https://kit.svelte.dev/docs/types#app\n// for information about these interfaces\ndeclare global {\n\tnamespace App {\n\t\t// interface Error {}\n\t\t// interface Locals {}\n\t\t// interface PageData {}\n\t\t// interface PageState {}\n\t\t// interface Platform {}\n\t}\n}\n\nexport {};\n" }, { "path": "demo/src/app.html", "content": "\n\n\t\n\t\t\n\t\t\n\t\t\n\t\t%sveltekit.head%\n\t\n\t\n\t\t
%sveltekit.body%
\n\t\n\n" }, { "path": "demo/src/index.test.ts", "content": "import { describe, it, expect } from 'vitest';\n\ndescribe('sum test', () => {\n\tit('adds 1 + 2 to equal 3', () => {\n\t\texpect(1 + 2).toBe(3);\n\t});\n});\n" }, { "path": "demo/src/lib/index.ts", "content": "// place files you want to import through the `$lib` alias in this folder.\n" }, { "path": "demo/src/routes/basic/+page.svelte", "content": "\n\n
\n\t\n\n\t
    \n\t\t{#each files.accepted as item}\n\t\t\t
  1. {item.name}
    2. \n\t\t{/each}\n\t
\n
\n\n\n" }, { "path": "demo/src/routes/custom-props/+page.svelte", "content": "\n\n
\n\t\n\t\n\n\t
    \n\t\t{#each files.accepted as item}\n\t\t\t
  1. {item.name}
    2. \n\t\t{/each}\n\t
\n
\n\n\n" }, { "path": "demo/src/routes/form/+page.server.ts", "content": "export const actions = {\n\tasync postFiles({ request }) {\n\t\tconst formData: FormData = await request.formData();\n\t\tconst files = formData.getAll('files');\n\n\t\treturn { files: files.map((f) => (f as any).name) };\n\t}\n};\n" }, { "path": "demo/src/routes/form/+page.svelte", "content": "\n\n
\n\t\n\n\t\n\n\nFiles about to upload:\n
    \n\t{#each files as file}\n\t\t
  • {file.name}
    • \n\t{/each}\n
\n\n
\n\nFiles posted to form action:\n
    \n\t{#each $page.form?.files ?? [] as file}\n\t\t
  • {file}
    • \n\t{/each}\n
\n" }, { "path": "demo/src/routes/reactive-disabled/+page.svelte", "content": "\n\n
\n\t\n\t\n\n\t
    \n\t\t{#each files.accepted as item}\n\t\t\t
  1. {item.name}
    2. \n\t\t{/each}\n\t
\n
\n\n\n" }, { "path": "demo/src/routes/toggle-multiple/+page.svelte", "content": "\n\n
\n\t\n\t\n\n\t
    \n\t\t{#each files.accepted as item}\n\t\t\t
  1. {item.name}
    2. \n\t\t{/each}\n\t
\n
\n\n\n" }, { "path": "demo/svelte.config.js", "content": "import adapter from '@sveltejs/adapter-auto';\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\t// Consult https://kit.svelte.dev/docs/integrations#preprocessors\n\t// for more information about preprocessors\n\tpreprocess: vitePreprocess(),\n\n\tkit: {\n\t\t// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.\n\t\t// If your environment is not supported or you settled on a specific environment, switch out the adapter.\n\t\t// See https://kit.svelte.dev/docs/adapters for more information about adapters.\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n" }, { "path": "demo/tsconfig.json", "content": "{\n\t\"extends\": \"./.svelte-kit/tsconfig.json\",\n\t\"compilerOptions\": {\n\t\t\"allowJs\": true,\n\t\t\"checkJs\": true,\n\t\t\"esModuleInterop\": true,\n\t\t\"forceConsistentCasingInFileNames\": true,\n\t\t\"resolveJsonModule\": true,\n\t\t\"skipLibCheck\": true,\n\t\t\"sourceMap\": true,\n\t\t\"strict\": true,\n\t\t\"moduleResolution\": \"bundler\"\n\t}\n\t// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias\n\t//\n\t// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes\n\t// from the referenced tsconfig.json - TypeScript does not merge them in\n}\n" }, { "path": "demo/vite.config.ts", "content": "import { sveltekit } from '@sveltejs/kit/vite';\nimport { defineConfig } from 'vitest/config';\n\nexport default defineConfig({\n\tplugins: [sveltekit()],\n\ttest: {\n\t\tinclude: ['src/**/*.{test,spec}.{js,ts}']\n\t}\n});\n" }, { "path": "jsconfig.json", "content": "{}\n" }, { "path": "package.json", "content": "{\n \"name\": \"svelte-file-dropzone\",\n \"version\": \"2.0.9\",\n \"description\": \"Svelte component for fileupload and file dropzone\",\n \"scripts\": {\n \"package\": \"svelte-kit sync && svelte-package && publint\",\n \"prepublishOnly\": \"npm run package\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"storybook\": \"storybook dev -p 6006\",\n \"build-storybook\": \"storybook build\"\n },\n \"exports\": {\n \".\": {\n \"types\": \"./dist/index.d.ts\",\n \"svelte\": \"./dist/index.js\"\n }\n },\n \"typesVersions\": {\n \">4.0\": {\n \"Dropzone.svelte\": [\n \"./dist/components/Dropzone.svelte.d.ts\"\n ]\n }\n },\n \"repository\": {\n \"url\": \"https://github.com/thecodejack/svelte-file-dropzone\"\n },\n \"author\": \"thecodejack\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"file-selector\": \"^0.6.0\"\n },\n \"peerDependencies\": {\n \"svelte\": \"^3.54.0 || ^4.0.0 || ^5\"\n },\n \"devDependencies\": {\n \"@storybook/addon-essentials\": \"^7.6.6\",\n \"@storybook/addon-interactions\": \"^7.6.6\",\n \"@storybook/addon-links\": \"^7.6.6\",\n \"@storybook/addons\": \"7.6.6\",\n \"@storybook/svelte\": \"7.6.6\",\n \"@storybook/sveltekit\": \"^7.6.6\",\n \"@sveltejs/kit\": \"^1.30.4\",\n \"@sveltejs/package\": \"^2.2.5\",\n \"babel-loader\": \"9.1.3\",\n \"publint\": \"^0.2.7\",\n \"storybook\": \"^7.6.6\",\n \"svelte\": \"^4.2.12\",\n \"vite\": \"^4.5.1\"\n },\n \"keywords\": [\n \"svelte\",\n \"svelte3\",\n \"svelte-components\",\n \"upload\",\n \"dropzone\",\n \"svelte-file-dropzone\",\n \"svelte-dropzone\",\n \"sveltejs\"\n ],\n \"files\": [\n \"src\",\n \"dist\",\n \"!dist/**/*.test.*\",\n \"!dist/**/*.spec.*\"\n ],\n \"svelte\": \"./dist/index.js\",\n \"types\": \"./dist/index.d.ts\",\n \"type\": \"module\"\n}\n" }, { "path": "renovate.json", "content": "{\n \"extends\": [\n \"config:base\"\n ]\n}\n" }, { "path": "rollup.config.js", "content": "import svelte from \"rollup-plugin-svelte\";\nimport resolve from \"@rollup/plugin-node-resolve\";\nimport commonjs from \"@rollup/plugin-commonjs\";\nimport pkg from \"./package.json\";\n\nconst name = pkg.name\n .replace(/^(@\\S+\\/)?(svelte-)?(\\S+)/, \"$3\")\n .replace(/^\\w/, (m) => m.toUpperCase())\n .replace(/-\\w/g, (m) => m[1].toUpperCase());\n\nexport default {\n input: \"src/index.svelte\",\n output: [\n { file: pkg.module, format: \"es\" },\n { file: pkg.main, format: \"umd\", name },\n ],\n plugins: [svelte(), resolve(), commonjs()],\n};\n" }, { "path": "src/lib/components/Dropzone.svelte", "content": "\r\n\r\n\r\n\r\n\r\n \r\n \r\n

{defaultPlaceholderString}

\r\n \r\n\r\n\r\n\r\n" }, { "path": "src/lib/index.ts", "content": "import Dropzone from \"./components/Dropzone.svelte\";\n\nexport default Dropzone" }, { "path": "src/lib/utils/attr-accept.js", "content": "/**\r\n * Check if the provided file type should be accepted by the input with accept attribute.\r\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-accept\r\n *\r\n * Inspired by https://github.com/enyo/dropzone\r\n *\r\n * @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File\r\n * @param acceptedFiles {string}\r\n * @returns {boolean}\r\n */\r\n\r\nexport default function(file, acceptedFiles) {\r\n if (file && acceptedFiles) {\r\n const acceptedFilesArray = Array.isArray(acceptedFiles)\r\n ? acceptedFiles\r\n : acceptedFiles.split(\",\");\r\n const fileName = file.name || \"\";\r\n const mimeType = (file.type || \"\").toLowerCase();\r\n const baseMimeType = mimeType.replace(/\\/.*$/, \"\");\r\n\r\n return acceptedFilesArray.some((type) => {\r\n const validType = type.trim().toLowerCase();\r\n if (validType.charAt(0) === \".\") {\r\n return fileName.toLowerCase().endsWith(validType);\r\n } else if (validType.endsWith(\"/*\")) {\r\n // This is something like a image/* mime type\r\n return baseMimeType === validType.replace(/\\/.*$/, \"\");\r\n }\r\n return mimeType === validType;\r\n });\r\n }\r\n return true;\r\n}\r\n" }, { "path": "src/lib/utils/index.js", "content": "import accepts from \"./attr-accept\";\r\n\r\n// Error codes\r\nexport const FILE_INVALID_TYPE = \"file-invalid-type\";\r\nexport const FILE_TOO_LARGE = \"file-too-large\";\r\nexport const FILE_TOO_SMALL = \"file-too-small\";\r\nexport const TOO_MANY_FILES = \"too-many-files\";\r\n\r\n// File Errors\r\nexport const getInvalidTypeRejectionErr = (accept) => {\r\n accept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;\r\n const messageSuffix = Array.isArray(accept)\r\n ? `one of ${accept.join(\", \")}`\r\n : accept;\r\n return {\r\n code: FILE_INVALID_TYPE,\r\n message: `File type must be ${messageSuffix}`,\r\n };\r\n};\r\n\r\nexport const getTooLargeRejectionErr = (maxSize) => {\r\n return {\r\n code: FILE_TOO_LARGE,\r\n message: `File is larger than ${maxSize} bytes`,\r\n };\r\n};\r\n\r\nexport const getTooSmallRejectionErr = (minSize) => {\r\n return {\r\n code: FILE_TOO_SMALL,\r\n message: `File is smaller than ${minSize} bytes`,\r\n };\r\n};\r\n\r\nexport const TOO_MANY_FILES_REJECTION = {\r\n code: TOO_MANY_FILES,\r\n message: \"Too many files\",\r\n};\r\n\r\n// Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with\r\n// that MIME type will always be accepted\r\nexport function fileAccepted(file, accept) {\r\n const isAcceptable =\r\n file.type === \"application/x-moz-file\" || accepts(file, accept);\r\n return [\r\n isAcceptable,\r\n isAcceptable ? null : getInvalidTypeRejectionErr(accept),\r\n ];\r\n}\r\n\r\nexport function fileMatchSize(file, minSize, maxSize) {\r\n if (isDefined(file.size)) {\r\n if (isDefined(minSize) && isDefined(maxSize)) {\r\n if (file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];\r\n if (file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];\r\n } else if (isDefined(minSize) && file.size < minSize)\r\n return [false, getTooSmallRejectionErr(minSize)];\r\n else if (isDefined(maxSize) && file.size > maxSize)\r\n return [false, getTooLargeRejectionErr(maxSize)];\r\n }\r\n return [true, null];\r\n}\r\n\r\nfunction isDefined(value) {\r\n return value !== undefined && value !== null;\r\n}\r\n\r\nexport function allFilesAccepted({\r\n files,\r\n accept,\r\n minSize,\r\n maxSize,\r\n multiple,\r\n}) {\r\n if (!multiple && files.length > 1) {\r\n return false;\r\n }\r\n\r\n return files.every((file) => {\r\n const [accepted] = fileAccepted(file, accept);\r\n const [sizeMatch] = fileMatchSize(file, minSize, maxSize);\r\n return accepted && sizeMatch;\r\n });\r\n}\r\n\r\n// React's synthetic events has event.isPropagationStopped,\r\n// but to remain compatibility with other libs (Preact) fall back\r\n// to check event.cancelBubble\r\nexport function isPropagationStopped(event) {\r\n if (typeof event.isPropagationStopped === \"function\") {\r\n return event.isPropagationStopped();\r\n } else if (typeof event.cancelBubble !== \"undefined\") {\r\n return event.cancelBubble;\r\n }\r\n return false;\r\n}\r\n\r\nexport function isEvtWithFiles(event) {\r\n if (!event.dataTransfer) {\r\n return !!event.target && !!event.target.files;\r\n }\r\n // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types\r\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file\r\n return Array.prototype.some.call(\r\n event.dataTransfer.types,\r\n (type) => type === \"Files\" || type === \"application/x-moz-file\"\r\n );\r\n}\r\n\r\nexport function isKindFile(item) {\r\n return typeof item === \"object\" && item !== null && item.kind === \"file\";\r\n}\r\n\r\nfunction isIe(userAgent) {\r\n return (\r\n userAgent.indexOf(\"MSIE\") !== -1 || userAgent.indexOf(\"Trident/\") !== -1\r\n );\r\n}\r\n\r\nfunction isEdge(userAgent) {\r\n return userAgent.indexOf(\"Edge/\") !== -1;\r\n}\r\n\r\nexport function isIeOrEdge(userAgent = window.navigator.userAgent) {\r\n return isIe(userAgent) || isEdge(userAgent);\r\n}\r\n\r\n/**\r\n * This is intended to be used to compose event handlers\r\n * They are executed in order until one of them calls `event.isPropagationStopped()`.\r\n * Note that the check is done on the first invoke too,\r\n * meaning that if propagation was stopped before invoking the fns,\r\n * no handlers will be executed.\r\n *\r\n * @param {Function} fns the event hanlder functions\r\n * @return {Function} the event handler to add to an element\r\n */\r\nexport function composeEventHandlers(...fns) {\r\n return (event, ...args) =>\r\n fns.some((fn) => {\r\n if (!isPropagationStopped(event) && fn) {\r\n fn(event, ...args);\r\n }\r\n return isPropagationStopped(event);\r\n });\r\n}\r\n" }, { "path": "stories/1-dropzone.stories.js", "content": "//import { action } from \"@storybook/addon-actions\";\r\n\r\nimport BasicDropZoneView from \"./views/BasicDropzoneView.svelte\";\r\nimport BasicDropZoneViewSource from \"./views/BasicDropzoneView.svelte?raw\";\r\nimport DisabledDropzoneView from \"./views/DisabledDropzoneView.svelte\";\r\nimport DisabledDropzoneViewSource from \"./views/DisabledDropzoneView.svelte?raw\";\r\nimport CustomSlotDropzoneView from \"./views/CustomSlotDropzoneView.svelte\";\r\nimport CustomSlotDropzoneViewSource from \"./views/CustomSlotDropzoneView.svelte?raw\";\r\nimport NoClickDropZoneView from \"./views/NoClickDropzoneView.svelte\";\r\nimport NoClickDropZoneViewSource from \"./views/NoClickDropzoneView.svelte?raw\";\r\nimport NoDragDropzoneView from \"./views/NoDragDropzoneView.svelte\";\r\nimport NoDragDropzoneViewSource from \"./views/NoDragDropzoneView.svelte?raw\";\r\n\r\nimport { sourceParameters } from \"./helpers\";\r\n\r\nexport default {\r\n title: \"Examples\",\r\n component: null,\r\n};\r\n\r\nexport const BasicDropzone = {\r\n ...sourceParameters(BasicDropZoneViewSource),\r\n render: () => ({\r\n Component: BasicDropZoneView,\r\n }),\r\n};\r\n\r\nexport const DisabledDropzone = {\r\n ...sourceParameters(DisabledDropzoneViewSource),\r\n render: () => ({\r\n Component: DisabledDropzoneView,\r\n }),\r\n};\r\n\r\nexport const CustomSlotDropzone = {\r\n ...sourceParameters(CustomSlotDropzoneViewSource),\r\n render: () => ({\r\n Component: CustomSlotDropzoneView,\r\n }),\r\n};\r\n\r\nexport const DropZoneWithClickDisabled = {\r\n ...sourceParameters(NoClickDropZoneViewSource),\r\n render: () => ({\r\n Component: NoClickDropZoneView,\r\n }),\r\n};\r\n\r\nexport const DropZoneWithDragDisabled = {\r\n ...sourceParameters(NoDragDropzoneViewSource),\r\n render: () => ({\r\n Component: NoDragDropzoneView,\r\n }),\r\n};\r\n" }, { "path": "stories/2-advanced-dropzone.stories.js", "content": "import { action } from \"@storybook/addon-actions\";\r\n\r\nimport WorkingCSVFileUploadView from \"./views/WorkingCSVFileUploadView.svelte\";\r\nimport WorkingCSVFileUploadViewSource from \"./views/WorkingCSVFileUploadView.svelte?raw\";\r\nimport FullyFeaturedDropzoneView from \"./views/FullyFeaturedDropzoneView.svelte\";\r\nimport FullyFeaturedDropzoneViewSource from \"./views/FullyFeaturedDropzoneView.svelte?raw\";\r\n\r\nimport { sourceParameters } from \"./helpers\";\r\n\r\nexport default {\r\n title: \"Advanced Examples\",\r\n component: null,\r\n};\r\n\r\nexport const WorkingCSVFileUploadDropzone = {\r\n ...sourceParameters(WorkingCSVFileUploadViewSource),\r\n render: () => ({\r\n Component: WorkingCSVFileUploadView,\r\n }),\r\n};\r\n\r\nexport const FullyFeaturedImagesDropzone = {\r\n ...sourceParameters(FullyFeaturedDropzoneViewSource),\r\n render: () => ({\r\n Component: FullyFeaturedDropzoneView,\r\n }),\r\n};\r\n" }, { "path": "stories/helpers.js", "content": "export const sourceParameters = (source) => ({\n parameters: {\n docs: {\n source: {\n code: source,\n },\n },\n },\n});\n" }, { "path": "stories/views/BasicDropzoneAcceptImagesView.svelte", "content": "\r\n\r\n\r\n
    \r\n {#each files.accepted as item}\r\n
  1. {item.name}
    2. \r\n {/each}\r\n
\r\n" }, { "path": "stories/views/BasicDropzoneView.svelte", "content": "\r\n\r\n\r\n
    \r\n {#each files.accepted as item}\r\n
  1. {item.name}
    2. \r\n {/each}\r\n
\r\n" }, { "path": "stories/views/CustomSlotDropzoneView.svelte", "content": "\r\n\r\n\r\n

Custom Slot Dropzone

\r\n\r\n
    \r\n {#each files.accepted as item}\r\n
  1. {item.name}
    2. \r\n {/each}\r\n
\r\n" }, { "path": "stories/views/DisabledDropzoneView.svelte", "content": "\r\n\r\n\r\n
    \r\n {#each files.accepted as item}\r\n
  1. {item.name}
    2. \r\n {/each}\r\n
\r\n" }, { "path": "stories/views/FullyFeaturedDropzoneView.svelte", "content": "\r\n\r\n\r\n \r\n\r\n

or

\r\n

Drag and drop them here

\r\n\r\n
\r\n {#if files.accepted.length > 0}\r\n \r\n {/if}\r\n {#each files.accepted as item, index}\r\n
\r\n {item.name}\r\n \r\n
\r\n {/each}\r\n
\r\n\r\n\r\n" }, { "path": "stories/views/NoClickDropzoneView.svelte", "content": "\r\n\r\n\r\n
    \r\n {#each files.accepted as item}\r\n
  1. {item.name}
    2. \r\n {/each}\r\n
\r\n" }, { "path": "stories/views/NoDragDropzoneView.svelte", "content": "\r\n\r\n\r\n
    \r\n {#each files.accepted as item}\r\n
  1. {item.name}
    2. \r\n {/each}\r\n
\r\n" }, { "path": "stories/views/WorkingCSVFileUploadView.svelte", "content": "\r\n\r\n

Upload CSV file and preview same

\r\n\r\n\r\n{#each files as item}\r\n

{item.name}

\r\n{/each}\r\n\r\n\r\n {#each fileData as row}\r\n \r\n {#each row as item}\r\n \r\n {/each}\r\n \r\n {/each}\r\n
{item}
\r\n" } ]