Chunk Uploading on REST API failed with the error message "X-Cld-Error: Chunk size doesn't match upload size: 10240000 - 36592771"

Follow

Nishimori Daisuke

• May 29, 2020 09:12

I tried to implement a sample of Chunk Uploading on REST API.

I ran into the error "X-Cld-Error: Chunk size doesn't match upload size: 10240000 - 36592771".

I understand this means the binary file which I send has wrong size somehow.
But, I could not find my mistake in my source code.

 

```

const form = document.getElementById("form");

const input = document.getElementById("fileInput")

form.addEventListener("submit", (e) => {

  e.preventDefault();

  constfile = input.files[0];

  readBlob(file, 1024 * 1000 * 10);

})

const readBlob = (file, chunkSize) => {

  chunkSize = chunkSize || 1024 * 1000 * 10

  const fileSize = file.size

  const chunkLength = Math.ceil(file.size / chunkSize)

  for (var i = 0; i < chunkLength; i++) {

    console.log("ChunkStart");

    console.log(i);

    chunkUpload(file, i, chunkSize, upload, fileSize)

  }

}

const chunkUpload = (file, index, chunkSize, upload, fileSize) => {

  const reader = newFileReader();

  const start = index * chunkSize;

  const stop = start + chunkSize < fileSize ? start + chunkSize : fileSize;

  const blob = file.slice(start, stop);

  reader.onloadend = async (event) => {

    if (event.target.readyState == FileReader.DONE) {

      const blobLoaded = event.target.result;

      const blobArrayBuff = newUint8Array(blobLoaded)

      upload(blobArrayBuff, start, stop - 1, fileSize)

    }

  }

  reader.readAsArrayBuffer(blob);

}

const upload = (blob, start, stop, fileSize) => {

  const timestamp = 1590740923

  const signature = "xxxxxxxxxxxxxx"

  const contentRange = `bytes ${start}-${stop}/${fileSize}`

  const headers = {

    'Content-Type':'multipart/form-data',

    "X-Unique-Upload-Id":timestamp,

    "Content-Range":`${contentRange}`

  }

  let data = newFormData();

  data.append("file", blob); // I suspect that this code causes an error, but cannot understand the reason.

  data.append("api_key", "xxxxxxxxxxx")

  data.append("timestamp", timestamp)

  data.append("resource_type", "video")

  data.append("signature", signature)

  axios.post("https://api.cloudinary.com/v1_1/noiab/video/upload", data, { headers:headers })

}

``` 

 

# Information
cloud_name: NOIAB

the Request

```

POST /v1_1/noiab/video/upload HTTP/1.1
Host: api.cloudinary.com
Connection: keep-alive
Content-Length: 36593362
Content-Range: bytes 0-10239999/26789510
Accept: application/json, text/plain, */*
X-Unique-Upload-Id: 1590740923
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIB9FeoYI9xJ0kAWI
Origin: http://localhost:8080
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8

```

 

the Reponse

```

HTTP/1.1 400 Bad Request Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS Access-Control-Allow-Origin: http://localhost:8080 Access-Control-Max-Age: 1728000 Cache-Control: no-cache Content-Type: application/json; charset=utf-8 Date: Fri, 29 May 2020 08:52:48 GMT Server: cloudinary Status: 400 Bad Request X-Cld-Error: Chunk size doesn't match upload size: 10240000 - 36592771 X-Request-Id: fca706b88be277f6d9cf4c93c2ef6386 X-UA-Compatible: IE=Edge,chrome=1 X-XSS-Protection: 1; mode=block Content-Length: 81 Connection: keep-alive

```

0

• 

  Stephen Doyle

  • May 29, 2020 15:37

  Hello Nishimori,

  I can see that you also opened a support request about the same issue - I'll reply to that support request shortly

  Best Regards,

  Stephen

  -1

  Comment actions Permalink
• 

  Joel Levi Hernández Fernández

  • May 06, 2022 22:49

  Hey Stephen,

  Would be better to reply here so that other people who also have this issue can find a solution right away. 

  What was the solution?

  0

  Comment actions Permalink
• 

  Aleksandar Kostadinov

  • May 07, 2022 08:10
  • Edited

  Hi Joel,

  The issue was that the chunked upload request being made was not quite right in terms of the values passed as part of the Content-Range header. In this case, the entire file was being sent but the Content-Range header says that a 10MB chunk was to be expected.

  Please see the following example JSFiddle that has a working chunked-upload solution in pure JavaScript:
  https://jsfiddle.net/leptians/hLajmbpf/

  If you're running into any issues please share more details such as your code and the exact error message from the API and we can assist.

  0

  Comment actions Permalink

Please sign in to leave a comment.