Search code examples
javascriptjqueryajaxwistia

WISTIA upload stuck at 100%


I am using Wistia API for video upload. The code seems to be fine and according to Wistia docs but when I upload a file, it shows the progress going from 0 to 100%, but after reaching 100%, following error is logged in console by sentry:

Uncaught TypeError: this.wRemoteRequestor.post is not a function

This error points to the wistia js file at https://fast.wistia.com/assets/external/api.js on following line:

 this.wRemoteRequestor.post(i, {
       dataType: "json",
       success: function(e) {
           r.transformToCreateMediaResponse(e),
           e.data.originalUrl = "".concat(r.generateExtensionlessOriginalUrl(o), ".bin"),
           r.wistiaUploader._onSuccessRaw(e)
       },
       error: function(e) {
           r.wistiaUploader._onError(e)
       }
    })

Following is the code:

 <div id="wistia-upload-widget" style="height:312px; width:500px;"></div>

  // Wistia Video Setup
  window._wapiq = window._wapiq || [];
  _wapiq.push(function(W) {
    window.wistiaUploader = new W.Uploader({
      accessToken: "{{wistia_access_token}}",
      dropIn: "wistia-upload-widget",
      projectId: "{{wistia_project_id}}"
    });

    wistiaUploader.bind("uploadstart", function(file) {
      window.onbeforeunload = confirmLeaveBeforeUpload;
      console.log("Upload has began: ", file);
    });

    wistiaUploader.bind('uploadsuccess', function(file, media) {
      console.log("Upload succeeded.");
     $.ajax({
        type: "POST",
        url: '{% url 'video:create' %}',
        data: {key: media.id},
        success: function (res) {
            window.onbeforeunload = confirmLeaveBeforePublish;
            $('#upload-init').addClass('hide');
            $('#video').val(res.data.pk);
            $('#video-thumbnail').addClass('hide');
            $('#uploaded-video').removeClass('hide');
        },
      });
    });

    wistiaUploader.bind('uploadembeddable', function(file, media, embedCode, oembedResponse) {
      console.log("Embeddable:", media);
    });

    wistiaUploader.bind("uploadfailed", function(file, errorResponse) {
      console.log("Upload failed:", errorResponse.error);
      alert("Unfortunately, your video failed to upload. Please give this information to support: " + errorResponse.error);
      window.onbeforeunload = null;
    });
  });

Note: Access token and project_id are coming from django and rightly placed.


Solution

  • Looks like it was an issue on Wistia's end due to an update according to their support. Always seemed like that as issue was in their api.js file. It works now.