CODEWITHSUNDEEP
cloudinary
Aleix Alcover
Aleix Alcover

Reputation: 649

Cloudinary uploader not working with large videos

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.

Upvotes: 0

Views: 490

Answers (1)

Daniel Mendoza
Daniel Mendoza

Reputation: 497

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);

Upvotes: 1

Related Questions