i'm using resumable js to upload video on JWPlayer in laravel wepapp

Question

i'm using resumable js to upload video on JWPlayer in laravel wepapp. when i upload video. it uploads only first chunk of video on jwp dashboard then return below error in network tab.

a:4:{s:6:"status";s:5:"error";s:7:"message";s:72:"Uploads for the media files with the status `processing` are not allowed";s:4:"code";s:16:"PermissionDenied";s:5:"title";s:17:"Permission Denied";}

since last two i'm looking for solution. see below my resumable js code. i passed 1mb chunk on jwp server to store. but after first chunk it says "Uploads for the media files with the status processing are not allowed" as i mentioned full error message above.

var $ = window.$; // use the global jQuery instance

var $fileUpload = $('#resumable-browse');
var $fileUploadDrop = $('#resumable-drop');
var $uploadList = $("#file-upload-list");

if ($fileUpload.length > 0 && $fileUploadDrop.length > 0) {
    console.log($fileUpload.data('url'));
  var resumable = new Resumable({
    // Use chunk size that is smaller than your maximum limit due a resumable issue
    // https://github.com/23/resumable.js/issues/51
    chunkSize: 1 * 1024 * 1024,
    // 1MB
    method: "POST",
    simultaneousUploads: 1,
    testChunks: false,
    throttleProgressCallbacks: 1,
    // Get the url from data-url tag
    target: $fileUpload.data('url'),
     headers: {
       "X-Session-Id":$("#jwToken").val(),
    },
    // Append token to the request - required for web routes

    query: {
      _token: $('input[name=_token]').val()
    }
  }); // Resumable.js isn't supported, fall back on a different method

  if (!resumable.support) {
    $('#resumable-error').show();
  } else {
    // Show a place for dropping/selecting files
    $fileUploadDrop.show();
    resumable.assignDrop($fileUpload[0]);
    resumable.assignBrowse($fileUploadDrop[0]); // Handle file add event

    resumable.on('fileAdded', function (file) {
      // Show progress pabr
      $uploadList.show(); // Show pause, hide resume

      $('.resumable-progress .progress-resume-link').hide();
      $('.resumable-progress .progress-pause-link').show(); // Add the file to the list

      $uploadList.append('<li class="resumable-file-' + file.uniqueIdentifier + '">Processing <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span>');
      $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName); // Actually start the upload

      resumable.upload();
    });
    resumable.on('fileSuccess', function (file, message) {
      // Reflect that the file upload has completed
      $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html('(completed)');
    });
    resumable.on('fileError', function (file, message) {
      // Reflect that the file upload has resulted in error
      $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html('(file could not be uploaded: ' + message + ')');
    });
    resumable.on('fileProgress', function (file) {
      // Handle progress for both the file and the overall upload
      $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html(Math.floor(file.progress() * 100) + '%');
      $('.progress-bar').css({
        width: Math.floor(resumable.progress() * 100) + '%'
      });
    });
  }
}

/***/ }),

Answer 1

I'd make sure when you created the video that you specified the multipart upload method.

Also make sure the location you're trying to upload to is the one returned in the create call (it should be going to the /v1/videos/upload/resumable endpoint). This guide should give more details about the process.