Getting stored images with Dropzone.js - javascript

I am trying getting the images stored at folder, but the when i am calling the images give 404 because of this:
http://localhost/xxxx/new/item/77/public/images/item/77/2.jpg
i don't no how to remove "new/item/77/" and get the image to the correct folder:
My javascript
$(".dropzone").dropzone({
init: function() {
myDropzone = this;
$.ajax({
url: 'image/get',
type: 'post',
data: {request: 'fetch'},
dataType: 'json',
success: function(response){
$.each(response, function(key,value) {
var mockFile = { name: value.name, size: value.size};
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, value.path);
myDropzone.emit("complete", mockFile);
});
}
});
}
});
My route
Route::post('new/item/{id}/image/get','ItemController#fileGet');
My Controller
public function fileGet(Request $request){
$fileList = [];
$targetDir= 'public/images/item/77/';
$dir = $targetDir;
if (is_dir($dir)){
if ($dh = opendir($dir)){
while (($file = readdir($dh)) !== false){
if($file != '' && $file != '.' && $file != '..'){
$file_path = $targetDir.$file;
if(!is_dir($file_path)){
$size = filesize($file_path);
$fileList[] = ['name'=>$file, 'size'=>$size, 'path'=>$file_path];
}
}
}
closedir($dh);
}
}
echo json_encode($fileList);
exit;
}
What i expect is
http://localhost/xxxx/public/images/item/77/2.jpg
Or if any one knows a better way to get the files stored in the dropzone.js
Thnaks!

$(".dropzone").dropzone({
init: function() {
Dropzone = this;
$.ajax({
url: APP_URL + '/image/get',
type: 'post',
dataType: 'json',
success: function(response){
$.each(response, function(key,value) {
var mockFile = { name: value.name, size: value.size};
Dropzone.options.addedfile.call(Dropzone, mockFile);
Dropzone.options.thumbnail.call(Dropzone, mockFile, APP_URL+"/"+value.path);
Dropzone.options.complete.call(Dropzone, mockFile);
});
}
});
}
});

Related

How do I update datetime field using php?

I have this function wherein I can update my input fields, I have a fetch.php that fetches data from my sql.
So this is my input fields --> [Sample Pic - Input Fields][1]
Then when I click update it returns this --> [Sample Pic - Updating Input Fields][2]
My problem is whenever I update it returns all of the data in the fields except the date and time? How can I fix this?
Below are my codes. TYVM.
<div class="col-sm-2">
<input type="datetime-local" name="date_submitted" id="date_submitted" class="form-control" placeholder="Date Submitted" style="width: 120%;" />
</div>
<script>
$(document).ready(function() {
addDocu();
function addDocu() {
var action = "select";
$.ajax({
url: success: function(data) {
alert(data);
addDocu();
}
});
} else {
alert("All Fields are Required");
}
});
$(document).on('click', '.update', function() {
var id = $(this).attr("id");
$.ajax({
url: "fetch.php",
method: "POST",
data: {
id: id
},
dataType: "json",
success: function(data) {
$('#action').text("Save");
$('#docu_id').val(id);
$('#code').val(data.code);
$('#doc_kind').val(data.doc_kind);
$('#date_submitted').val(data.date_submitted);
$('#remarks').val(data.remarks);
}
})
"select.php",
method: "POST",
data: {
action: action
},
success: function(data) {
$('#code').val('');
$('#doc_kind').val('');
$('#date_submitted').value('');
$('#remarks').val('');
$('#action').text("Add");
$('#result').html(data);
}
});
}
$('#action').click(function() {
var docCode = $('#code').val();
var docKind = $('#doc_kind').val();
var dateSubmitted = $('#date_submitted').val();
var docRemarks = $('#remarks').val();
var id = $('#docu_id').val();
var action = $('#action').text();
if (docCode != '' && docKind != '' && dateSubmitted != '') {
$.ajax({
url: "action.php",
method: "POST",
data: {
docCode: docCode,
docKind: docKind,
dateSubmitted: dateSubmitted,
docRemarks: docRemarks,
id: id,
action: action
},
success: function(data) {
alert(data);
addDocu();
}
});
} else {
alert("All Fields are Required");
}
});
$(document).on('click', '.update', function() {
var id = $(this).attr("id");
$.ajax({
url: "fetch.php",
method: "POST",
data: {
id: id
},
dataType: "json",
success: function(data) {
$('#action').text("Save");
$('#docu_id').val(id);
$('#code').val(data.code);
$('#doc_kind').val(data.doc_kind);
$('#date_submitted').val(data.date_submitted);
$('#remarks').val(data.remarks);
}
})
});
</script>
if(isset($_POST["id"]))
{
$output = array();
$procedure = "
CREATE PROCEDURE whereDocu(IN docu_id int(11))
BEGIN
SELECT * FROM officesectb WHERE id = docu_id;
END;
";
function convert ($rem) {
$rem = trim($rem);
return preg_replace('/<br(\s+)?\/?>/i', "\n", $rem);
}
if(mysqli_query($connect, "DROP PROCEDURE IF EXISTS whereDocu"))
{
if(mysqli_query($connect, $procedure))
{
$query = "CALL whereDocu(".$_POST["id"].")";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$rem = $row["remarks"];
$output['code'] = $row["code"];
$output['doc_kind'] = $row["doc_kind"];
$output['date_submitted'] = $row['date_submitted'];
$output['remarks'] = convert($rem);
}
echo json_encode($output);
}
}
}

dependent dropdown error Undefined index: TRANCHE codeigniter

i have this drop-down dependent on the choices of the other 2 drop-downs i have debugged the java script but it has an error on my error logs that says,
Undefined index: TRANCHE
here is my controller
public function dependent_dropdown()
{
if(isset($_POST['TRANCHE']) || isset($_POST['GRADE']))
{
$data = $_POST['TRANCHE'];
$data1 = $_POST['GRADE'];
$this->output
->set_content_type("application/json")
->set_output(json_encode($this->EmployeeSalary_Model->getType($data, $data1)));
}
}
and here is my javascript
jQuery(document).ready(function(){
$("#GRADE").change(function() {
var TRANCHE = {"TRANCHE" : $('#TRANCHE').val()};
var GRADE = {"GRADE" : $('#GRADE').val()};
console.log(TRANCHE);
console.log(GRADE);
$.ajax({
type: "POST",
data: (TRANCHE, GRADE),
url: "<?php base_url(); ?>EmployeeSalary/dependent_dropdown/",
success: function(data){
var select = $('#SAL_ID');
select.html('');
$.each(data, function(i, option){
select.append("<option value='"+option.ID+"'>"+option.AMOUNT+"</option>");
});
}
});
});
});
please tell me the problem and how can i debug it. thanks
You have to make an array to send both values.
var postData = [ TRANCHE , GRADE ]
$.ajax({
type: "POST",
data: JSON.stringify(postData), ////stringify is important
url: "<?php base_url(); ?>EmployeeSalary/dependent_dropdown/",
success: function(data){
var select = $('#SAL_ID');
select.html('');
$.each(data, function(i, option){
select.append("<option value='"+option.ID+"'>"+option.AMOUNT+"</option>");
});
}
});

Cannot read property 'removeChild' of null dropzone

I have this code:
CODE JS:
var currentFile = null;
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", {
url : "<?php echo $this->serverUrl() . '/profile/ajax/dzupload'; ?>",
paramName : 'profilepicture',
acceptedFiles : "image/*",
maxFiles : 1,
addRemoveLinks : true,
init : function() {
var fileName = $('#profilePicture').val();
var mockFile = { name: fileName, size: 12345 };
this.options.addedfile.call(this, mockFile);
this.options.thumbnail.call(this, mockFile, "<?php echo $this->serverUrl().'/public/profile/'.'usr'.$practitionerInfo->user_id.'/picture/'.$practitionerInfo->profilepicture ?>");
currentFile = mockFile;
this.on("addedfile", function(file) {
if (currentFile) {
this.removeFile(currentFile);
}
currentFile = file;
});
this.on("success", function(file, responseText) {
$('#profilePicture').attr("value", responseText.filename);
console.log(responseText );
});
this.on("maxfilesexceeded", function(file){
this.removeFile(file);
alert("You are not allowed to chose more than 1 file!");
});
this.on("removedfile", function (file){
$.ajax({
method: 'POST',
url: '<?php echo $this->serverUrl() . '/profile/ajax/dzdelete' ?>',
data: {
area : 'company-profile',
name : $('#profilePicture').attr('value')
},
success: function(result){
$('#profilePicture').attr("value", '')
console.log(result);
}
})
});
}
});
ERROR:
Cannot read property 'removeChild' of null
What causes this error?
How can I solve it?
This error occurs when I get on the Upload function
It has never met anyone with such an error?How can I improve my code so that it only be this error?
Thanks in advance!
Replace the removedfile method to be like this
if ((_ref = file.previewElement) != null) {
//_ref.parentNode.removeChild(file.previewElement);
_ref.style.display = "none";
}
in file dropzone.js

