2f:T71e,createDropzone = function* (options = {}) { const defaultPlaceholder = options.multiple ? 'Drop files here…' : 'Drop file here…' const placeholder = options.placeholder || defaultPlaceholder const maxSize = options.maxSize const pattern = options.pattern const multiple = options.multiple let container = html`

${placeholder}

${pattern ? `

${pattern}

` : ''} ${maxSize ? `

max. ${formatFileSize(maxSize)}

` : ''}

` yield container container.value = {} async function setFiles (files) { let allContents = [] for (const file of files) { const fileContents = await getContents(file) allContents.push(fileContents) } container.value = { file: files[0], files, contents: multiple ? allContents : allContents[0] } container.dispatchEvent(new CustomEvent('input')) container.classList.remove('error') container.classList.add('dropped') const filesContainer = container.querySelector('.dropzone-files') filesContainer.innerHTML = `

${summarizeFiles(files)}

` } container.addEventListener('drop', async (event) => { try { const files = handleDrop(event, maxSize, pattern, multiple) setFiles(files) } catch (err) { container.classList.add('error') container.classList.remove('dropped') const filesContainer = container.querySelector('.dropzone-files') filesContainer.innerHTML = `

${err.message}

` } }) container.setFiles = setFiles container.addEventListener('dragover', handleDragOver) }30:T445,handleDrop = function (event, maxSize, pattern, multiple = false) { // Code adapted from: // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop event.preventDefault() if (event.dataTransfer.items && !multiple && event.dataTransfer.items.length !== 1) { throw new Error('Please drop one file at a time!') } if (event.dataTransfer.items) { const files = [] for (const transferItem of event.dataTransfer.items) { if (transferItem.kind === 'file') { const file = transferItem.getAsFile() if (maxSize && file.size > maxSize) { throw new Error(`File too large. Maximum size is ${formatFileSize(maxSize)}.`) } if (pattern && !(globToRegExp(pattern).test(file.name))) { throw new Error(`Filename "${file.name}" does not match pattern: ${pattern}`) } files.push(file) } else { throw new Error('Transfered item should be a file!') } } return files } else { throw new Error('DataTransfer not supported yet!') } }31:[] 2d:{"title":"Dropzone","cells":[{"id":0,"value":"md`# Dropzone`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`Drop files into an Observable notebook!\n\n## Usage\n\nFirst, create a dropzone: \n\n~~~js\nimport {createDropzone} from '@bertspaan/dropzone'\n\noptions = {\n placeholder: 'Drop file here 🚀', // placeholder text (optional)\n maxSize: 1024 * 1024 // maximum file size in bytes (optional)\n pattern: '*.json' // regular expression (optional)\n multiple: false // accept multiple files (optional)\n}\n\nviewof dropzone = createDropzone(options)\n~~~\n\nThen, you can access the files and file contents like this:\n\n~~~js\nconst file = dropzone.file // first file (and only file when multiple === false)\nconst files = dropzone.files // all files\nconst contents = dropzone.contents // contents of first file, or array of file contents \n // when multiple === true\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof dropzone = createDropzone({\n placeholder: 'Drop file here 🚀',\n maxSize: 1024 * 1024,\n pattern: '*.json',\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`Contents of the dropped file:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"dropzone.contents","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"getContents = (file) => new Promise((resolve) => {\n if (!file || !file.size || file.size === 0) {\n resolve()\n }\n \n const fileReader = new FileReader()\n fileReader.onload = (event) => {\n resolve(event.target.result)\n }\n\n fileReader.readAsText(file)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"formatFileSize = (size) => {\n if (size < 1024) {\n return `${size} B`\n } else if (size < 1024 * 1024) {\n return `${Math.round(size / 1024)} KB`\n } else {\n return `${Math.round(size / 1024 / 1024)} MB`\n } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"summarizeFiles = (files) => {\n return files\n .map((file) => `

${file.name} (${formatFileSize(file.size)})

`)\n .join('')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"handleDragOver = function (event) {\n event.preventDefault()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"style = `\n.dropzone {\n height: 250px;\n position: relative;\n}\n\n.dropzone, .dropzone-files {\n padding: 2em;\n box-sizing: border-box;\n}\n\n.dropzone-files { \n width: 100%;\n height: 100%;\n border-color: rgb(0, 100, 200);\n border-style: dashed;\n border-width: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.dropzone.dropped .dropzone-files {\n border-color: green; \n}\n\n.dropzone.error .dropzone-files {\n border-color: red;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"globToRegExp = require('https://bundle.run/glob-to-regexp@0.4.1')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}