Make Transloadit ignore one file and accept another?

Transloadit
1

I’ve got a form that I would like to upload a video to AWS with Transloadit, and a text document to Salesforce without Transloadit. Is it possible to tell Transloadit to completely ignore the text document? Salesforce can handle the text document fine if we remove the video upload, but with the video it throws errors.

This is our assembly code.

{
"steps": {
"encode": {
  "use": ":original",
  "robot": "/video/encode",
  "preset": "android",
  "ffmpeg": {
    "t": 180
  },
  "ffmpeg_stack": "v2.2.3"
},
"files": {
  "use": ":original",
  "robot": "/file/filter",
  "accepts": [
    [
      "${file.mime}",
      "regex",
      "video"
    ],
    [
      "${file.mime}",
      "regex",
      "image"
    ]
  ],
  "error_on_decline": true
},
"thumbs": {
  "use": ":original",
  "robot": "/video/thumbs",
  "count": 1,
  "width": 480,
  "height": 320,
  "ffmpeg_stack": "v2.2.3"
},
"export": {
  "use": [
    "encode",
    "thumbs"
  ],
  "robot": "/s3/xxxxx",
  "key": "xxxxx",
  "secret": "xxxxx",
  "bucket": "xxxxx",
  "bucket_region": "us-west-2",
  "acl": "bucket-default",
  "path": "${assembly.id}.${file.ext}"
  }
 }
}

And this is the custom code on our Form Assembly form

<script type='text/javascript'>
  var ck = {};
  ck.containerId = '#xxxxxL';
  ck.hiddenId = '#xxxxx';
  ck.submitSelector = "input[value='Complete Application']";
  
  ck.hideSubmit = function() {
    $(ck.submitSelector).prop('disabled', true)
      .css('cursor', 'default')
      .css('opacity', '0.5');
  };
    
  ck.showSubmit = function() {
    $(ck.submitSelector).prop('disabled', false)
      .css('cursor', 'pointer')
      .css('opacity', '1');
  };
  
  ck.formSuccess = function() {
    $('#video-upload').css('display', 'none');
    $('#video-upload').val('');
    $(ck.containerId).append(function() {
      var htmlStr = '<div class="video-message"><div>Video Uploaded!</div>';
      htmlStr += '<div id="video-reset">Reset</div></div>';
      return htmlStr;
    });
    ck.showSubmit();
    
    // Add event listener for reset link
    $('#video-reset').click(function() {
      ck.formReset();
    });
  };
  
  ck.formReset = function() {
    $('#video-upload').css('display', 'inline-block');
    $('.video-message').remove();
    ck.hideSubmit();
  };  
  ck.initTransloadit = function(form) {
    form.transloadit({
      wait: true,
      triggerUploadOnFileSelection: true,
      debug: true,
      autoSubmit: false,
      maxNumberOfUploadedFiles: 2,
      onSuccess: function(res) {
        $(ck.hiddenId).val(res.assembly_id);
        ck.formSuccess(form);
      },
      params: {
        auth: { 
          key: 'xxxxx', 
          max_size: xxxxx
        },
        template_id: 'xxxxx'
      }
    });
    
    ck.hideSubmit();
  };
  
  $(document).ready(function() {
  
    var form = $('form');
  
    // Check if video has already been uploaded
    if ($(ck.hiddenId).val()) {
      ck.formSuccess(form);
    } else {
      ck.initTransloadit(form);
    }
    
  });
</script>
2

I hope I got your question right, let me know if I missed something: You have one form that gets submitted both to Transloadit and Salesforce, and you want Transloadit to ignore any document?

I see you are already using a /file/filter step under the files stepname, and you could indeed use that to make us ignore any document (you’re currently passing through only videos and images, so that should work) but the files stepname is then not used in any other step, instead, all transcoding steps use :original as their input. So I think a good thing to try would be to make only files use :original, and to make all other steps use files.

That’s going to make all subsequent steps be performed only on non-videos/images.

Alternatively perhaps you

  • want to skip encoding steps for documents, but do want them uploaded to the same bucket, in this case, make another file step for documents and add the e.g. documents step name to the export.use.
  • want to avoid any posting any document to Transloadit at all (even though we ignore then), in which case more javascript wizardry would be required on the client side to skip submitting to Transloadit completely in the case of certain mimetypes

Please let me know if this helps :slight_smile:

3

That is helpful. Could you provide a little more detail on what kind of javascript would need to be written on the client side to hide the documents from Transloadit? I’m pretty comfortable with JS but haven’t worked with Transloadit before. Thanks!

4

Yes, so I think you could use the onFileSelect(fileObject, $fileInputField) callback to inspect the file and decide to move the element outside of the form in case of a document mimetype. I believe that would do the trick, but I’d like @tim-kos to correct me if I’m wrong here as he’s the expert in this area :slight_smile:

5

That’s indeed what onFileSelect would be useful for.

A different idea just from looking at your main thread question: How about you two forms on the page, one with an input field with the document and one with a (transloadit-enabled) file input field for the video? Then you only have one submit button and upon click (and maybe some validation that indeed files were selected) you submit both forms. The one to Salesforce could go via Ajax and the Transloadit one is just left alone opening the modal, etc.

6

@tim-kos As far as using onFileSelect, do you have an example case I could look at? Thanks!