Skip to content

Instantly share code, notes, and snippets.

@fangj99

fangj99/processwire-dropzone-ajax.php

Created September 8, 2018 00:19
Show Gist options
  • Save fangj99/9d1cc0e7944ce83e1aa8e764fc7f7a43 to your computer and use it in GitHub Desktop.
Save fangj99/9d1cc0e7944ce83e1aa8e764fc7f7a43 to your computer and use it in GitHub Desktop.
Download ZIP
Processwire dropzone.js
Raw
processwire-dropzone-ajax.php
<?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;
}
Raw
processwire-dropzone.php
<?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