0
I have a Dropzone.js and after dragging and dropping a file in my html I would like to receive a redirect to another page, I would like to know how to proceed, I tried some ways and could not, if someone can give me a light.
Dropzone.js
function addProgressBar(that, i, index){
$(that.element).parent()
.append('<div class="progress progress-'+index+'"></div>')
.css({'margin': that.options.margin});
$(".progress-"+index).css({
width: that.options.progressBarWidth,
margin: '20px 0 0 0',
}).append('<div class="progress-bar progress-bar-info progress-bar-striped active"></div>').hide();
$(".progress-" + index).wrap('<div class="extra-progress-wrapper"></div>');
//$(".progress-" + index).parent().append('<span title="'+that.options.files[i].name+'">'+that.options.files[i].name.trunc(20)+'</span>').css("width", that.options.progressBarWidth);
if(that.options.showTimer){
$(".progress-" + index).parent().append('<span style="float:right" class="upload-timer-'+index+'">0</span>');
}
}
function addFileToBigField(that, i, index){
$(that.element).parent()
.append('<div class="progress error-progress-'+index+'"></div>')
.css('margin', that.options.margin);
var file = that.options.files[i];
var fileName = file.name.trunc(25);
$(".error-progress-"+index).css({
width: that.options.progressBarWidth,
margin: '20px 0 0 0'
}).append('<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:100%">Arquivo muito grande ('+humanFileSize(file.size)+')</div>');
$(".error-progress-" + index).wrap('<div class="extra-progress-wrapper"></div>').css("width", that.options.progressBarWidth);
$(".error-progress-" + index).parent().append('<span title="'+that.options.files[i].name+'">'+fileName+'</span>');
}
function addWrongFileField(that, i, index){
$(that.element).parent()
.append('<div class="progress error-progress-'+index+'"></div>')
.css('margin', that.options.margin);
var file = that.options.files[i];
var fileName = file.name.trunc(25);
var extension = file.name.substr(file.name.lastIndexOf('.') + 1);
$(".error-progress-"+index).css({
width: that.options.progressBarWidth,
margin: '20px 0 0 0'
}).append('<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:100%">File type ('+extension+') is not allowed</div>');
$(".error-progress-" + index).wrap('<div class="extra-progress-wrapper"></div>').css("width", that.options.progressBarWidth);
$(".error-progress-" + index).parent().append('<span title="'+that.options.files[i].name+'">'+fileName+'</span>');
}
function showTooltip(){
$("span").tooltip({
open: function(event, ui){
ui.tooltip.css("max-width", '100%');
}
});
}
function checkFileType(that, file){
if (!file.type && file.size%4096 === 0) return false;
if(that.options.allowedFileTypes == '*') return true;
var extension = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
var allowedTypes = that.options.allowedFileTypes.replace(' ', '').split(",");
var allowedTypesLower = [];
for (var i = allowedTypes.length - 1; i >= 0; i--) {
if(allowedTypes[i].indexOf(".") != -1){
if(file.type.match(allowedTypes[i]) !== null) return true;
}
allowedTypesLower.push(allowedTypes[i].toLowerCase());
}
if($.inArray(extension, allowedTypesLower) != -1) return true;
return false;
}
var validAmount = function(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
};
var parsableUnit = function(u) {
return u.match(/\D*/).pop() === u;
};
var incrementBases = {
2: [
[["B", "Bytes"], 1],
[["Kb"], 128],
[["k", "K", "kb", "KB", "KiB", "Ki", "ki"], 1024],
[["Mb"], 131072],
[["m", "M", "mb", "MB", "MiB", "Mi", "mi"], Math.pow(1024, 2)],
[["Gb"], 1.342e+8],
[["g", "G", "gb", "GB", "GiB", "Gi", "gi"], Math.pow(1024, 3)],
[["Tb"], 1.374e+11],
[["t", "T", "tb", "TB", "TiB", "Ti", "ti"], Math.pow(1024, 4)],
[["Pb"], 1.407e+14],
[["p", "P", "pb", "PB", "PiB", "Pi", "pi"], Math.pow(1024, 5)],
[["Eb"], 1.441e+17],
[["e", "E", "eb", "EB", "EiB", "Ei", "ei"], Math.pow(1024, 6)]
],
10: [
[["B", "Bytes"], 1],
[["Kb"], 125],
[["k", "K", "kb", "KB", "KiB", "Ki", "ki"], 1000],
[["Mb"], 125000],
[["m", "M", "mb", "MB", "MiB", "Mi", "mi"], 1.0e+6],
[["Gb"], 1.25e+8],
[["g", "G", "gb", "GB", "GiB", "Gi", "gi"], 1.0e+9],
[["Tb"], 1.25e+11],
[["t", "T", "tb", "TB", "TiB", "Ti", "ti"], 1.0e+12],
[["Pb"], 1.25e+14],
[["p", "P", "pb", "PB", "PiB", "Pi", "pi"], 1.0e+15],
[["Eb"], 1.25e+17],
[["e", "E", "eb", "EB", "EiB", "Ei", "ei"], 1.0e+18]
]
};
function filesizeParser(input) {
var options = arguments[1] || {};
var base = parseInt(options.base || 2);
var parsed = input.toString().match(/^([0-9\.,]*)(?:\s*)?(.*)$/);
var amount = parsed[1].replace(',','.');
var unit = parsed[2];
var validUnit = function(sourceUnit) {
return sourceUnit === unit;
};
if (!validAmount(amount) || !parsableUnit(unit)) {
throw 'Can\'t interpret ' + (input || 'a blank string');
}
if (unit === '') return amount;
var increments = incrementBases[base];
for (var i = 0; i < increments.length; i++) {
var _increment = increments[i];
if (_increment[0].some(validUnit)) {
return amount * _increment[1];
}
}
throw unit + ' doesn\'t appear to be a valid unit';
}
function checkFileSize(that, file){
return file.size < filesizeParser(that.options.maxFileSize);
}
function humanFileSize(bytes) {
var thresh = 1024;
if(Math.abs(bytes) < thresh) {
return bytes + ' Bytes';
}
var units = ['KB', 'MB', 'GB', 'TB'];
var u = -1;
do {
bytes /= thresh;
++u;
} while(Math.abs(bytes) >= thresh && u < units.length - 1);
return bytes.toFixed(1)+' '+units[u];
}
String.prototype.trunc = String.prototype.trunc || function(n){
return this.length>n ? this.substr(0,n-1)+'…' : this;
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Plugin( this, options ));
}
});
};
upload.php
<?php
echo "<pre>";
print_r($_FILES);
print_r($_POST);
echo "</pre>";
if(!move_uploaded_file($_FILES['files']['tmp_name'][0], 'uploads/'.$_FILES['files']['name'][0])){
echo "error";
}
echo "success";
?>
<script type="text/javascript">
$("div#drop").dropzone({
url: 'upload.php' })
</script>
<div class="container">
<div class="panel panel-info">
<div class="panel-body">
<div align="center">
<div class="dropzone" >
</div>
</div>
</div>
</div>
</div>
How and where do you instantiate Dropzone? How and where do you call upload.php?
– Leonardo Barros
Puts a
header("location: pagina.php")
where you are printing "Success"– Mbosso
@Leonardobarros I changed and put the answers to your question.
– Guilherme Palange
@Mboss unfortunately didn’t redirect me anywhere.
– Guilherme Palange
@Guilhermepalange When you drop a file in the drop zone it calls the correct upload.php?
– Mbosso
@Mboss ,Calls yes, it uploads to the correct folder, but does not present me any message or redirect me to the following page.
– Guilherme Palange
@Guilhermepalange This one of yours
if
in the Upload.php file must be incorrect then. Because it would print "error" or "Success".– Mbosso