Skip to main content

Upload from your website

The upload API can be used to provide upload functionality to your content providers on your website. The API is constructed to allow a secure method to allow a third-party (i.e. someone you cant trust with your account) to add videos directly to your vdocipher account in a controlled manner.

Use case: If you are an e-learning platform, you can create an access controlled dashboard for your teachers. The teachers can upload videos directly to your vdocipher account. The process can be thoroughly white labelled such that the teacher won't notice any vdocipher page or logo anywhere.

Setup: Assuming you have a backend for your website or mobile app that you have full control on. The upload process consists of two-step API. In the first step, you have to obtain upload credentials for your account. This process creates an empty video entity in your dashboard account with status "pre-upload". First API is called from the server and the second API is called from the web application.

Checklist for implementation​

1. Create AJAX endpoint​

You need to create an ajax endpoint in your backend to do the "credentials API". Read the here for more information and sample code. Note that this API should NEVER be called from client side javascript or mobile app. This requires your vdocipher API secret key which must not be part of the client-side codebase in any format.

The above ajax endpoint verify that the content-uploader user is currently logged-in. It should also check if the logged in user has authority to upload videos in your account.

Sample specifications for AJAX endpoint:​

Method: POST

Authorization: required

Response Headers:

content-type: application/json

Response Body:

Return response.clientPayload obtained from the API call as described here.

2. Setup an upload library on your front-end​

On your front-end, it is a good idea to use one of the available javascript to make things look good. These libraries will help you create a continuous experience for your users and show upload progress. Some popular upload libraries are:

  1. Dropzone (generic)
  2. Blueimp (jquery)
  3. Fine-uploader (generic + react)
  4. HTML Form

Make sure you understand the library before using it. All of these provide a lot of configuration options. Choose the one based on your requirements. We have provided basic sample code for one of the above. Please consult the library documentation to troubleshoot javascript issues and further customizations.

Select one from the menu on the top-right of this page to view sample code.

3. Setup the HTML page​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Sample dropzone upload</title>
    <link rel="stylesheet"
          href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
  </head>
  <body>
    <div id="myId" class="dropbox">Upload videos</div>
    <script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
    <script src="./myapp.js"></script>
  </body>
</html>

4. Obtain credentials from the AJAX endpoint​

  • Replace the below url with your ajax backend URL
  • use data argument to send contexual information to your AJAX URL. These contexual information can be saved in your DB
let getCredentials = function (data, callback) {
  fetch('./upload.php', {
    method: 'POST',
    body: data,
  })
    .then((response) => response.json())
    .then((uploadCreds) => {
      callback(uploadCreds);
    })
    .catch((e) => done(e.message));
};

5. Setup upload methods​

Use Dropzone configuration to add the workflow to upload to correct URL

accept: A function that gets a file and a done function as parameters. If the done function is invoked without arguments, the file is "accepted" and will be processed. If you pass an error message, the file is rejected, and the error message will be displayed.

sending: Called just before each file is sent. Use this to add all required AWS parameters.

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(
  "div#myId",
  {
    url: "#",
    maxFilesize: 5120, // MB
    acceptedFiles: 'video/*',
    accept: function(file, done) {
      getCredentials({}, () => {
        this.awsOptions = uploadCreds;
        this.options.url = this.awsOptions.uploadLink;
        done();
      })
    init: function() {
      this.url = '#/sdfjsldf'
      this.on("sending", function(file, xhr, formData) {
        formData.append("x-amz-credential", this.awsOptions['x-amz-credential']);
        formData.append("x-amz-algorithm", this.awsOptions['x-amz-algorithm']);
        formData.append("x-amz-date ", this.awsOptions['x-amz-date']);
        formData.append("x-amz-signature", this.awsOptions['x-amz-signature']);
        formData.append("key", this.awsOptions['key']);
        formData.append("policy", this.awsOptions['policy']);
        formData.append("success_action_status", 201);
        formData.append("success_action_redirect", "");
      });
    }
  }
);

Download the complete source for Dropzone with PHP

Once the upload finishes successfully on the web app, you can update your database via ajax to mark the entity as "processing" or something similar. Note that videos are not ready immediately. You can NOT playback the uploaded video immediately after upload. The video processing will begin in the background. Read about hooks to update your database when the video is ready. Once the video is ready, your course content is ready to be reviewed or provided to the viewers.

Note​

  1. Maximum upload limit for this API is 5GB. You should handle the error if a user is trying to upload a higher file size. If it is required, you should ask your content providers to pre-process larger files to under 5GB before starting the upload.
  2. The second step of the above process happens to AWS servers. You can read AWS's documentation to learn more.

Next: Tracking when the video is ready