uploader's community!
I am trying to integrate fine-uploader with shrine(ROR).
I am already able to upload images to the server endpoint.
In order to store uploaded photos definitively i opted for sending uploaded photo information(received form the server) with my existing form via ajax.
My existing form looks like this
<form id="myform" method="post" action="some_path">
<input type="text" name="name"/>
<input type="text" name="email"/>
<input type="text" name="phone"/>
<input type="password" name="password"/>
<input type="submit" />
Add some photos
<div id="fine-uploader-gallery"></div>
</form>
My fine uploader configuration:
$(function() {
var fineuploader = new qq.FineUploader({
element: document.getElementById("fine-uploader-gallery"),
template: 'qq-template-gallery',
debug: true,
request: {
endpoint: 'images/cache/upload',
inputName: "file"
},
thumbnails: {
placeholders: {
waitingPath: "fine-uploader/placeholders/waiting-generic.png",
notAvailablePath: "fine-uploader/placeholders/not_available-generic.png"
}
},
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
}
callbacks: {
onComplete: maybe add the responseJSON to a local variable and send it later with the form via ajax.
}
}
});
});
My question is:
How to intercept the sumbit button, so that if fine-uploader is uploading some files :
The form won't be sent, it waits until all uploads are finished and then send it along with the information recieved from the server for each uploaded file(responseJSON).
Hope my question is clear!
You can prevent the form from being submitted simply by listening for form submit events and preventing the default browser action if files are not yet uploaded.
document.getElementById('myForm')
.addEventListener('submit', function(event) {
var totalFiles = fineuploader.getUploads().length;
var successfulUploads = fineuploader.getUploads({
status: qq.status.UPLOAD_SUCCESSFUL
}).length;
if (totalFiles !== successfulUploads) {
event.preventDefault();
}
})
...feel free to add any messaging required to alert your users to the issue.