Send and image from PHP to Javascript (JSON) - javascript

I'm trying to make a "meal" in my DB, so in my website i made a form with a name, and a picture. This is the code of the form :
<?php
$new_meal_title = htmlentities($_POST["new_meal_title"]);
$new_meal_img = htmlentities($_POST["new_meal_img"]);
$data = array(
'new_meal_title' => $new_meal_title,
'new_meal_img' => base64_encode($new_meal_img)
);
$options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data)
)
);
$context = stream_context_create($options);
$result = file_get_contents(constant("API_URL")."/meal", false, $context);
if($result === FALSE){
var_dump($result);
}
$json = json_decode($result);
if($json->success == "true"){
header('Location: ../../');
return;
}
else{
echo $json->message;
}
header('Location: ../../');
?>
The form is sending data to my Node API. My Question is, how to save into a folder the image path through form in Javascript after it has been received in JSON.

Thanks for your help, i just had to change this line :
$new_meal_img = htmlentities($_POST["new_meal_img"]);
By
$new_meal_img = $_FILES['new_meal_img']["tmp_name"];
And
'new_meal_img' => base64_encode($new_meal_img)
By
'new_meal_img' => base64_encode(file_get_contents($new_meal_img))

Related

Access multiple files from multiple file inputs using $_FILES after using FormData (And add to ACF data on WP Backend)

