Fine Upload No File to upload - fine-uploader

I am using FineUploader in my form using this : http://docs.fineuploader.com/branch/master/features/forms.html.
The problem is that, in my form file field is optional.
If I send the form I have this and the form doesn't proceed:
Error On submit
And my js code :
var uploader = new qq.FineUploader({
element: document.getElementById('my-uploader'),
maxConnections:1,
callbacks: {
onAllComplete: function(id, fileName, responseJSON) {
location.reload();
}
}
});

Fine Uploader is a file upload library. As such, you must provide it with files to upload. It is not a form submission library, and will not submit a form unless a file is involved. If you would like to submit a form without a file, you will need to omit attaching Fine Uploader to the form. Your best bet in this case is to allow the file to be sent independent of the form submit.

You can check if there are 0 files: in that case, don't trigger fineUploader "uploadStoredFiles" method. E.g.
var fineUploaderTrigger = jQuery('<div id="fine-uploader"></div>');
fineUploaderTrigger.fineUploader({
template: 'qq-template-manual-trigger',
autoUpload: false, /* important */
[...]
});
var submitButton = $('#submit');
// Trigger upload
submitButton.on('click', function (e) {
e.preventDefault();
// go on also if there are no files to upload
if ($('.qq-upload-list li').length > 0) {
$('#fine-uploader-manual-trigger').fineUploader('uploadStoredFiles');
} else {
submitButton.off('click');
submitButton.click();
}
});

Related

How do I block uploads that lack "DateTimeOriginal" exif data with Fine Uploader?

I have an app where having the DateTimeOriginal time stamp on photos are absolutely necessary. Is there a way for me to stop uploading and display a message using Fine Uploader?
I've never heard of the "taken-at" tag, and I don't believe this is a standard field. The rest of this answer assumes you really do want to focus on this tag, but even if you don't you can make a simple change in the source code below to focus on another EXIF tag instead.
One approach is to check each file in an onSubmit callback handler and simply reject the file is it does not contain a "taken-at" field. The following example utilizes the exif-js library to parse an image file's EXIF data:
var uploader = new qq.FineUploader({
callbacks: {
onSubmit: function(id) {
var blob = this.getFile(id)
return new Promise(function(resolve, reject) {
EXIF.getData(blob, function() {
var takenAt = EXIF.getTag(this, 'taken-at')
if (takenAt) {
resolve()
}
else {
reject()
}
})
})
}
}
})

Remove previews from dropzone after success

