Cloudinary uploader not working with large videos

Question

I'm generating an input tag with Java to upload videos directly from the browser, with the Cloudinary API, which works fine with small videos, but it doesn't work with a 50 MB one.

This is the code generating the input tag:

String html = cloudinary.uploader().imageUploadTag("file", options, htmlOptions);

Map options = ObjectUtils.asMap("resource_type", "video");
    options.put("callback", "/cloudinary_cors.html");
    options.put("eager", eager);
    options.put("eager_async", true);
    options.put("tags", videoTags);
    options.put("use_filename", true);

Map htmlOptions = ObjectUtils.asMap();
    htmlOptions.put("id", "videoInput");
    htmlOptions.put("class", "upload");

That's an example of the input tag generated:

<input type="file" name="file" 
       data-url="https://api.cloudinary.com/v1_1/rentalwebs/video/upload" 
       data-form-data="{"eager":"c_scale,h_720,w_1280","signature":"xxxfb0c461dxxx",
       "api_key":"xxx1647231xxx","eager_async":true,
       "callback":"/cloudinary_cors.html","tags":"Demo Website,1,Villa Demo 2",
       "use_filename":true,"timestamp":"1548357724"}" 
       data-cloudinary-field="file" class="cloudinary-fileupload upload" id="videoInput">

And finally, those are the .js scripts attached to the page with the input tag:

<script th:src="@{/js/jquery.ui.widget.js}" type='text/javascript'></script>
<script th:src="@{/js/load-image.all.min.js}" type='text/javascript'></script>
<script th:src="@{/js/canvas-to-blob.min.js}" type='text/javascript'></script>
<script th:src="@{/js/jquery.iframe-transport.js}" type='text/javascript'></script>
<script th:src="@{/js/jquery.fileupload.js}" type='text/javascript'></script>
<script th:src="@{/js/jquery.fileupload-process.js}" type='text/javascript'></script>
<script th:src="@{/js/jquery.fileupload-image.js}" type='text/javascript'></script>
<script th:src="@{/js/jquery.fileupload-validate.js}" type='text/javascript'></script>
<script th:src="@{/js/jquery.cloudinary.js}" type='text/javascript'></script>


$(document).ready(function() {
              if($.fn.cloudinary_fileupload !== undefined) {
                $("input.cloudinary-fileupload[type=file]").cloudinary_fileupload();
                }
            });

I may be missing something, which I've been unable to find. There is some more code, dealing with the uploading process and the result, but I guess the problem occurs before, among the code I have attached at this question.

Can you share what the error message is that you are receiving from Cloudinary? — Daniel Mendoza
At the browser side it doesn't give any error message, or at least I haven't found it. I have a code that gets a preview image from the video and after the image appears on the screen, nothing else happens. I've tested it without the preview image code, with the same result. I guess the uploading process, never begins with those large videos. — Aleix Alcover

Daniel Mendoza Daniel Mendoza · Accepted Answer · 2019-02-05T00:36:28

It looks like you just need to add the parameter chunk_size to your options map in Java. This should pass the chunk_size to blueimp which the javascript cloudinary_fileupload is built on.

I would add a chunk size of 20 MB, e.g. options.put("chunk_size", 20000000);

Cloudinary uploader not working with large videos

1 Answers