Using Wordpress, I'm attempting to access files from one out of two file inputs using $_FILES but running into some problems:
To outline - I'm using a front-end form that has two file fields, both of which accept multiple files:
<form id="form" action="" method="post">
<input type="text" name="my_name">
<input type="file" name="reference_images[]" multiple>
<input type="file" name="photo_of_area[]" multiple>
</form>
The file inputs will be taking images, and I need to upload images from "reference_images" to one repeater field, ad "photo_of_area" to another repeater field. This form is posted via AJAX using FormData - the functions for this are below:
function saveForm(varform) {
blockUI();
jQuery.ajax({
type: "POST",
url: window.ajaxObject.ajaxUrl,
dataType: "JSON",
data: varform,
processData: false,
contentType: false,
cache: false,
success: onSuccesPing(),
crossDomain:true,
});
}
jQuery('#form').submit(function(event) {
event.preventDefault(); // Prevent form submitting as normal
var formData = new FormData(jQuery('#form')[0]);
formData.append("action", "messaging_post");
saveForm(formData);
});
I then have a function handle the messaging_post action which is below, this creates a new post with the form data, and loops over the attached images and injects them to my ACF repeater:
add_action( 'wp_ajax_messaging_post', 'messaging_post' );
add_action('wp_ajax_nopriv_messaging_post', 'messaging_post');
function messaging_post(){
if(isset($_POST['my_name'])) {
$name = sanitize_text_field($_POST['my_name']);
$new_post = array(
'ID' => '',
'post_type' => 'quote_requests',
'post_status' => 'publish',
'post_title' => $title,
'post_content' => '',
);
$post_id = wp_insert_post($new_post);
$post = get_post($post_id);
update_field('name', $name, $post_id); // Updates the ACF text field 'name' for the inserted post
// Works, but uploads files from BOTH file inputs to the single ACF repeater:
foreach($_FILES as $value){
for ($i=0; $i <count($value['name']); $i++) {
$errors= array();
$file_name = $value['name'][$i];
$file_size = $value['size'][$i];
$file_tmp = $value['tmp_name'][$i];
$file_type = $value['type'][$i];
$file_ext=strtolower(end(explode('.',$value['name'][$i])));
if(empty($errors)==true) {
$wordpress_upload_dir = wp_upload_dir();
$profilepicture = $wordpress_upload_dir['path'].'/';
move_uploaded_file($file_tmp, $profilepicture.$file_name);
} else{
print_r($errors);
}
$file_name_and_location = $profilepicture.$file_name;
$file_title_for_media_library = $value['name'][$i];
$fildename = $value['name'][$i];
$arr_file_type = wp_check_filetype(basename($fildename));
$uploaded_file_type = $arr_file_type['type'];
$attachment = array(
'post_mime_type' => $uploaded_file_type,
'post_title' => addslashes($file_title_for_media_library),
'post_content' => $fildename,
'post_status' => 'inherit',
'post_parent' => 0,
'post_author' => get_current_user_id(),
);
wp_read_image_metadata( $file_name_and_location );
$attach_id = wp_insert_attachment( $attachment, $file_name_and_location,true,false);
$attach_data = wp_generate_attachment_metadata($attach_id,$file_name_and_location );
wp_update_attachment_metadata( $attach_id, $attach_data );
$images[]= array("image" => $attach_id);
}
}
update_field('photo_area', $images, $post_id);
}
}
The above works, and populates the created post with the name from the form, but this attaches files from BOTH the reference_images and photo_of_area to the photo_area ACF repeater.
When trying to access $_FILES using a function such as the following:
foreach($_FILES["photo_of_area"] as $value){
for ($i=0; $i <count($value['name']); $i++) {
$errors= array();
$file_name = $value['name'][$i];
$file_size = $value['size'][$i];
$file_tmp = $value['tmp_name'][$i];
$file_type = $value['type'][$i];
$file_ext=strtolower(end(explode('.',$value['name'][$i])));
if(empty($errors)==true) {
$wordpress_upload_dir = wp_upload_dir();
$profilepicture = $wordpress_upload_dir['path'].'/';
move_uploaded_file($file_tmp, $profilepicture.$file_name);
} else{
print_r($errors);
}
$file_name_and_location = $profilepicture.$file_name;
$file_title_for_media_library = $value['name'][$i];
$fildename = $value['name'][$i];
$arr_file_type = wp_check_filetype(basename($fildename));
$uploaded_file_type = $arr_file_type['type'];
$attachment = array(
'post_mime_type' => $uploaded_file_type,
'post_title' => addslashes($file_title_for_media_library),
'post_content' => $fildename,
'post_status' => 'inherit',
'post_parent' => 0,
'post_author' => get_current_user_id(),
);
wp_read_image_metadata( $file_name_and_location );
$attach_id = wp_insert_attachment( $attachment, $file_name_and_location,true,false);
$attach_data = wp_generate_attachment_metadata($attach_id,$file_name_and_location );
wp_update_attachment_metadata( $attach_id, $attach_data );
$images[]= array("image" => $attach_id);
}
}
update_field('photo_area', $images, $post);
This doesn't seem to work and returns nothing.
I'm assuming that after going through FormData(), the files are now not accessible on the normal $_FILES['name_of_input'], and should rather have something else done with them?
I've also tried just appending the images to the FormData, but seemed to be having the same issue.
Would anyone be able to shed some light on how I could access $_FILES["photo_of_area"], and also $_FILES["reference_images"] independently of each other after being passed through FormData()? Or any alternative ways that I should look at to achieve the desired behaviour.
Ideally, I need to access images from each file input respectively.
Thanks!
I've managed to achieve this by changing my loop over the $_FILES array as such:
$photo_of_area = $_FILES["photo_of_area"];
foreach ($photo_of_area['name'] as $key => $value) {
$errors = array();
$file_name = $photo_of_area['name'][$key];
$file_size = $photo_of_area['size'][$key];
$file_tmp = $photo_of_area['tmp_name'][$key];
$file_type = $photo_of_area['type'][$key];
$file_ext = strtolower(end(explode('.',$photo_of_area['name'][$key])));
if (empty($errors) == true) {
$wordpress_upload_dir = wp_upload_dir();
$upload_dir_path = $wordpress_upload_dir['path'].'/';
move_uploaded_file($file_tmp, $upload_dir_path.$file_name);
} else {
print_r($errors);
}
$file_name_and_location = $upload_dir_path.$file_name;
$file_title_for_media_library = $photo_of_area['name'][$key];
$fildename = $photo_of_area['name'][$key];
$arr_file_type = wp_check_filetype(basename($fildename));
$uploaded_file_type = $arr_file_type['type'];
$attachment = array(
'post_mime_type' => $uploaded_file_type,
'post_title' => addslashes($file_title_for_media_library),
'post_content' => $fildename,
'post_status' => 'inherit',
'post_parent' => 0,
'post_author' => get_current_user_id(),
);
wp_read_image_metadata( $file_name_and_location );
$attach_id = wp_insert_attachment( $attachment, $file_name_and_location,true,false);
$attach_data = wp_generate_attachment_metadata($attach_id,$file_name_and_location );
wp_update_attachment_metadata( $attach_id, $attach_data );
$area_photos_array[] = array("image" => $attach_id);
}
update_field('photo_area', $area_photos_array, $post_id);
This successfully injects each image uploaded to a new row of the photo_area repeater inside the current post specified by $post_id.

