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) }