I want to rollback the original dropzone with its message "drop files here" after the success event of dropzone or after the complete event of dropzone.
I don't want to see the preview after success or complete.
This is my dropzone script:
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
parallelUploads: 1,
success: function(file, response) {
var imageSrc = response;
$(".img-responsive").attr('src', imageSrc);
if (imageSrc == '/assets/images/offerfeatimg.jpg') {
$(".removebutton").hide();
} else {
$(".removebutton").show();
}
}
};
Leveraging #kkthxby3 's idea, the innerHTML for the thumbnail can be cleared in the success method using the following code:
success: function (file, response) {
file.previewElement.innerHTML = "";
}
The beauty of this approach is that it clears the thumbnail without firing the removedFile event.
This leaves the following html in the dom where the thumbnail was:
<div class="dz-preview dz-processing dz-image-preview dz-complete"></div>
but as you can see, the div above which is responsible for displaying the thumbnail is now empty.
Another approach is to remove even the enclosing div that wraps the thumbnail along with it's contents. This approach can be accomplished with the following code in the success method and leaves no trace of the thumbnail in the dom:
success: function (file, response) {
file.previewElement.parentNode.removeChild(file.previewElement);
}
Enjoy.
only need call method removeFile in success function
success: function (file, response) {
this.removeFile(file);
}
check doc dropzone
For me the easiest way to make the file preview not appear is with css.
dz-preview and dz-file-preview are a couple classes in the outer div of the preview html generated by the default template.
.dz-preview, .dz-file-preview {
display: none;
}
I also told it to not create thumbnails in the Dropzone.options.
Dropzone.options.myDropzone = {
paramName: "file",
maxFilesize: 2, // MB
url: 'post_image',
createImageThumbnails: false, // NO THUMBS!
init: function () {
this.on('sending', dz_sending),
this.on('success', dz_success),
this.on('error', dz_error),
this.on('complete', dz_complete) // Once it's done...
}
The template still generates all the preview html though. So in my 'complete' function dz_complete I delete it all.
function dz_complete(file) {
$('.dz-preview').remove(); // ...delete the template gen'd html.
}
Just an fyi...
The method 'removeAllFiles' is not necessarily the prime choice. Which is the same as 'removeFile(file)'.
I have an event handler for dropZone's 'removedfile' event... I'm using it to send a server message to delete the respective file from the server (should a user delete the thumbnail after it's been uploaded). Using the method 'removeAllFiles' (as well as the individualized 'removeFile(file)') fires the event 'removedfile' which deletes the uploaded images in addition to clearing the thumbnails.
So one could add some finessing around this but in the reality of it the method is not correct.
Looking through the api for Dropzone I am not seeing an API call to simply reset or clear the thumbnails... The method 'disable()' will clear the stored file names and what not but does not clear the thumbnails... Seems dropzoneJS is actually missing a critical API call to be honest.
My work around is to manually reset the containing div for dropzone:
document.getElementById("divNameWhereDropzoneClassIs").innerHTML = ""
This clears the thumbnails without firing off the event 'removedfile' which is supposed to be used for deleting an image from the server...
The easiest thing is to call the dropzone removeFile() method, using an event listener for the success event.
Dropzone.options.myAwesomeDropzone = {
paramName: "file",
maxFilesize: 2,
parallelUploads: 1,
init: function() {
this.on("success", function(file, response) {
var imageSrc = response;
$(".img-responsive").attr('src', imageSrc);
if(imageSrc == '/assets/images/offerfeatimg.jpg') {
$(".removebutton").hide();
} else {
$(".removebutton").show();
}
this.removeFile(file); // This line removes the preview
})
}
};
I was using file.previewElement.remove(), works fine in Chrome but does not work in IE.
Then I tried this.removeFile(file), but it didn't work for me.
After that i tried file.previewElement.innerHTML = "" which works in both Chrome and IE but it leaves an extra div where the preview elements were.
So this one works better for me...
success: function (file, response) {
file.previewElement.outerHTML = "";
}
If you want to remove an added file from the dropzone, you can call .removeFile(file). This method also triggers the removedfile event.
Here’s an example that would automatically remove a file when it’s finished uploading:
myDropzone.on("complete", function(file) {
myDropzone.removeFile(file);
});
If you want to remove all files, simply use .removeAllFiles(). Files that are in the process of being uploaded won’t be removed. If you want files that are currently uploading to be canceled, call .removeAllFiles(true) which will cancel the uploads.
100% Tested and Working:
$('#preview_image_container .dz-preview .dz-remove').attr('id','removeFile');
document.getElementById("removeFile").click();

Validate (Bassistance) before sending to fancybox

I'm using the bassistance validation plugin and have a small script that catches the second submit-button (called preview) and sends the data via ajax to fancybox. I'ld like to validate the forms before they are send to fancybox. At the moment they're only validatet, if I send the forms via the submit-button. I tried in various ways (e.g. I put the call for validation directly after the if and so on) but couldn't get it work. Maybe there's a way to let validate know that it should also react, when the preview-button is hit?
My Code:
$(function() {
$('#myform *').tooltip();
$('#myform ').validate();
});
$(document).ready(function(){
$(':submit').click(function(){
for (var i in CKEDITOR.instances){
CKEDITOR.instances[i].updateElement();
}
var value = $(this).attr("id");
if (value == 'preview') {
$.fancybox.showLoading();
$.ajax({
type : "POST",
cache : false,
url : "../mypath/",
data : $('#myform').serializeArray(),
success : function(data) {
$.fancybox(data, {
'minWidth': '100%',
'minHeight': '100%',
});
}
});
return false;
}
});
});
If i'm not wrong, the Bassistance Validator plugin relies on the fact that if you SUBMIT a form, and the requirements are not met, the function returns a "false" on that submit, enabling you to visually see the errors made.
In your source code, you correctly initialized the Bassistance validator plugin at the very beginning of your code ( I assume you created the rules for it directly on the input fields for example minlength="2" required ) but there is a problem: there is no hook for the SUBMIT event of the submit button, but only for the CLICK event on that button.
There is a simple example on the Bassistance website that shows how you can use custom submit events for the plugin:
http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html
Basically, what you need to do is to insert the intelligent part of your code into
jQuery("#yourform").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
/*
Here you can do the following:
1) Update the instances of CKEDITOR
2) Check if the submit is in the preview mode
3) If yes
- do your fancy stuff
- return false so that the real submit is not triggered
If not
- return true so that the real submit handler is evaluated by the browser and the POST is triggered
*/
});
}
});