how can i use post and files with ajax?

i'd like to know how can i use $_POST and $_FILES using ajax, i'm trying to upload an image and insert a value on my database with post.
i've tried but it doesn't work.
index.html
<div class="form-group">
<label> img </label>
<input type="file" name="img" id="img" />
<input type='hidden' id='value' value='<?=$_GET["p"]?>' />
</div>
ajax.js
$(document).ready(function() {
$('#upload').click(function() {
var value = $('#value').val();
var img = $('#img').val();
var string= 'value=' + value + '&img=' + img;
$.ajax({
type: "POST",
url: "ajax.php",
data: string,
dataType: "json",
success: function(data) {
var success = data['success'];
if (success == true) {
console.log('success');
} else {
console.log('error');
}
}
});
return false;
});
});
ajax.php
<?php
if(isset($_POST["value"]) && isset($_FILES["img"])) {
echo json_encode(array("success" => true));
} else {
echo json_encode(array("success" => false));
}
?>
The best approach is convert image to base64 first. This conversion is done in the change listener.
var files = [];
$("input[type=file]").change(function(event) {
$.each(event.target.files, function(index, file) {
var reader = new FileReader();
reader.onload = function(event) {
object = {};
object.filename = file.name;
object.data = event.target.result;
files.push(object);
};
reader.readAsDataURL(file);
});
});
$("form").submit(function(form) {
$.each(files, function(index, file) {
$.ajax({url: "/ajax-upload",
type: 'POST',
data: {filename: file.filename, data: file.data},
success: function(data, status, xhr) {}
});
});
files = [];
form.preventDefault();
});

Ajax call not succeeding after function call

I am attempting to load dynamic data based on the specific URI segment thats on the page.
Heres my Javascript:
$(document).ready(function() {
$(function() {
load_custom_topics();
});
$('#topics_form').submit(function() {
var topic = document.getElementById('topics_filter').value
$.ajax({
type: "POST",
url: 'ajax/update_session_topic',
dataType: 'json',
data: { topic: topic },
success: function(){
load_custom_topics()
}
});
return false;
});
function load_custom_topics(){
$.ajax({
type: "POST",
url: 'ajax/load_custom_topics',
dataType: 'json',
data: {},
success: function (html) {
$('div.topics_filter').html(html['content']);
get_threads();
}
});
}
function get_threads(){
var page = document.getElementById('page').value
$.ajax({
type: "POST",
url: 'ajax/get_threads',
dataType: 'json',
data: {page: page},
success: function (html) {
$('div#thread_list').html(html['content']);
}
});
}
});
So, as you can see, on page load, it kicks off load_custom_topics which runs just fine. Its then supposed to call get_threads(). This is where the thing stops, and I get no data.
Get_threads()
public function get_threads()
{
$session = $this->session->userdata('active_topic');
if ($this->input->post('page') == '1')
{
$data['list'] = $this->right_model->thread_list_all();
$data['test'] = "all";
} else {
$data['list'] = $this->right_model->thread_list_other($session);
$data['test'] = "not all";
}
if ($data['list'] == FALSE)
{
$content = "no hits";
} else {
$content = $this->load->view('right/thread_list', $data, TRUE);
}
$data['content'] = $content;
$this->output->set_content_type('application/json')->set_output(json_encode($data));
}
While I create the 'page' dynamically, the HTML outputs to this:
<div name="page" value="1"></div>
Any reason why get_threads() is not running?
This does not have an ID. It has a name.
<div name="page" value="1"></div>
This means that your request for getElementById is failing. So this line of code should be showing a TypeError in your console.
var page = document.getElementById('page').value

Categories