I want to implement as an external uploader in LiveView a multipart upload to S3 using pre-signed urls.
From the LiveView side I managed to make the request to start the upload and also generate all the necessary urls to upload each chunk. All this is generated in the function that I pass as an external
parameter to allow_upload
.
Within my JS code to perform the upload I do the following:
Uploaders.MultipartS3 = (entries, onViewError) => {
entries.forEach(async (entry) => {
const { meta, file } = entry
const chunkSize = 5 * 1024 * 1024
const numChunks = meta.total_chuncks;
const uploadRequests = [];
console.log(numChunks)
for (let i = 1; i <= numChunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end);
const url = meta.urls[i - 1];
const xhr = new XMLHttpRequest();
xhr.open("put", url, true);
uploadRequests.push(new Promise((resolve, reject) => {
xhr.onload = () => {
if (xhr.status === 200) {
resolve({ "Part": i, "ETag": xhr.getResponseHeader('ETag') });
} else {
reject(new Error(`Failed to upload chunk ${i} of ${numChunks}: ${xhr.statusText}`));
}
};
xhr.onerror = () => {
reject(new Error(`Failed to upload chunk ${i} of ${numChunks}: ${xhr.statusText}`));
};
xhr.send(chunk);
}));
}
await Promise.all(uploadRequests);
});
};
With that I can make the requests for each chunk, but I would have to send the results of each request (Part and Etag) returned to the LiveView component to be able to make the request that completes the multipart upload
Is it possible from this code to communicate with the component in some way?
Thanks!