reference - http://github.com/hayageek/jquery-upload-file
seems that any error occured at event
auto handled by library and shown at user when the showError=true (by default)
when raising errors by your php script the only way to catch it is by
index.html
upload.php
//catch the done button, using jQuery dynamic event
seems that any error occured at event
JavaScript:
onError: function(files,status,errMsg,pd)when raising errors by your php script the only way to catch it is by
JavaScript:
onSuccess:function(files,data,xhr,pd)index.html
JavaScript:
<!--JQUERY-->
<script src="//code.jquery.com/jquery-1.11.0.min.js">
</script>
<!--BOOTSTRAP-->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript">
</script>
<!--UPLOADER-->
<link href="//hayageek.com/docs/uploadfile.min.css" rel="stylesheet" type="text/css" />
<script src="//hayageek.com/docs/jquery.uploadfile.min.js" type="text/javascript">
</script>
<script>
var uploadObj;
$(function()
{
//when modal closed, hide the warning messages + reset
$('#modalOFFERS2').on('hidden.bs.modal', function()
{
//when close - clear elements
$('#formOFFERS2').trigger("reset");
//remove any status groupboxes from jQ-uploader via class!
$(".ajax-file-upload-statusbar").remove();
});
$('#btn_lead_proposals_new').on('click', function(e)
{
e.preventDefault();
$('#modalOFFERS2').modal('toggle');
})
uploadObj = $("#file_prop_approval").uploadFile(
{
url:"upload.php",
showProgress : true,
fileName:"myfile",
autoSubmit:true,
maxFileCount:1,
maxFileSize:31457280, //30mb
dynamicFormData: function()
{
//send JSON variables with $FILE
var data ={ client_id : <?= $_GET['id'] ?>, offer_id: $("#OFFERS2FORM_updateID").val() };
return data;
},
onSubmit:function(files)
{//callback to be invoked before the file upload.
//reset jQ-uploader counters!
console.log("refresh")
uploadObj.fileCounter = 0;
uploadObj.selectedFiles = 0;
uploadObj.fCounter = 0; //failed uploads
uploadObj.sCounter = 0; //success uploads
uploadObj.tCounter = 0; //total uploads
if (!files)
return;
},
onSuccess:function(files,data,xhr,pd)
{
//custom error handling
var info = JSON.parse(data);
if (info["jquery-upload-file-error"]!=null)
{
//show the error thrown by upload PHP
alert(info["jquery-upload-file-error"]);
//remove any status groupboxes from jQ-uploader via class!
$(".ajax-file-upload-statusbar").remove();
//reset jQ-uploader counters!
console.log("refresh")
uploadObj.fileCounter = 0;
uploadObj.selectedFiles = 0;
uploadObj.fCounter = 0; //failed uploads
uploadObj.sCounter = 0; //success uploads
uploadObj.tCounter = 0; //total uploads
}
},
afterUploadAll:function(obj)
{
//callback after upload
}
});
}); //jQuery ends
</script>
<button id="btn_lead_proposals_new" class="btn btn-success" type="submit" name="submit">
New
</button>
<!-- NEW OFFER approval attachment MODAL [START] -->
<div class="modal fade" id="modalOFFERS2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id='lblTitle_OFFERS2']
New
</h4>
</div>
<div class="modal-body">
<form id="formOFFERS2" role="form">
<button id="btn_dn_file_prop_approval" type="button" class="btn btn-primary">
Download
</button>
<div id="file_prop_approval">
Upload
</div>
<input name="OFFERS2FORM_updateID" id="OFFERS2FORM_updateID" class="form-control" style="display:none;">
<div class="modal-footer">
<button id="bntCancel_OFFERS2" type="button" class="btn btn-default" data-dismiss="modal">
back
</button>
</div>
</form>
</div><!-- End of Modal body -->
</div><!-- End of Modal content -->
</div><!-- End of Modal dialog -->
</div><!-- End of Modal -->
<!-- NEW OFFER approval attachment MODAL [END] -->upload.php
JavaScript:
<?php
session_start();
if (!isset($_SESSION["u"]) || empty($_POST['offer_id']) || empty($_POST['client_id'])) {
//drives to library onError event (aka shows the error automatically at groupbox)
header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
exit ;
}
$company_id = $_POST['client_id'];
$output_dir="./destdir/$company_id/";
$fileName = $_POST['offer_id']."_test.tiff";
//raise custom error
if (file_exists($output_dir.$fileName))
{
//custom error, we catch it at **onSuccess** event
$ret= array();
$ret['jquery-upload-file-error']='Approval file already exists!';
echo json_encode($ret);
exit;
}
if(isset($_FILES["myfile"]))
{
$ret = array();
$error =$_FILES["myfile"]["error"];
//You need to handle both cases
//If Any browser does not support serializing of multiple files using FormData()
if(!is_array($_FILES["myfile"]["name"])) //single file
{
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
$ret[]= $fileName;
}
else //Multiple files, file[]
{
// $fileCount = count($_FILES["myfile"]["name"]);
// for($i=0; $i < $fileCount; $i++)
// {
// $fileName = $_FILES["myfile"]["name"][$i];
// move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
// $ret[]= $fileName;
// }
}
echo json_encode($ret);
}
?>//catch the done button, using jQuery dynamic event
JavaScript:
$(document).on("click", ".ajax-file-upload-green", function(e) {
if (upload_form=="modalOFFERS2")
$('#modalOFFER').modal('toggle');
})