File upload allows the user to upload files.
<ld-file-upload></ld-file-upload>
<LdFileUpload />
State management such as changing the upload state or progress of a file has to be done by the user. Every event emits a an upload item (UploadItem = { state: | 'pending' | 'paused' | 'cancelled' | 'uploading' | 'uploaded' | 'upload failed' fileName: string fileSize: number fileType: string progress: number file: File }
) or an array of upload items. For each event, the states need to be changed using methods.
<ld-file-upload>
</ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
/* console.log('ldchoosefiles', ev.detail) */
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
/* console.log('ldfileuploadready', ev.detail) */
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
/* console.log(item) */
newItem = uploadItems[item]
/* console.log(newItem) */
newItem.state = 'uploading'
uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
uploadItem.state = 'cancelled'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<!-- <LdFileUpload
onLdchoosefiles={async (ev) => {
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
}}
onLdfileuploadready={async (ev) => {
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
}
}}
onLduploaditempause={async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
}}
onLduploaditemcontinue={async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
}}
onLduploaditemremove={async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'cancelled'
ldUpload.updateUploadItem(uploadItem)
}}
onLduploaditemdelete={async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
}}
onLduploaditemdeleteall={async (ev) => {
ldUpload.deleteUploadItems()
}}
onLdfileuploadpausealluploads={async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}}}
onLdfileuploadcontinueuploads={async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
}}
/> -->
<ld-file-upload select-multiple show-progress style="width: 30rem">
</ld-file-upload>
<!-- style="width: 30rem, height: 50rem"> -->
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
// uploadingItems = []
for (let item in uploadItems) {
console.log("item in uploadItems:", item)
newItem = uploadItems[item]
newItem.state = 'uploading'
// uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
file = uploadItems[item].file
console.log("file:", file)
const xhr = new XMLHttpRequest()
const success = await new Promise((resolve) => {
xhr.upload.addEventListener("progress", (event) => {
if (event.lengthComputable) {
console.log("upload progress:", event.loaded / event.total)
// uploadProgress.value = event.loaded / event.total
newItem = uploadItems[item]
newItem.progress = event.loaded / event.total * 100
ldUpload.updateUploadItem(newItem)
}
});
xhr.addEventListener("loadend", () => {
// console.log("xhr.response:", xhr.response)
resolve(xhr.readyState === 4 && xhr.status === 200)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
if (uploadItem.fileName == uploadItems[item].fileName) {
newItem = uploadItems[item]
newItem.state = 'cancelled'
ldUpload.updateUploadItem(newItem)
xhr.abort(ev.detail.file)
}
// uploadItem.state = 'cancelled'
// ldUpload.updateUploadItem(uploadItem)
// xhr.abort(ev.detail.file)
})
// ldUpload.addEventListener('lduploaditemdownload', async (ev) => {
// uploadItem = ev.detail
// if (uploadItem.fileName == uploadItems[item].fileName) {
// // location.replace("https://liquid.merck.design/liquid/")
// window.open("https://liquid.merck.design/liquid/")
// }
// })
xhr.open("PUT", "https://httpbin.org/put", true)
xhr.setRequestHeader("Content-Type", "application/octet-stream")
xhr.send(file)
})
console.log("success:", success)
// success2 = Math.floor(Math.random() * 2) == 1 ? true : false
if (success) {
newItem = uploadItems[item]
newItem.state = 'uploaded'
ldUpload.updateUploadItem(newItem)
} else if (uploadItems[item].state != 'cancelled') {
newItem = uploadItems[item]
newItem.state = "upload failed"
ldUpload.updateUploadItem(newItem)
}
}
})
ldUpload.addEventListener('lduploaditemdownload', async (ev) => {
uploadItem = ev.detail
// location.replace("https://liquid.merck.design/liquid/")
window.open("https://liquid.merck.design/liquid/")
})
ldUpload.addEventListener('lduploaditemretry', async (ev) => {
uploadItem = ev.detail
uploadItems = []
uploadItems.push(uploadItem)
event = new CustomEvent('ldfileuploadready', { detail: uploadItems });
ldUpload.dispatchEvent(event)
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
// ldUpload.addEventListener('lduploaditemremove', async (ev) => {
// uploadItem = ev.detail
// /* ldUpload.deleteUploadItem(uploadItem) */
// uploadItem.state = 'cancelled'
// ldUpload.updateUploadItem(uploadItem)
// xhr.abort(ev.detail.file)
// })
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload select-multiple show-progress style="width: 30rem">
</ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
// uploadingItems = []
for (let item in uploadItems) {
console.log("item in uploadItems:", item)
newItem = uploadItems[item]
newItem.state = 'uploading'
// uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
file = uploadItems[item].file
console.log("file:", file)
const xhr = new XMLHttpRequest()
const success = await new Promise((resolve) => {
xhr.upload.addEventListener("progress", (event) => {
if (event.lengthComputable) {
console.log("upload progress:", event.loaded / event.total)
// uploadProgress.value = event.loaded / event.total
newItem = uploadItems[item]
newItem.progress = event.loaded / event.total * 100
ldUpload.updateUploadItem(newItem)
}
});
xhr.addEventListener("loadend", () => {
// console.log("xhr.response:", xhr.response)
resolve(xhr.readyState === 4 && xhr.status === 200)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
if (uploadItem.fileName == uploadItems[item].fileName) {
newItem = uploadItems[item]
newItem.state = 'cancelled'
ldUpload.updateUploadItem(newItem)
xhr.abort(ev.detail.file)
}
// uploadItem.state = 'cancelled'
// ldUpload.updateUploadItem(uploadItem)
// xhr.abort(ev.detail.file)
})
// ldUpload.addEventListener('lduploaditemdownload', async (ev) => {
// uploadItem = ev.detail
// if (uploadItem.fileName == uploadItems[item].fileName) {
// // location.replace("https://liquid.merck.design/liquid/")
// window.open("https://liquid.merck.design/liquid/")
// }
// })
xhr.open("PUT", "https://httpbin.org/put", true)
xhr.setRequestHeader("Content-Type", "application/octet-stream")
xhr.send(file)
})
console.log("success:", success)
success2 = Math.floor(Math.random() * 2) == 1 ? true : false
if (success2) {
newItem = uploadItems[item]
newItem.state = 'uploaded'
ldUpload.updateUploadItem(newItem)
} else if (uploadItems[item].state != 'cancelled') {
newItem = uploadItems[item]
newItem.state = "upload failed"
ldUpload.updateUploadItem(newItem)
}
}
})
ldUpload.addEventListener('lduploaditemdownload', async (ev) => {
uploadItem = ev.detail
// location.replace("https://liquid.merck.design/liquid/")
window.open("https://liquid.merck.design/liquid/")
})
ldUpload.addEventListener('lduploaditemretry', async (ev) => {
uploadItem = ev.detail
uploadItems = []
uploadItems.push(uploadItem)
event = new CustomEvent('ldfileuploadready', { detail: uploadItems });
ldUpload.dispatchEvent(event)
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
// ldUpload.addEventListener('lduploaditemremove', async (ev) => {
// uploadItem = ev.detail
// /* ldUpload.deleteUploadItem(uploadItem) */
// uploadItem.state = 'cancelled'
// ldUpload.updateUploadItem(uploadItem)
// xhr.abort(ev.detail.file)
// })
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload select-multiple show-progress start-upload style="width: 30rem">
</ld-file-upload>
<!-- style="width: 30rem, height: 50rem"> -->
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
// uploadingItems = []
for (let item in uploadItems) {
console.log("item in uploadItems:", item)
newItem = uploadItems[item]
newItem.state = 'uploading'
// uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
file = uploadItems[item].file
console.log("file:", file)
const xhr = new XMLHttpRequest()
const success = await new Promise((resolve) => {
xhr.upload.addEventListener("progress", (event) => {
if (event.lengthComputable) {
console.log("upload progress:", event.loaded / event.total)
// uploadProgress.value = event.loaded / event.total
newItem = uploadItems[item]
newItem.progress = event.loaded / event.total * 100
ldUpload.updateUploadItem(newItem)
}
});
xhr.addEventListener("loadend", () => {
// console.log("xhr.response:", xhr.response)
resolve(xhr.readyState === 4 && xhr.status === 200)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
if (uploadItem.fileName == uploadItems[item].fileName) {
newItem = uploadItems[item]
newItem.state = 'cancelled'
ldUpload.updateUploadItem(newItem)
xhr.abort(ev.detail.file)
}
// uploadItem.state = 'cancelled'
// ldUpload.updateUploadItem(uploadItem)
// xhr.abort(ev.detail.file)
})
// ldUpload.addEventListener('lduploaditemdownload', async (ev) => {
// uploadItem = ev.detail
// if (uploadItem.fileName == uploadItems[item].fileName) {
// // location.replace("https://liquid.merck.design/liquid/")
// window.open("https://liquid.merck.design/liquid/")
// }
// })
xhr.open("PUT", "https://httpbin.org/put", true)
xhr.setRequestHeader("Content-Type", "application/octet-stream")
xhr.send(file)
})
console.log("success:", success)
// success2 = Math.floor(Math.random() * 2) == 1 ? true : false
if (success) {
newItem = uploadItems[item]
newItem.state = 'uploaded'
ldUpload.updateUploadItem(newItem)
} else if (uploadItems[item].state != 'cancelled') {
newItem = uploadItems[item]
newItem.state = "upload failed"
ldUpload.updateUploadItem(newItem)
}
}
})
ldUpload.addEventListener('lduploaditemdownload', async (ev) => {
uploadItem = ev.detail
// location.replace("https://liquid.merck.design/liquid/")
window.open("https://liquid.merck.design/liquid/")
})
ldUpload.addEventListener('lduploaditemretry', async (ev) => {
uploadItem = ev.detail
uploadItems = []
uploadItems.push(uploadItem)
event = new CustomEvent('ldfileuploadready', { detail: uploadItems });
ldUpload.dispatchEvent(event)
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
// ldUpload.addEventListener('lduploaditemremove', async (ev) => {
// uploadItem = ev.detail
// /* ldUpload.deleteUploadItem(uploadItem) */
// uploadItem.state = 'cancelled'
// ldUpload.updateUploadItem(uploadItem)
// xhr.abort(ev.detail.file)
// })
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload select-multiple show-progress circular-progress style="width: 30rem">
</ld-file-upload>
<!-- style="width: 30rem, height: 50rem"> -->
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
// uploadingItems = []
for (let item in uploadItems) {
console.log("item in uploadItems:", item)
newItem = uploadItems[item]
newItem.state = 'uploading'
// uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
file = uploadItems[item].file
console.log("file:", file)
const xhr = new XMLHttpRequest()
const success = await new Promise((resolve) => {
xhr.upload.addEventListener("progress", (event) => {
if (event.lengthComputable) {
console.log("upload progress:", event.loaded / event.total)
// uploadProgress.value = event.loaded / event.total
newItem = uploadItems[item]
newItem.progress = event.loaded / event.total * 100
ldUpload.updateUploadItem(newItem)
}
});
xhr.addEventListener("loadend", () => {
// console.log("xhr.response:", xhr.response)
resolve(xhr.readyState === 4 && xhr.status === 200)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
if (uploadItem.fileName == uploadItems[item].fileName) {
newItem = uploadItems[item]
newItem.state = 'cancelled'
ldUpload.updateUploadItem(newItem)
xhr.abort(ev.detail.file)
}
// uploadItem.state = 'cancelled'
// ldUpload.updateUploadItem(uploadItem)
// xhr.abort(ev.detail.file)
})
// ldUpload.addEventListener('lduploaditemdownload', async (ev) => {
// uploadItem = ev.detail
// if (uploadItem.fileName == uploadItems[item].fileName) {
// // location.replace("https://liquid.merck.design/liquid/")
// window.open("https://liquid.merck.design/liquid/")
// }
// })
xhr.open("PUT", "https://httpbin.org/put", true)
xhr.setRequestHeader("Content-Type", "application/octet-stream")
xhr.send(file)
})
console.log("success:", success)
// success2 = Math.floor(Math.random() * 2) == 1 ? true : false
if (success) {
newItem = uploadItems[item]
newItem.state = 'uploaded'
ldUpload.updateUploadItem(newItem)
} else if (uploadItems[item].state != 'cancelled') {
newItem = uploadItems[item]
newItem.state = "upload failed"
ldUpload.updateUploadItem(newItem)
}
}
})
ldUpload.addEventListener('lduploaditemdownload', async (ev) => {
uploadItem = ev.detail
// location.replace("https://liquid.merck.design/liquid/")
window.open("https://liquid.merck.design/liquid/")
})
ldUpload.addEventListener('lduploaditemretry', async (ev) => {
uploadItem = ev.detail
uploadItems = []
uploadItems.push(uploadItem)
event = new CustomEvent('ldfileuploadready', { detail: uploadItems });
ldUpload.dispatchEvent(event)
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
// ldUpload.addEventListener('lduploaditemremove', async (ev) => {
// uploadItem = ev.detail
// /* ldUpload.deleteUploadItem(uploadItem) */
// uploadItem.state = 'cancelled'
// ldUpload.updateUploadItem(uploadItem)
// xhr.abort(ev.detail.file)
// })
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload select-multiple>
</ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
}
const files = ev.detail[0].file
console.log('files', files)
/* for (let file in ev.detail) {
var files = []
files.append(file.file)
} */
const data = new FormData()
/* data.append('userfile', files[0]) */
/* data.append('userfile', files) */
/* for (let file in ev.detail) {
console.log('file.file', file.file)
console.log('file.file.name', file.file.name)
data.append('userfile', file.file, file.file.name)
} */
console.log('ev.detail.length', ev.detail.length)
for (let i = 0; i < ev.detail.length; i++) {
console.log('ev.detail[i].file', ev.detail[i].file)
console.log('ev.detail[i].file.name', ev.detail[i].file.name)
data.append('userfile', ev.detail[i].file, ev.detail[i].file.name)
}
for (const value of data.values()) {
console.log('data values', value);
}
console.log('data', data)
const requestOptions = {
method: 'POST',
body: data,
}
const delay = ms => new Promise(res => setTimeout(res, ms));
try {
await fetch(/* 'https://api.escuelajs.co/api/v1/files/upload' */ 'https://v2.convertapi.com/upload' , {
method: 'POST',
body: data,
})
console.log('File uploaded')
// Fake progress, th file is being uploaded but the progress simulated here does not represent the actual progress
for (const value of data.values()) {
await delay(1000)
updatedItem = uploadItems.find((item) => item.fileName === value.name)
updatedItem.state = 'uploaded'
updatedItem.progress = 100
uploadingItems.push(updatedItem)
ldUpload.updateUploadItem(updatedItem)
}
} catch (err) {
console.log('File could not be uploaded')
}
/* const requestOptions = {
method: 'GET',
body: data,
} */
/* try {
await fetch(`https://api.escuelajs.co/api/v1/files/${ev.detail[0].file.name}` , {
method: 'GET',
body: data,
})
} catch (err) {
console.log('File not found on server')
} */
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
uploadItem.state = 'cancelled'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload select-multiple circular-progress>
</ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
console.log('ldchoosefiles', ev.detail)
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
console.log(item)
newItem = uploadItems[item]
console.log(newItem)
newItem.state = 'uploading'
uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
}
const files = ev.detail[0].file
console.log('files', files)
const data = new FormData()
console.log('ev.detail.length', ev.detail.length)
for (let i = 0; i < ev.detail.length; i++) {
console.log('ev.detail[i].file', ev.detail[i].file)
console.log('ev.detail[i].file.name', ev.detail[i].file.name)
data.append('userfile', ev.detail[i].file, ev.detail[i].file.name)
}
for (const value of data.values()) {
console.log('data values', value);
}
console.log('data', data)
const requestOptions = {
method: 'POST',
body: data,
}
const delay = ms => new Promise(res => setTimeout(res, ms));
try {
await fetch(/* 'https://api.escuelajs.co/api/v1/files/upload' */ 'https://v2.convertapi.com/upload' , {
method: 'POST',
body: data,
})
console.log('File uploaded')
/* for (const value of data.values()) {
await delay(5000)
updatedItem = uploadItems.find((item) => item.fileName === value.name)
updatedItem.state = 'uploaded'
updatedItem.progress = 100
uploadingItems.push(updatedItem)
ldUpload.updateUploadItem(updatedItem)
} */
} catch (err) {
console.log('File could not be uploaded')
}
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
uploadItem.state = 'cancelled'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload start-upload></ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
console.log(item)
newItem = uploadItems[item]
console.log(newItem)
newItem.state = 'uploading'
uploadingItems.push(newItem)
}
console.log(uploadingItems)
ldUpload.updateUploadItems(uploadingItems)
})
})()
</script>
<ld-file-upload allow-pause>
</ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
console.log('ldchoosefiles', ev.detail)
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
console.log(item)
newItem = uploadItems[item]
console.log(newItem)
newItem.state = 'uploading'
uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
uploadItem.state = 'cancelled'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload show-progress>
</ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
console.log('ldchoosefiles', ev.detail)
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
console.log(item)
newItem = uploadItems[item]
console.log(newItem)
newItem.state = 'uploading'
uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
uploadItem.state = 'cancelled'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload select-multiple>
</ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
console.log('ldchoosefiles', ev.detail)
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
console.log(item)
newItem = uploadItems[item]
console.log(newItem)
newItem.state = 'uploading'
uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
uploadItem.state = 'cancelled'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload max-size=500>
</ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
console.log('ldchoosefiles', ev.detail)
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
console.log(item)
newItem = uploadItems[item]
console.log(newItem)
newItem.state = 'uploading'
uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
uploadItem.state = 'cancelled'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload>
<ld-icon slot='icons' data-upload-icon='application/pdf' name='pdf' size='lg'></ld-icon>
<!-- <ld-icon data-upload-icon='text/rtf' name='placeholder'></ld-icon> -->
<img slot='icons' src='/assets/examples/file-upload-jpeg.svg' data-upload-icon='text/rtf' />
</ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
console.log('ldchoosefiles', ev.detail)
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
console.log(item)
newItem = uploadItems[item]
console.log(newItem)
newItem.state = 'uploading'
uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
uploadItem.state = 'cancelled'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload allow-pause select-multiple icons='{"rtf": "/assets/examples/file-upload-jpeg.svg"}'>
<ld-icon slot='icons' data-upload-icon='application/pdf' name='pdf' size='lg'></ld-icon>
<!-- <ld-icon data-upload-icon='text/rtf' name='placeholder'></ld-icon> -->
<img slot='icons' src='/assets/examples/file-upload-jpeg.svg' data-upload-icon='text/rtf' />
</ld-file-upload>
<!-- style="width: 30rem" -->
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldchoosefiles', async (ev) => {
console.log('ldchoosefiles', ev.detail)
uploadItems = ev.detail
ldUpload.updateUploadItems(uploadItems)
})
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
uploadItems = ev.detail
uploadingItems = []
for (let item in uploadItems) {
console.log(item)
newItem = uploadItems[item]
console.log(newItem)
newItem.state = 'uploading'
uploadingItems.push(newItem)
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'paused'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemcontinue', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'uploading'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
/* ldUpload.deleteUploadItem(uploadItem) */
uploadItem.state = 'cancelled'
ldUpload.updateUploadItem(uploadItem)
})
ldUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldUpload.addEventListener('ldfileuploadpausealluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'paused'
ldUpload.updateUploadItem(newItem)
}
})
ldUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
<ld-file-upload circular-progress allow-pause=false show-progress icons='{"pdf": "documents"}'></ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
})
})()
</script>
<button>Click</button>
<script>
;(() => {
const button = document.currentScript.previousElementSibling
button.addEventListener('click', async (ev) => {
console.log('click', ev.detail)
const fileList = [
{
state: 'uploading',
fileName: 'file1.png',
fileSize: 100000,
fileType: 'png',
progress: 50,
},
{
state: 'uploading',
fileName: 'file2.png',
fileSize: 200000,
fileType: 'png',
progress: 3,
},
{
state: 'pending',
fileName: 'file3.pdf',
fileSize: 100000,
fileType: 'pdf',
progress: 0,
},
{
state: 'uploaded',
fileName: 'file4.jpeg',
fileSize: 100000,
fileType: 'image/jpeg',
progress: 100,
},
{
state: 'upload failed',
fileName: 'file5.txt',
fileSize: 100000,
fileType: 'txt',
progress: 75,
},
{
state: 'paused',
fileName: 'file6.txt',
fileSize: 100000,
fileType: 'txt',
progress: 50,
},
{
state: 'cancelled',
fileName: 'file7.txt',
fileSize: 100000,
fileType: 'txt',
progress: 50,
},
{
state: 'uploaded',
fileName: 'filefilefilefilefilefilefilefilefilefilefilefilefilefile.txt',
fileSize: 100000,
fileType: 'txt',
progress: 50,
},
]
const ldFileUpload = button.previousElementSibling.previousElementSibling
ldFileUpload.updateUploadItems(fileList)
})
})()
</script>
<ld-file-upload start-upload></ld-file-upload>
<script>
;(() => {
const ldUpload = document.currentScript.previousElementSibling
ldUpload.addEventListener('ldfileuploadready', async (ev) => {
console.log('ldfileuploadready', ev.detail)
})
})()
</script>
<button>Click</button>
<script>
;(() => {
const button = document.currentScript.previousElementSibling
const ldFileUpload = button.previousElementSibling.previousElementSibling
button.addEventListener('click', async (ev) => {
console.log('click', ev.detail)
const fileList = [
{
state: 'uploading',
fileName: 'file1.png',
fileSize: 100000,
fileType: 'png',
progress: 50,
},
{
state: 'uploading',
fileName: 'file2.png',
fileSize: 200000,
fileType: 'png',
progress: 3,
},
{
state: 'pending',
fileName: 'file3.pdf',
fileSize: 100000,
fileType: 'pdf',
progress: 0,
},
{
state: 'uploaded',
fileName: 'file4.jpeg',
fileSize: 100000,
fileType: 'image/jpeg',
progress: 100,
},
{
state: 'upload failed',
fileName: 'file5.txt',
fileSize: 100000,
fileType: 'txt',
progress: 75,
},
]
ldFileUpload.updateUploadItems(fileList)
for (let i = 0; i <= 100; i++) {
ldFileUpload.updateUploadItem({state: 'uploading',
fileName: 'file3.pdf',
fileSize: 100000,
fileType: 'pdf',
progress: i,})
}
})
ldFileUpload.addEventListener('lduploaditempause', async (ev) => {
uploadItem = ev.detail
uploadItem.state = 'pending'
ldUpload.updateUploadItem(uploadItem)
})
ldFileUpload.addEventListener('lduploaditemremove', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldFileUpload.addEventListener('lduploaditemdelete', async (ev) => {
uploadItem = ev.detail
ldUpload.deleteUploadItem(uploadItem)
})
ldFileUpload.addEventListener('ldfileuploaddeleteall', async (ev) => {
ldUpload.deleteUploadItems()
})
ldFileUpload.addEventListener('ldfileuploadcanceluploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'pending'
ldUpload.updateUploadItem(newItem)
}
})
ldFileUpload.addEventListener('ldfileuploadcontinueuploads', async (ev) => {
uploadItems = ev.detail
for (let item in uploadItems) {
newItem = uploadItems[item]
newItem.state = 'uploading'
ldUpload.updateUploadItem(newItem)
}
})
})()
</script>
TODO:
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
allowPause |
allow-pause |
allowPause defines whether the user will be able to pause uploads. | boolean |
false |
circularProgress |
circular-progress |
circularProgress defines whether only the circular progress indicator will be shown during upload. | boolean |
false |
dirname |
dirname |
Name of form field to use for sending the element's directionality in form submission. | string |
undefined |
form |
form |
Associates the control with a form element. | string |
undefined |
maxSize |
max-size |
TODO: is used to display and validate maximum file size in Bytes | number |
undefined |
name |
name |
Used to specify the name of the control. | string |
undefined |
ref |
ref |
reference to component | any |
undefined |
selectMultiple |
select-multiple |
selectMultiple defines whether selection of multiple input files is allowed. | boolean |
false |
showProgress |
show-progress |
showTotalProgress defines whether the progress of uploading files will be shown, or only an uploading indicator. | boolean |
false |
startUpload |
start-upload |
startUpload defines whether upload starts immediately after choosing files or after confirmation. | boolean |
false |
value |
value |
The input value. | string |
undefined |
Event | Description | Type |
---|---|---|
ldchoosefiles |
CustomEvent<UploadItem[]> |
|
ldfileuploadcontinueuploads |
CustomEvent<UploadItem[]> |
|
ldfileuploaddeleteall |
CustomEvent<UploadItem[]> |
|
ldfileuploadpausealluploads |
CustomEvent<UploadItem[]> |
|
ldfileuploadready |
CustomEvent<UploadItem[]> |
deleteUploadItem(uploadItem: UploadItem) => Promise<void>
#Accepts a file from component consumer (name, progress, state etc.) and deletes the upload items.
Type: Promise<void>
deleteUploadItems() => Promise<void>
#Accepts a file list from component consumer (name, progress, state etc.) and deletes the upload items.
Type: Promise<void>
updateUploadItem(uploadItem: UploadItem) => Promise<void>
#Accepts a file from component consumer (name, progress, state etc.) and updates the upload item state.
Type: Promise<void>
updateUploadItems(uploadItems: UploadItem[]) => Promise<void>
#Accepts a file list from component consumer (name, progress, state etc.) and updates the upload items state.
Type: Promise<void>
graph TD;
ld-file-upload --> ld-choose-file
ld-file-upload --> ld-sr-only
ld-file-upload --> ld-circular-progress
ld-file-upload --> ld-typo
ld-file-upload --> ld-button
ld-file-upload --> ld-input-message
ld-file-upload --> ld-upload-progress
ld-choose-file --> ld-typo
ld-choose-file --> ld-button
ld-input-message --> ld-icon
ld-upload-progress --> ld-upload-item
ld-upload-item --> ld-icon
ld-upload-item --> ld-typo
ld-upload-item --> ld-tooltip
ld-upload-item --> ld-button
ld-upload-item --> ld-sr-only
ld-upload-item --> ld-progress
ld-upload-item --> ld-loading
ld-upload-item --> ld-input-message
ld-tooltip --> ld-sr-only
ld-tooltip --> ld-tooltip-popper
style ld-file-upload fill:#f9f,stroke:#333,stroke-width:4px
Built with StencilJS