Ajax file upload is not working when used the second time

I'm using this jquery plugin ajaxFileupload in our project. My design is I have a file upload control and set the opacity to 0.01 and then using an anchor link, I trigger the file upload control click event. This works fine until I try to click the anchor link the second time which it doesn't open the file dialog box.
Here is my code.
$(".btnUpload").live("click", function () {
$(".lblUploadError").text("");
$(".fleAttachment").trigger("click");
});
$(".fleAttachment").change(function () {
var reg = /^.*\.(jpg|JPG|gif|GIF|jpeg|JPEG)$/;
var vals = $(this).val(),
val = vals.length ? vals.split("\\").pop() : "";
if (reg.test(vals) == false) {
$(".lblUploadError").text("Invalid Image Type. We only accept .GIF or .JPG");
} else {
ajaxFileUpload();
eval($(".btnRefreshAttachmentList").attr("href"));
}
});
I don't see any error in the console so it makes it difficult to debug it.
Change
$(".fleAttachment").change(function() {
to
$(".fleAttachment").live('change', function() {
$( document ).on( "click", ".fleAttachment", function() {
//--> Logic Here // jQuery 1.7+
});
this.value="";
at the end should work

Can't get form to submit after successful AJAX validation with PHP and Prototype

I have forms on a site that are processed by PHP, including validation. Normally, if there's errors, the user is returned to the form with the appropriate error messages. For users with javascript enabled, I'm trying to write a javascript with Prototype that uses AJAX to do the same PHP validation (to avoid code duplication) and display the error messages without having to actually submit the form and wait for it to reload.
The script works very well at grabbing the errors via AJAX and displaying them. But, when there are no errors, I cannot get the form to submit and move forward to the next page. I've been working with Event.stopObserving, but it just reloads the page (which is not the form action url, the form submits to a different page than the form itself, so it's not the server sending the browser back). I'm not that good with javascript and Prototype, so I'm probably missing something obvious, but any help would be greatly appreciated. Anyway, here is my code:
document.observe("dom:loaded", function() {
$$('form')[0].observe('submit', validate);
function validate(event) {
event.stop();
// remove any existing error messages
var curErrors = $$('ul.error');
for( i=0, im=curErrors.length; i<im; i++ ) curErrors[i].remove();
$$('form')[0].request({
parameters: { 'js' : 1 },
requestHeaders: {Accept: 'application/json'},
onSuccess: function(req) {
var errors = req.responseText;
if( errors == '[]' ) {
// no errors, submit form to server
$$('form')[0].stopObserving('submit', validate);
$$('form')[0].submit();
} else {
// have errors, display error messages
var errors = errors.evalJSON(true);
for( var error in errors ) {
var errorMsg = '<ul class="error"><li>' + errors[error] + '</li></ul>';
var input = $$('[name="'+error+'"]')[0];
// display error message next to form field
. . .
}
}
},
onFailure: function() {
// can't validate here, let server do it
$$('form')[0].stopObserving('submit', validate);
$$('form')[0].submit();
}
});
}
});
Don't call event.stop() immediately within your validate method - the event handler will occur before the event does, meaning that the validate method will run before the form is submitted. Simply move that line within the branch of the if statement regarding validation failure, and it ought to work just fine.
http://www.prototypejs.org/api/event/stop

Resources