Chunk Upload Progress Event Issues!

[vinodkhandelwal]

I am trying to upload 2 files with chunk feature and using different events to use the progress event. But i see some discrepancy in the progress detail. Please see below the log message that i am getting.

Total size to upload:21218992
index.tsx:203 CHUNK_EVENTS.CHUNK_START -> 1 Chunk Start of 1
index.tsx:189 UPLOADER_EVENTS.ITEM_PROGRESS -> T_Prop_Bicycle_BC.jpg upload Progress: 100% 
index.tsx:215 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 248223
index.tsx:203 CHUNK_EVENTS.CHUNK_START -> 1 Chunk Start of 3
index.tsx:189 UPLOADER_EVENTS.ITEM_PROGRESS -> test20mb2.fbx upload Progress: 40.00359058380127% 
index.tsx:215 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 8389361
index.tsx:203 CHUNK_EVENTS.CHUNK_START -> 2 Chunk Start of 3
index.tsx:189 UPLOADER_EVENTS.ITEM_PROGRESS -> test20mb2.fbx upload Progress: 100% 
index.tsx:215 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 25167330
index.tsx:203 CHUNK_EVENTS.CHUNK_START -> 3 Chunk Start of 3
index.tsx:189 UPLOADER_EVENTS.ITEM_PROGRESS -> test20mb2.fbx upload Progress: 100% 
index.tsx:215 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 37750995  

Here are the issue that i am seeing -

• Getting upload progress as 100% early even when all chunks are not upload.
• Item.loaded value is way higher than total file size upload. In my example i am uploading total 21218992 only.
  I am using event handlers as below -

uploader.on(UPLOADER_EVENTS.ITEM_PROGRESS, (item) => {
      console.log(`UPLOADER_EVENTS.ITEM_PROGRESS -> ${item.file.name} upload Progress: ${item.completed}% `);      
    });
uploader.on(CHUNK_EVENTS.CHUNK_START, ({ chunk, totalCount }) => {
      console.log(`CHUNK_EVENTS.CHUNK_START -> ${chunk.index + 1} Chunk Start of ${totalCount}`);     
    });

    uploader.on(CHUNK_EVENTS.CHUNK_FINISH, ({item}) => {
      console.log(`CHUNK_EVENTS.CHUNK_FINISH -> item.loaded ${item.loaded}`);     
    });

Am I using these event in a wrong way? Please help.

[yoavniran]

@vinodkhandelwal please share how you are initializing the uploader instance
preferably with a reproducing codesandbox/codepen or with a GH repo

[yoavniran]

also, does the issue occur when you're uploading just one file or only with multiple?

[vinodkhandelwal]

@yoavniran This is happening even with single file. Here is the whole code, how i am using in react project -

import React, { useState } from "react";
import createUploader, { UPLOADER_EVENTS } from "@rpldy/uploader";
import getChunkedEnhancer, { CHUNK_EVENTS } from "@rpldy/chunked-sender";

function App() {
  const [fields, setFields] = useState("");
  const [fileName, setFileName] = useState(null);

  const myChunkedOptions = {
    chunkSize: 10 * 1024 * 1024,
  };
  const chunkedEnhancer = getChunkedEnhancer(myChunkedOptions);

  const onSubmit = () => {
    const uploader = createUploader({
      autoUpload: false,
      grouped: false,
      destination: { url: "http://localhost:3001"},
      params: { name: "field"},
      enhancer: chunkedEnhancer,
    });

    uploader.add([fileName], {params: { name: "textures" }});
   // uploader.add(fileName2, {params: { name: "asset" }});

    uploader.on(UPLOADER_EVENTS.ITEM_START, (item) => {
      console.log(`item ${item.file.name} started uploading`);
    });

    uploader.on(UPLOADER_EVENTS.ITEM_PROGRESS, (item) => {
      console.log(`item ${item.file.name} Item Progress ${item.completed}% uploaded`);
    });

    uploader.on(UPLOADER_EVENTS.ITEM_FINISH, (item) => {
      console.log(`item ${item.id} Item Finish uploading`);
    });

    uploader.on(UPLOADER_EVENTS.ITEM_FINALIZE, (item) => {
      //console.log(`item ${item.id} Item Final uploading`);
    });

    uploader.on(CHUNK_EVENTS.CHUNK_START, ({ chunk, totalCount }) => {
      console.log(`${chunk.index + 1} Chunk Start of ${totalCount}`);
    });

    uploader.on(CHUNK_EVENTS.CHUNK_FINISH, ({item}) => {
      console.log(`CHUNK_EVENTS.CHUNK_FINISH -> item.loaded ${item.loaded}`);
    });

    uploader.upload();
  };

  const onFieldChange = (e) => {
    setFields(e.currentTarget.value);
  };

  const onFileChange = (event) => {
    setFileName(event.target.files[0]);
  };

  // const onFileChange2 = (event) => {
  //   // Update the state
  //   setFileName2(event.target.files[0]);
  // };

  return (
    <form>
      <br />
      <input onChange={onFieldChange} id="field-name" type="text" placeholder="your name" />
      <br />
      <input onChange={onFileChange} id="field-age" type="file" placeholder="browse File" />

      {/* <br />
      <input onChange={onFileChange2} id="field-age" type="file" placeholder="browse File" /> */}

      <button id="form-submit" type="button" onClick={onSubmit} disabled={!fileName} >
        Submit Form
      </button>
    </form>
  );
}

export default App;

with this code if i upload a single file of 100MB size of 10MB chunks, below is what i get -

1 Chunk Start of 10
App.js:31 item StorageExplorer.exe Item Progress 10.2891715893328% uploaded
App.js:47 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 10486066
App.js:43 2 Chunk Start of 10
App.js:31 item StorageExplorer.exe Item Progress 30.86721451368889% uploaded
App.js:47 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 31457892
App.js:43 3 Chunk Start of 10
App.js:31 item StorageExplorer.exe Item Progress 51.445257438044976% uploaded
App.js:47 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 52429718
App.js:43 4 Chunk Start of 10
App.js:47 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 52429718
App.js:43 5 Chunk Start of 10
App.js:31 item StorageExplorer.exe Item Progress 82.31217169742435% uploaded
App.js:47 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 83887304
App.js:43 6 Chunk Start of 10
App.js:31 item StorageExplorer.exe Item Progress 100% uploaded
App.js:47 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 104859130
App.js:43 7 Chunk Start of 10
App.js:47 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 104859130
App.js:43 8 Chunk Start of 10
App.js:31 item StorageExplorer.exe Item Progress 100% uploaded
App.js:47 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 136316716
App.js:43 9 Chunk Start of 10
App.js:31 item StorageExplorer.exe Item Progress 100% uploaded
App.js:47 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 157189932
App.js:43 10 Chunk Start of 10
App.js:47 CHUNK_EVENTS.CHUNK_FINISH -> item.loaded 157189932
App.js:35 item batch-5.item-40 Item Finish upload

[yoavniran]

thanks @vinodkhandelwal
im currently on vacation so ill have a look at this when I get back in a few days

[yoavniran]

@vinodkhandelwal 0.13.3 is now out.
Should solve your issue. Please report if there are still issues