Vimeo CORS Issue

Question

I am trying to upload a video to Vimeo via Ajax but I am running into CORS problems with Firefox.

Here is the code I am using. It is only at the last stage of posting the file does CORS protection prevent the upload.

I have checked the headers and Cross Origin is set correctly.

$.ajax({
  url:'https://api.vimeo.com/me',
  crossDomain:true,
  headers:{Authorization: 'bearer ',Accept:'application/vnd.vimeo.*+json;version=3.2'},
  error:function(){
          videoError('Couldn\'t get a quota');
  },
  success:function(uploadQuota){
        if(uploadQuota.upload_quota.space.free > 0 && (uploadQuota.upload_quota.quota.sd == true || uploadQuota.upload_quota.quota.hd == true)){

        //Get Upload Ticket
        $.ajax({
          url:'https://api.vimeo.com/me/videos',
          data:{type:'POST'},
          type:'POST',
          dataType:'json',
          crossDomain:true,
          headers:{Authorization: 'bearer ',Accept:'application/vnd.vimeo.*+json;version=3.2'},
          error:function(){
                  videoError('Couldn\'t get a ticket');
          },
          success:function(uploadTicket){
            if(uploadTicket.ticket_id != ''){
                //Upload File
                var videoData = new FormData();
                $.each($('#video_upload')[0].files, function(i, file) {
                        videoData.append('file_data', file);
                });

                $.ajax({
                        url:uploadTicket.upload_link_secure,
                        type:'POST',
                        headers:{Authorization: 'bearer ',Accept:'application/vnd.vimeo.*+json;version=3.2'},
                        data: videoData,

                        cache: false,
                        contentType: 'multipart/form-data',
                        processData: false,
                        crossDomain:true,
                        //dataType:'jsonp',
                        error:function(){
                                videoError('Error uploading video. Please contact FDN with the ticket id:'+uploadTicket.ticket_id);
                        },
                        success:function(uploadData,status){
                                //Copy id to text box
                        }
                    });
            } else {
                    //If none, process error
            }
        }
    });
  } else {
              //If none, process error
      }
  }                                                                                                                                                                                         
});

Is there anything obvious that I have missed or can try?

Answer 1

Short Answer: Vimeo POST uploads were not designed for client side JavaScript. The PUT upload system has 100% support for CORS.

Long Answer:

Vimeo POST uploads were developed to provide an incredibly easy upload experience. We give you a form. You put the form in the html of your page, The user uses the form, and everything is set. This does not support progress bars. This is not resumable.

When uploading videos, we must perform some post-processing before the video will become available. The current POST upload system handles this automatically, by redirecting the client after the upload is complete. Unfortunately there are some problems with CORS and redirects (I'm having trouble finding the details, but if I remember right the spec states to handle certain redirects as an error case).

Right now you must complete the upload yourself. We are working on improving this, but for the moment you have to find the url in the "location" header of the response from your POST. Make a GET request to this url and your upload will be complete.

Vimeo PUT uploads were designed as the fully featured advanced upload system. They are resumable, the streaming design easily supports progress bars. You can query the status of the upload, and start and stop everything on command. CORS is 100% supported. This will require use of the HTML5 file object, which has limited support for ie 9 and lower.

[Edit] There is now an unofficial Client side video upload script for the streaming workflow. You can find it here: https://github.com/websemantics/vimeo-upload

Answer 2

As @Dashron mentioned, the "Simple HTTP POST uploading" should be used for simple cases. For example, if you want to resume an upload you should use the "Resumable HTTP PUT uploads".

However, there are two pieces of information missing on almost all references to similar problems that I would like to share.

1) Be Careful when using vimeo-upload

As @PaulLoomijmans mentioned in a comment to @Dashron the vimeo-upload (github.com/websemantics/vimeo-upload) requires you to expose your token, which is not good for security reasons.

I actually just left a suggestion in the repository that it would still be very useful if we were able to use it with an upload_url from vimeo since then we would not have to expose our token.

2) You can check upload progress using the POST upload method

If like myself, you just want to be able to report to the user the upload progress while using the simplified upload process of the "Simple HTTP POST uploading" you can actually do so without the PUT method.

Even though not clearly documented, when using the "Simple HTTP POST uploading" you also have an "upload_link_secure" in the initial response (https://developer.vimeo.com/api/upload/videos#generate-an-upload-ticket) and you can use this as you would to with the "Resumable HTTP PUT uploads" to check your upload progress.

As such, even when using "Simple HTTP POST uploading" you can follow the information on "verify the upload" from "Resumable HTTP PUT uploads" (here: https://developer.vimeo.com/api/upload/videos#verify-the-upload). Probably the resume functionality described there will not work but you can check the upload progress and show it to the user while the upload is being made. I actually implemented it to show a progress bar in my webapp.

I hope this helps someone, as I went back and forth between the two upload methods due to the limitations/complexity that each entails.