Token must have hybris.media_manage scope


Step 1. Create file

Step 2. Upload file
Step 3. Commit file
<div class="form-group">
  <label>Token</label>
  <input type="text" class="form-control" id="tokenManagePublic" placeholder="e.g. 105-7ffad906-f517-442d-bfff-9010530151f4" />
  <span class="help-block">Token must have <strong>hybris.media_manage</strong> scope</span>
</div>
<br />
<br /> Step 1. Create file
<div class="form-group">
  <input type="submit" class="form-control" id="createFilePublic" value="Create file" style="width:20%" />
  <label>Content type</label>
  <input id="contentTypePublic" class="form-control" type="text" placeholder="binary/octet-stream" style="width: 100%" value="binary/octet-stream" required/>
  <span class="help-block" id="fileCreatedSuccess" style="color:#18bc33;display:none">File created successfully.<br />File id: <strong><span id="fileCreatedId"></span></strong>
  </span>
  <span class="help-block" id="fileCreatedFailure" style="color:#FF0000;display:none">File could not be created.</span>
</div>
<br/> Step 2. Upload file
<form id="formPublic" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    <label>Upload link</label>
    <input id="urlPublic" class="form-control" type="text" placeholder="https://s3.amazonaws.com/..." style="width: 100%" required/>
  </div>
  <div class="form-group">
    <label>File</label>
    <input id="formFilePublic" name="file" type="file" required/>
    <span class="help-block" id="fileUploadSuccess" style="color:#18bc33;display:none">File uploaded successfully.</span>
    <span class="help-block" id="fileUploadFailure" style="color:#FF0000;display:none">File could not be uploaded.</span>
  </div>
  <div class="form-group">
    <button type="submit" class="form-control" style="width:20%">Upload</button>
  </div>
</form>

Step 3. Commit file
<div class="form-group">
  <label>File ID to commit</label>
  <input type="text" class="form-control" id="commitFileIdPublic" placeholder="e.g. 517297a70f6f6b0a2f783d93" />
  <span class="help-block" id="fileCommitSuccess" style="color:#18bc33;display:none">File commited successfully.</span>
  <span class="help-block" id="fileCommitFailure" style="color:#FF0000;display:none">File could not be commited.</span>
</div>
<button id="commitPublic" class="form-control" style="width:20%">Commit</button>
$(function() {
  $('#createFilePublic').on('click', createFile);
  $('#formPublic').on('submit', sendFile);
  $('#commitPublic').on('click', commitFile);
});

function createFile() {
  $.ajax({
      type: 'POST',
      beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Bearer " + $("#tokenManagePublic").val());
      },
      dataType: "json",
      data: JSON.stringify({"Content-Type": $("#contentTypePublic").val()}),
      contentType: "application/json",
      url: "https://api.yaas.io/hybris/media/v2/files"
    })
    .success(function(data) {
      $("#fileCreatedId").text(data.id);
      $("#commitFileIdPublic").val(data.id);
      $("#fileCreatedSuccess").show();
      $("#urlPublic").val(data.uploadLink);
    })
    .error(function() {
      $("#fileCreatedFailure").show();
    });
}

function sendFile(e) {
  e.preventDefault();

  // get the reference to the actual file in the input
  var theFormFile = $('#formFilePublic')[0].files[0];

  $.ajax({
      type: 'PUT',
      url: $("#urlPublic").val(),
      // Content type must much with the parameter you signed your URL with
      contentType: $("#contentTypePublic").val(),
      // this flag is important, if not set, it will try to send data as a form
      processData: false,
      // the actual file is sent raw
      data: theFormFile
    })
    .success(function() {
      $("#fileUploadSuccess").show();
    })
    .error(function() {
      $("#fileUploadFailure").show();
    });
  return false;
}

function commitFile() {
  $.ajax({
      type: 'POST',
      beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Bearer " + $("#tokenManagePublic").val());
      },
      url: "https://api.yaas.io/hybris/media/v2/files/" + $("#commitFileIdPublic").val() + "/commit"
    })
    .success(function() {
      $("#fileCommitSuccess").show();

    })
    .error(function() {
      $("#fileCommitSuccess").show();
    });
}