I'm trying to combine the Drag and Drop Upload feature built into UIkit with Toolset's file upload for a CRED Form.
( ref - enlace oculto ). My thinking is that the UIkit JS would handle browser side and Toolset would handle server side.
Everything I'm looking at when inspecting the rendered html makes me think this should work, but it's not working fully. The select request works fine using the "selecting one" link, in place of the upload button. The drop request get a response from the loading bar, but ultimately nothing is uploaded.
If you can please, take a look at the code below and let me know if there is an issue with Toolset which makes this combination impossible so that I don't spend any more time on it.
[credform]
[cred_field field='form_messages' class='alert alert-warning']
<div class="js-upload uk-placeholder uk-text-center">
<span uk-icon="icon: cloud-upload"></span>
<span class="uk-text-middle">Attach binaries by dropping them here or</span>
<div uk-form-custom>
[cred_field field="upload-image-of-receipt" force_type="field"]
<span class="uk-link">selecting one</span>
</div>
</div>
<progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
[cred_field field='recaptcha' class='form-control' output='bootstrap']
[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-lg']
[/credform]
JS Editor - >
var bar = document.getElementById('js-progressbar');
UIkit.upload('.js-upload', {
url: '',
multiple: true,
beforeSend: function () {
console.log('beforeSend', arguments);
},
beforeAll: function () {
console.log('beforeAll', arguments);
},
load: function () {
console.log('load', arguments);
},
error: function () {
console.log('error', arguments);
},
complete: function () {
console.log('complete', arguments);
},
loadStart: function (e) {
console.log('loadStart', arguments);
bar.removeAttribute('hidden');
bar.max = e.total;
bar.value = e.loaded;
},
progress: function (e) {
console.log('progress', arguments);
bar.max = e.total;
bar.value = e.loaded;
},
loadEnd: function (e) {
console.log('loadEnd', arguments);
bar.max = e.total;
bar.value = e.loaded;
},
completeAll: function () {
console.log('completeAll', arguments);
setTimeout(function () {
bar.setAttribute('hidden', 'hidden');
}, 1000);
alert('Upload Completed');
}
});