data-complete event not working in Mastercard Payment Gateway Checkout.js integration

I'm using the master card checkout.js method version 57.
There are two types of payments ways.
I want to use only showLightbox() but unfortunately completeCallback() function is not working.
I have tried to find solution but everyone is suggesting to send Interaction.returnUrl parameter in session request but I don't want redirection.
Here is my code,
<script src="https://dohabank.gateway.mastercard.com/checkout/version/57/checkout.js"
data-error="errorCallback"
data-cancel="cancelCallback"
data-beforeRedirect="beforeRedirect"
data-afterRedirect="afterRedirect"
data-complete="completeCallback"
></script>
function completeCallback(resultIndicator, sessionVersion) {
alert(resultIndicator);
}
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://dohabank.gateway.mastercard.com/api/rest/version/57/merchant/TESTDB95810/session",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => "{\r\n \"apiOperation\": \"CREATE_CHECKOUT_SESSION\",\r\n \"interaction\": {\r\n \"operation\": \"PURCHASE\"\r\n },\r\n \"order\" : {\r\n \"amount\" : \"5.10\",\r\n \"currency\" : \"QAR\",\r\n \"description\": \"Ordered goods\",\r\n \"id\": \"5\"\r\n }\r\n}",
CURLOPT_HTTPHEADER => array(
"authorization: Basic Auth Token",
"cache-control: no-cache"
),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
// if ($err) {
// echo "cURL Error #:" . $err;
// } else {
// echo $response;
// }
// echo $response;
$object = json_decode($response);
$sessionId = $object->{'session'}->id;
//$sessionSuccess = $object->{'successIndicator'};
//echo $sessionId;
echo $sessionId;
I Found the solution. MerchantId was missing in **Checkout.configure()** method.

Multilevel Login in php&mysqli with codeigniter

i have 3 user with different access page, i have try create login form standart with no limit access. now i'm confussed where i must place new code multiple login.
( i use php&mysqli database with codeigniter framework )
Please help me,
thk u before
database image
code image
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
function __construct(){
parent::__construct();
$this->load->model('m_rental');
}
public function index(){
$this->load->view('login');
}
function login(){
$username = $this->input->post('username');
$password = $this->input->post('password');
$this->form_validation->set_rules('username','Username','trim|required');
$this->form_validation->set_rules('password','Password','trim|required');
if($this->form_validation->run() != false){
$where = array(
'admin_username' => $username,
'admin_password' => $password,
);
$data = $this->m_rental->edit_data($where,'admin');
$d = $this->m_rental->edit_data($where,'admin')->row();
$cek = $data->num_rows();
if($cek > 0){
$session = array(
'id'=> $d->admin_id,
'nama'=> $d->admin_nama,
'status' => 'login'
);
$this->session->set_userdata($session);
redirect(base_url().'admin');
}else{
redirect(base_url().'welcome?pesan=gagal');
}
}else{
$this->load->view('login');
}
}
}
Try to add level to your session and read it later on dashboard page:
$session = array(
'id'=> $d->admin_id,
'nama'=> $d->admin_nama,
'status' => 'login',
'level' => $d->level
);
And on dashboard page
if($this->session->userdata["level"] === "superadmin")
{
// Code if level = superadmin
}

