Created
July 2, 2014 19:20
-
-
Save stoppert/8357b74a02cccd727ec0 to your computer and use it in GitHub Desktop.
Quick overview over how I implemented Video Upload with jquery-file-upload and the vimeo api
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ticket['upload_link_secure'] contains the url that you get back when requesting the upload ticket via the api. | |
| https://developer.vimeo.com/api/upload |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function () { | |
| 'use strict'; | |
| // Change this to the location of your server-side upload handler: | |
| var url = $('#file').data('action'); | |
| $('#file').fileupload({ | |
| url: url, | |
| autoUpload: false, | |
| maxFileSize: 700000000, // 700 MB | |
| type: 'PUT', | |
| contentType: 'video/mp4', | |
| multipart: false, | |
| progress: function (e, data) { | |
| var progress = parseInt(data.loaded / data.total * 100, 10); | |
| $('#progress .progress-bar').css( | |
| 'width', | |
| progress + '%' | |
| ); | |
| } | |
| }).on('fileuploadsend', function(e, data) { | |
| if(data.files.length > 1) { | |
| return false; | |
| } | |
| }).on('fileuploadprocessalways', function (e, data) { | |
| var index = data.index, | |
| file = data.files[index]; | |
| if(!file.error) { | |
| // add file to list | |
| var item = $('<p/>').text(file.name); | |
| $('#files').append(item); | |
| // disable add files button | |
| $('.fileinput-button').remove(); | |
| // remove any previous error messages | |
| $('#error').fadeOut(function() { $(this).remove(); }) | |
| // bind upload button | |
| $('.fileupload-button') | |
| .prop('disabled', false) | |
| .on('click', function() { | |
| var $this = $(this), | |
| data = $(this).data(); | |
| $this.prop('disabled', true); | |
| $('#video').fadeIn(); | |
| data.submit().done(function() { | |
| $this.replaceWith('<span>Upload erfolgreich. Bitte Formular ausfüllen und abschicken.</span>'); | |
| // enable video form | |
| $('#video').find('input[type="submit"]').prop('disabled', false).end().prepend('<input type="hidden" name="clip_length" id="clip_length" value="' + file.size + '">') | |
| }); | |
| }).data(data); | |
| } else { | |
| $('#error').empty().text('Ungültiges Dateiformat.') | |
| } | |
| }).on('fileuploaddone', function (e, data) { | |
| $.each(data.result.files, function (index, file) { | |
| if (file.url) { | |
| var link = $('<a>') | |
| .attr('target', '_blank') | |
| .prop('href', file.url); | |
| $(data.context.children()[index]) | |
| .wrap(link); | |
| } else if (file.error) { | |
| var error = $('<span class="text-danger"/>').text(file.error); | |
| $(data.context.children()[index]) | |
| .append('<br>') | |
| .append(error); | |
| } | |
| }); | |
| }).on('fileuploadfail', function (e, data) { | |
| $.each(data.files, function (index, file) { | |
| var error = $('<span class="text-danger"/>').text('File upload failed.'); | |
| $(data.context.children()[index]) | |
| .append('<br>') | |
| .append(error); | |
| }); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="upload"> | |
| <span class="pure-button pure-button-primary fileinput-button"> | |
| <i class="fa fa-laptop"></i> | |
| <span>Video auswählen...</span> | |
| <input type="file" data-action="{{ $ticket['upload_link_secure'] }}" name="file_data" id="file" accept="video/mp4|video/avi" value="Video auswählen"> | |
| </span> | |
| <button class="pure-button pure-button-primary fileupload-button" disabled> | |
| <i class="fa fa-cloud-upload"></i> | |
| <span>Hochladen</span> | |
| </button> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment