Suélen O
Suélen O

Reputation: 1

How to Skip Already Uploaded Chunks in Dropzone.js Before Sending to Server?

I am using Dropzone.js to handle file uploads with chunking enabled. I want to implement a mechanism to skip uploading chunks that have already been successfully sent to the server. Currently, my upload API (http://localhost:7254/api/UploadChunk) is being called for all chunks, including those already uploaded, which is unnecessary.

The goal is to avoid making the upload request (sending event) for chunks that were previously uploaded and simply skip to the next one, while ensuring Dropzone.js behaves correctly (e.g., updating progress, marking the upload as complete, etc.).

I added logic in the sending event to check if a chunk index is in a list of already uploaded chunks. When a chunk is detected as uploaded, I emit uploadprogress and success events manually for the file, and I call xhr.abort() to prevent the upload request. However, this is not working!

 myDropzone.on("sending", function (file, xhr, formData) {

     (async () => {
         try {
             
             const chunkIndex = parseInt(formData.get("dzchunkindex"), 10); // Obter índice correto do chunk
             const totalChunks = file.upload.totalChunkCount; // Número total de chunks

             if (uploadedChunks.includes(chunkIndex)) {
                 console.log(`Chunk ${chunkIndex} já enviado. Pulando.`);

                 // Indicar que o chunk foi enviado sem fazer a requisição
                 myDropzone.emit("uploadprogress", file, 100, file.size);
                 if (chunkIndex === totalChunks - 1) {
                     // Se for o último chunk, emitir sucesso
                     myDropzone.emit("success", file, "Upload completo");
                     myDropzone.emit("complete", file);
                 }

                 // Abortar a requisição do chunk
                 xhr.abort();
                 return; 

             } 
             
             console.log(`Chunk ${chunkIndex} não enviado. Continuando.`);

             if (!file.sasToken) {
                 try {
                     const response = await fetch("/api/upload/get-sas-token"); // Chamada para obter o SAS Token
                     if (!response.ok) {
                         throw new Error("Erro ao obter o SAS Token.");
                     }
                     const data = await response.json();
                     file.sasToken = data.SasToken; // Salvar o token no objeto do arquivo
                     console.log("SAS Token obtido com sucesso:", file.sasToken);
                 } catch (error) {
                     console.error("Erro ao obter SAS Token:", error);
                     return this.emit("error", file, "Erro ao obter SAS Token.");
                 }
             }


             console.log("Enviando chunk", chunkIndex, "de", totalChunks);

             // Configurar a URL com o SAS Token
             myDropzone.options.url = `${url}?${file.sasToken}`;

             // Cabeçalhos HTTP
             //xhr.setRequestHeader("Content-Type", "multipart/form-data");
             xhr.setRequestHeader("X-File-Name", md5(file.name));
             xhr.setRequestHeader("X-File-Chunk-Index", chunkIndex);
             xhr.setRequestHeader("X-File-Chunk-Total", totalChunks);
             xhr.setRequestHeader("X-Upload-Id", file.upload.uuid);
             
         } catch (error) {
             console.error("Erro no evento sendfile:", error);
             myDropzone.emit("error", file, "Erro no envio do arquivo.");
         }
     })();
     
 });

Upvotes: -1

Views: 28

Answers (0)

Related Questions