ajax form submit to php file and to url?

I have a subscribe form in wordpress that (currently) only has the ability to add submitted email to a custom post type (subscribers) and show it in backend.I am wondering how to also have this functionality, and send this email to a custom url (concretely to APSIS).
So I have a form
<form id="subscribe" class="subscribe_form" name="subscribe_form" action="#" method="post">
<input name="subscriber_email" class="subscriber_email" placeholder="Your mail here">
<input class="submit" type="submit" value="Submit">
</form>
My save custom post type function that gets executed via AJAX
<?php
add_action('wp_ajax_save_subscriber', 'save_subscriber');
add_action('wp_ajax_nopriv_save_subscriber', 'save_subscriber');
if (!function_exists('save_subscriber')) {
function save_subscriber() {
if (isset($_POST['subscriber_email']) && is_email($_POST['subscriber_email'])) {
global $wpdb;
$post_data = array(
'post_type' => 'subscribers',
'post_status' => 'publish'
);
$published_id = wp_insert_post( $post_data );
add_post_meta($published_id, 'subscriber_email', $_POST['subscriber_email']);
$out = 'OK';
} else{
$out = 'ERROR';
}
die($out);
}
}
And my AJAX
$('#subscribe').submit(function() {
'use strict';
var str = $(this).serialize() + '&action=save_subscriber';
var $form = $(this);
var $wrapper = $(this).parent();
$.ajax({
type: 'POST',
url: custom.ajaxurl,
data: str,
success: function(msg){
if( msg === 'OK' ) {
$form.animate({ height: '0px' }, 800, function() {
$form.hide();
});
$wrapper.find('.success_message').delay(400).html(custom.success).slideDown(600);
}else {
$wrapper.find('.subscriber_email').addClass('field_error').attr('placeholder', custom.error_mail).val('').focus();
}
}
});
return false;
});
Now I have some more wrappers, and noonce field etc. but that's not important here.
This works fine when you want to just add a post to the CPT, but I need to submit this to
http://www.anpdm.com/public/process-subscription-form.aspx?formId=xxxxxxxxxxx
I got the id and everything from the client, now I need to implement this.
I've seen something about curl, but I've never done anything with it, so I don't really know where to start. Since my action is pointing to my save_subscriber() function I recon that in that function I'd also have to add a way to send this form to the required url. But how?
Any info will help, thanks.
ANSWER
So following the answer provided by silver, I managed to get it working.
#Run CURL
$url = 'http://www.anpdm.com/public/process-subscription-form.aspx?formId=xxxxxxxxxx';
$request = curl_init();
curl_setopt_array( $request, array (
CURLOPT_RETURNTRANSFER => TRUE,
CURLOPT_URL => $url,
CURLOPT_POST => 1,
CURLOPT_USERAGENT => 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13',
CURLOPT_POSTFIELDS => $custom_query_string,
));
$response = curl_exec($request);
$response_data = curl_getinfo($request);
curl_close($request);
#END CURL
if ($response_data['http_code'] == 200) {
$out = 'OK';
}
The formId is the form number specific for this user, and the $custom_query_string conformed to the form provided by APSIS and contained something like this:
pf_Email=$_POST['email']&
Submit=Prenumerera&
pf_DeliveryFormat=HTML&
pf_MailinglistName1=xxxxx&
pf_FormType=OptInForm&
pf_OptInMethod=SingleOptInMethod&
pf_CounterDemogrFields=0&
pf_CounterMailinglists=1&
pf_AccountId=xxxx&
pf_ListById=1&
pf_Version=2
After that all worked, I get my subscribers in the wordpress backend, and they appear in the APSIS console where the users are :)
I guess I needed user_agent and correct query string.
If I were you I'll just duplicate the current form with different ID and action pointing to a different URL then hide it populating it automatically based on firs form, then silently submit it on Success response of first form Ajax request,
But yeah, If you need to POST URL using CURL-PHP without any form this example code below will probably do, I hook it on your current function.
function save_subscriber() {
if (isset($_POST['subscriber_email']) && is_email($_POST['subscriber_email'])) {
global $wpdb;
$post_data = array(
'post_type' => 'subscribers',
'post_status' => 'publish'
);
$published_id = wp_insert_post( $post_data );
add_post_meta($published_id, 'subscriber_email', $_POST['subscriber_email']);
#Run CURL
$url = 'http://www.anpdm.com/public/process-subscription-form.aspx'; // URL to be Posted
$request = curl_init(); //open connection
curl_setopt_array( $request, array (
CURLOPT_RETURNTRANSFER => TRUE,
CURLOPT_URL => $url,
CURLOPT_POST => 1,
CURLOPT_POSTFIELDS => $_REQUEST, /* Since your form is already serialize, you don't need to build query string*/
));
$response = curl_exec($request); // Execute Curl
$response_data = curl_getinfo($request); // Array of curl response info
curl_close($request); // Close Connection
#END CURL
#$out = $response; // push curl response on Ajax Submit response
$out = $response_data['http_code']; /* 200 will be the value of this for successfully curl request, you can just replace your Ajax success code with 200 instead of OK or just ignore the response, though its better to know if curl request is successful*/
} else{
$out = 'ERROR';
}
die($out);
}
Testing
$url = 'http://www.anpdm.com/public/process-subscription-form.aspx';
$request = curl_init();
curl_setopt_array( $request, array (
CURLOPT_RETURNTRANSFER => TRUE,
CURLOPT_URL => $url,
CURLOPT_POST => 1,
CURLOPT_POSTFIELDS => "id=noID&value=novalue",
));
$response = curl_exec($request);
$response_data = curl_getinfo($request);
curl_close($request);
print_r( $response_data );
$response_data OUTPUT
Array
(
[url] => http://www.anpdm.com/public/process-subscription-form.aspx
[content_type] => text/html; charset=utf-8
[http_code] => 200
[header_size] => 222
[request_size] => 180
[filetime] => -1
[ssl_verify_result] => 0
[redirect_count] => 0
[total_time] => 1.546
[namelookup_time] => 0.515
[connect_time] => 0.843
[pretransfer_time] => 0.843
[size_upload] => 21
[size_download] => 13048
[speed_download] => 8439
[speed_upload] => 13
[download_content_length] => 13048
[upload_content_length] => 21
[starttransfer_time] => 1.203
[redirect_time] => 0
[redirect_url] =>
[primary_ip] => 89.234.52.177
[certinfo] => Array
(
)
[primary_port] => 80
[local_ip] => 192.168.254.8
[local_port] => 53736
)

share canvas image on Facebook using Javascript

I have a FB app that enable the user to draw shapes and type text on a canvas. The app should have a feature to share what is on canvas on FB as custom story. I was able to do that using PHP SDK.
My question is can I do the same using only JavaScript SDK without any server side code?
Thanks,
Haider
My PHP code is below:
$imgDataBase64 = $_REQUEST["imgBase64"];
$img = str_replace('data:image/png;base64,', '', $imgDataBase64);
$img = str_replace(' ', '+', $img);
$imgData = base64_decode($img);
$pictName = tempnam(sys_get_temp_dir(),"hs").".png";
$ret = file_put_contents($pictName, $imgData);
if ($fbuser) {
try {
$access_token = $facebook->getAccessToken();
$imageURI = $facebook->api(
'me/staging_resources',
'POST',
array(
'file' => "#".$pictName.";type=image/png",
'access_token' => $access_token
)
);
$object = $facebook->api(
'me/objects/testapp:photo',
'POST',
array(
'access_token' => $access_token,
'object' => array(
'app_id' => xxxxxxxxxxxxxxx,
'type' => "testapp:photo",
'title' => "test",
'image' => array (
'url' => $imageURI['uri'],
'user_generated' => true
)
)
)
);
$action = $facebook->api(
'me/testapp:share',
'POST',
array(
'photo' => $object['id'],
'access_token' => $access_token
)
);

Categories

Resources