Created
September 8, 2018 00:19
-
-
Save fangj99/9d1cc0e7944ce83e1aa8e764fc7f7a43 to your computer and use it in GitHub Desktop.
Processwire dropzone.js
This file contains 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
<?php | |
/** | |
* Process dropzone ajax form | |
* | |
* @author Ivan Milincic <[email protected]> | |
* @copyright 2017 Ivan Milincic | |
* | |
* | |
*/ | |
if($_POST['json_data']) { | |
$data = json_decode($_POST['json_data'], true); | |
// form input array | |
$arr[] = ""; | |
// images array | |
$img_arr[] = ""; | |
// Loop true recived data | |
foreach($data as $item) { | |
// add form inputs to the $arr | |
if(!empty($item["name"])) { | |
$arr[$item["name"]] = $item["value"]; | |
} | |
// add images to the $img_arr | |
if(!empty($item["upload"]["filename"])) { | |
$img_arr[] = $item["upload"]["filename"]; | |
} | |
} | |
// Form Inputs | |
$name = $arr["name"]; | |
$email = $arr["email"]; | |
$message = $arr["message"]; | |
// exclude this fields from $extra_fields | |
$ex_fields = array("0", "message", "answer", "numb_captcha"); | |
// extra fields var | |
$extra_fields = ""; | |
// loop true form input arr | |
foreach($arr as $key => $value) { | |
// if field is not haedcoded (hcf) store it in $extra_fields var | |
if(!in_array($key, $ex_fields)) { | |
$label = str_replace("_", " ", $key); | |
$label = ucfirst($label); | |
$extra_fields .= "{$label}: {$value}" . "\n"; | |
} | |
} | |
$extra_fields .= "\n" . "$message" . "\n"; | |
// Form inputs vars | |
$name = $arr["name"]; | |
$address = $arr["address"]; | |
// temp folder | |
$temp_folder = $config->paths->files."_tmp/"; | |
// create new page | |
$p = new Page(); | |
$p->template = "form-submit"; | |
$p->parent = $pages->get("template=form")->id; | |
$p->title = $name; | |
$p->email = $email; | |
$p->text = $extra_fields; | |
$p->save(); | |
/** | |
* loop true $img_arr (images) array | |
* move image files from temp folder to page folder | |
* asign to images field | |
* | |
*/ | |
foreach($img_arr as $img_name) { | |
if($img_name && $img_name != "") { | |
// get temp image | |
$tmp_img = $temp_folder . $img_name; | |
// get image extension | |
$ext = pathinfo($tmp_img, PATHINFO_EXTENSION); | |
// generte new random image name | |
$img_name = "img" . rand(10, 1000) . ".$ext"; | |
// image destination | |
$img = $config->paths->files . $p->id ."/". $img_name; | |
// move image file from temp folder to page folder | |
rename($tmp_img, $img); | |
// asing image to images field | |
$p->images->add($img); | |
// save page | |
$p->save(); | |
} | |
} | |
$p->save(); | |
$json = json_encode($extra_fields); | |
echo $json; | |
} |
This file contains 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
<?php | |
/** | |
* Dropzone Upload | |
* | |
* @author Ivan Milincic <[email protected]> | |
* @copyright 2017 Ivan Milincic | |
* | |
* | |
*/ | |
/** | |
* Dropzone files upload | |
*/ | |
if(!empty($_FILES)) { | |
// destination dir | |
$storeFolder = $config->paths->files."_tmp/"; | |
// if dir doesnt exist, create it | |
if(!file_exists($storeFolder) && !is_dir($storeFolder)) { | |
mkdir($storeFolder); | |
} | |
/* | |
$tempFile = $_FILES['file']['tmp_name']; | |
$targetFile = $storeFolder. $_FILES['file']['name']; | |
move_uploaded_file($tempFile,$targetFile); | |
*/ | |
foreach($_FILES['file']['tmp_name'] as $key => $value) { | |
$tempFile = $_FILES['file']['tmp_name'][$key]; | |
$targetFile = $storeFolder. $_FILES['file']['name'][$key]; | |
move_uploaded_file($tempFile,$targetFile); | |
} | |
} | |
?> | |
<!-- laod dropzone script --> | |
<link rel="stylesheet" href="<?=$config->urls->templates?>lib/dropzone/dropzone.css"> | |
<script src="<?=$config->urls->templates?>lib/dropzone/dropzone.js"></script> | |
<script> | |
// disable auto discover | |
Dropzone.autoDiscover = false; | |
// init dropzone on form id | |
$(document).ready(function() { | |
var myDropzone = new Dropzone("#myDropzone", { | |
url: "<?=$page->url?>", | |
paramName: "file", | |
autoProcessQueue: false, | |
uploadMultiple: true, | |
parallelUploads: 100, // important to send all files at once | |
maxFilesize: 1, // MB | |
maxFiles: 5, | |
acceptedFiles: ".jpg, .jpeg, .png, .gif, .pdf", | |
addRemoveLinks: true, | |
// Language Strings | |
dictFileTooBig: "File is to big ({{filesize}}mb). Max allowed file size is {{maxFilesize}}mb", | |
dictInvalidFileType: "Invalid File Type", | |
dictCancelUpload: "Cancel", | |
dictRemoveFile: "<i class='fa fa-close'></i>", | |
dictMaxFilesExceeded: "Only {{maxFiles}} files are allowed", | |
dictDefaultMessage: "Drop files here to upload", | |
}); | |
/** | |
* Enable/Disable submit button based on captcha, | |
* add thumbs up and down | |
* | |
*/ | |
<?php if($sys_settings->enable_recaptcha != '1'): ?> | |
// disable button | |
$("#dropzoneSubmit").attr('disabled', ''); | |
// captcha answer | |
var numbCaptchaA = $("#numb-captcha-answer").val(); | |
// check captcha field | |
$("#numb-captcha-q").on('blur keypress keyup', function() { | |
var thisValue = $(this).val(); | |
if (thisValue === numbCaptchaA) { | |
$(".captcha-error > *").remove(); | |
$(".captcha-error").append("<h3><i class='fa fa-thumbs-up uk-text-success'></i></h3>"); | |
$("#dropzoneSubmit").removeAttr('disabled'); | |
} else { | |
$(".captcha-error > *").remove(); | |
$(".captcha-error").append("<h3><i class='fa fa-thumbs-down uk-text-danger'></i></h3>"); | |
$("#dropzoneSubmit").attr('disabled', ''); | |
} | |
}); | |
<?php endif;?> | |
}); | |
Dropzone.options.myDropzone = { | |
// The setting up of the dropzone | |
init: function() { | |
var myDropzone = this; | |
// process the queue on form submit | |
$('#form').submit(function(e) { | |
// Make sure that the form isn't actually being sent. | |
e.preventDefault(); | |
e.stopPropagation(); | |
// remove preview captcha error message | |
$(".captcha-error > *").remove(); | |
// unhide spinner and hide submit button text | |
$(".spinner").removeClass('uk-hidden'); | |
$("#dropzoneSubmit > span").addClass('uk-hidden'); | |
// define captcha var | |
var captha; | |
// if recaptcha is enabled check it | |
<?php if($sys_settings->enable_recaptcha == '1'): ?> | |
var token = $("#g-recaptcha-response").val(); | |
if (token) { | |
var captha = true; | |
} else { | |
var captha = false; | |
} | |
// if recaptcha is disabled, check custom numb-captcha | |
<?php else :?> | |
var numbCaptchaA = $("#numb-captcha-answer").val(); | |
var numbCaptchaQ = $("#numb-captcha-q").val(); | |
if (numbCaptchaA === numbCaptchaQ) { | |
var captha = true; | |
} else { | |
var captha = false; | |
} | |
<?php endif;?> | |
// if captcha is true processQueue & sumbit form | |
if (captha === true) { | |
// If there is dropzone files processQueue, if not just send form data | |
if (myDropzone.files != "") { | |
myDropzone.processQueue(); | |
} else { | |
var form_url = '<?= $pages->get("/system/ajax/")->url ?>'; | |
var form_data = $("#form").serializeArray(); | |
var json_data = JSON.stringify(form_data); | |
$.ajax({ | |
type: 'POST', | |
url: form_url, | |
data: {json_data}, | |
dataType: "json", | |
success: function(data) { | |
// console.log(data); | |
}, | |
error: function(data) { | |
// console.log(data); | |
} | |
}).done(function(){ | |
$(".spinner").addClass('uk-hidden'); | |
$("#dropzoneSubmit > span").removeClass('uk-hidden'); | |
$("#dropzone").addClass('uk-hidden'); | |
$("#note").prepend("<?php echo ukAlert("success", "Form successfuly sent! Thank you for your tume.") ?>"); | |
}); | |
} | |
} else { | |
$(".captcha-error").append("<div class='uk-h3'><i class='fa fa-exclamation-triangle uk-text-danger'></i> Captcha Error!</div>"); | |
$(".spinner").addClass('uk-hidden'); | |
$("#dropzoneSubmit > span").removeClass('uk-hidden'); | |
} | |
}); | |
// on uplaod start | |
this.on("addedfile", function(file) { | |
// console.log(file); | |
}); | |
// on uplaod start | |
this.on("error", function(file, response) { | |
// console.log(response); | |
}); | |
// on success | |
this.on("successmultiple", function(dropzone_data) { | |
// ajax url | |
var form_url = '<?= $pages->get("/system/ajax/")->url ?>'; | |
// form inputs data | |
var form_data = $("#form").serializeArray(); | |
// marge fron_data and dropzone_data arrays | |
var arr = $.merge(form_data, dropzone_data); | |
// encode data | |
var json_data = JSON.stringify(arr); | |
// run ajax request | |
$.ajax({ | |
type: 'POST', | |
url: form_url, | |
data: {json_data}, | |
dataType: "json", | |
success: function(data) { | |
// console.log(data); | |
}, | |
error: function(data) { | |
$("#ajax-contact").prepend("<?php echo ukAlert('danger', 'Error, message not sent! Please try again or use another conatct method.') ?>") | |
} | |
}); | |
$(".spinner").addClass('uk-hidden'); | |
$("#dropzoneSubmit > span").removeClass('uk-hidden'); | |
$("#dropzone").addClass('uk-hidden'); | |
$("#note").prepend("<?php echo ukAlert("success", "Form successfuly sent! Thank you for your tume.") ?>"); | |
}); | |
} | |
}; | |
</script> | |
<div id="note"></div> | |
<div id="dropzone"> | |
<!-- form --> | |
<form id="form" action="./" method="POST" class="uk-form-horizontal"> | |
<div class="uk-margin"> | |
<label class="uk-form-label"><?= $system->lang->name ?></label> | |
<div class="uk-form-controls"> | |
<input class="uk-input" type="text" name="name" /> | |
</div> | |
</div> | |
<div class="uk-margin"> | |
<label class="uk-form-label"><?= $system->lang->email ?></label> | |
<div class="uk-form-controls"> | |
<input class="uk-input" type="email" name="email" /> | |
</div> | |
</div> | |
<?php foreach($page->form_extra_fields as $field) :?> | |
<?php | |
$label = $field->label; | |
$field_name = strtolower($field->label); | |
$field_name = strip_tags($field_name); | |
$field_name = str_replace(" ", "_", $field_name); | |
?> | |
<div class="uk-margin"> | |
<label class="uk-form-label"><?= $label ?></label> | |
<div class="uk-form-controls"> | |
<input class="uk-input" type="text" name="<?= $field_name ?>" <?= ($field->req == "1") ? "required" : "";?> /> | |
</div> | |
</div> | |
<?php endforeach;?> | |
<div class="uk-margin"> | |
<label class="uk-form-label"><?= $system->lang->message ?></label> | |
<div class="uk-form-controls"> | |
<textarea class="uk-textarea" rows="5" name="message"></textarea> | |
</div> | |
</div> | |
<div class="uk-margin"> | |
<label class="uk-form-label">Images</label> | |
<div class="uk-form-controls"> | |
<!-- dropzone on a div --> | |
<div id="myDropzone" class="dropzone"></div> | |
</div> | |
</div> | |
<div class="uk-margin"> | |
<label class="uk-form-label"></label> | |
<div class="uk-form-controls"> | |
<div class="uk-inline"> | |
<!-- captcha --> | |
<?php if($sys_settings->enable_recaptcha == '1'): ?> | |
<div class="uk-margin"> | |
<?php echo $captcha->render(); ?> | |
</div> | |
<?php else: ?> | |
<?php | |
$numb_1 = rand(1, 5); | |
$numb_2 = rand(1, 5); | |
$numb_q = "$numb_1 + $numb_2 ="; | |
$answer = $numb_1 + $numb_2; | |
?> | |
<div class="uk-margin uk-grid-collapse" uk-grid> | |
<div class="uk-width-auto uk-flex uk-flex-middle"> | |
<label class="uk-h3"><?= $numb_q ?></label> | |
</div> | |
<div class="uk-width-auto"> | |
<input id="numb-captcha-answer" class="uk-hidden" type="text" name="answer" value="<?= $answer ?>" required /> | |
<input id="numb-captcha-q" class="uk-input uk-form-width-xsmall uk-margin-small-left uk-text-center" type="text" name="numb_captcha" placeholder="?" required /> | |
</div> | |
</div> | |
<?php endif; ?> | |
</div> | |
<div class="uk-inline uk-margin-left captcha-error"></div> | |
</div> | |
</div> | |
<div class="uk-margin"> | |
<label class="uk-form-label"></label> | |
<div class="uk-form-controls"> | |
<button id="dropzoneSubmit" type="submit" name="submit" class="uk-button uk-button-primary uk-button-large" style="line-height:50px;border-radius:25px;"> | |
<div class="spinner uk-hidden"> | |
<span class="uk-inline uk-margin-small-right" uk-spinner style="color: #fff;"></span> | |
<span>Sending...</span> | |
</div> | |
<span>Apply For Taxation</span> | |
</button> | |
</div> | |
</div> | |
</form> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment