How to get data attribute for div item on another page - php

Question

I am using slim image cropper.
I have the following.
<div class="slim" data-service="async.php" data-ratio="3:2" data-size="600,400" data-row="">
<!-- <input type="hidden" id="rowID" name="rowID"> -->
<input type="file"/>
</div>
I added the data-row=" " and then in the jQuery I added the following.
$('.slim').attr('data-row', rowID);
That part is working fine, but now how do I retrieve the value of the data-row on the async.php page?
Here is ASYNC.php
<?php
// Uncomment if you want to allow posts from other domains
// header('Access-Control-Allow-Origin: *');
require_once('slim.php');
foreach(Slim::getImages() as $imagess) {
echo $imagess['meta']->data-row;
}
// Get posted data, if something is wrong, exit
try {
$images = Slim::getImages();
}
catch (Exception $e) {
// Possible solutions
// ----------
// Make sure you're running PHP version 5.6 or higher
Slim::outputJSON(array(
'status' => SlimStatus::FAILURE,
'message' => 'Unknown'
));
return;
}
// No image found under the supplied input name
if ($images === false) {
// Possible solutions
// ----------
// Make sure the name of the file input is "slim[]" or you have passed your custom
// name to the getImages method above like this -> Slim::getImages("myFieldName")
Slim::outputJSON(array(
'status' => SlimStatus::FAILURE,
'message' => 'No data posted'
));
return;
}
// Should always be one image (when posting async), so we'll use the first on in the array (if available)
$image = array_shift($images);
// Something was posted but no images were found
if (!isset($image)) {
// Possible solutions
// ----------
// Make sure you're running PHP version 5.6 or higher
Slim::outputJSON(array(
'status' => SlimStatus::FAILURE,
'message' => 'No images found'
));
return;
}
// If image found but no output or input data present
if (!isset($image['output']['data']) && !isset($image['input']['data'])) {
// Possible solutions
// ----------
// If you've set the data-post attribute make sure it contains the "output" value -> data-post="actions,output"
// If you want to use the input data and have set the data-post attribute to include "input", replace the 'output' String above with 'input'
Slim::outputJSON(array(
'status' => SlimStatus::FAILURE,
'message' => 'No image data'
));
return;
}
// if we've received output data save as file
if (isset($image['output']['data'])) {
// get the name of the file
$name = $image['output']['name'];
// get the crop data for the output image
$data = $image['output']['data'];
// If you want to store the file in another directory pass the directory name as the third parameter.
// $output = Slim::saveFile($data, $name, 'my-directory/');
// If you want to prevent Slim from adding a unique id to the file name add false as the fourth parameter.
// $output = Slim::saveFile($data, $name, 'tmp/', false);
// Default call for saving the output data
$output = Slim::saveFile($data, $name, 'images/modules/listings');
}
// if we've received input data (do the same as above but for input data)
if (isset($image['input']['data'])) {
// get the name of the file
$name = $image['input']['name'];
// get the crop data for the output image
$data = $image['input']['data'];
// If you want to store the file in another directory pass the directory name as the third parameter.
// $input = Slim::saveFile($data, $name, 'my-directory/');
// If you want to prevent Slim from adding a unique id to the file name add false as the fourth parameter.
// $input = Slim::saveFile($data, $name, 'tmp/', false);
// Default call for saving the input data
$input = Slim::saveFile($data, $name, 'images/modules/listings');
}
//
// Build response to client
//
$response = array(
'status' => SlimStatus::SUCCESS
);
if (isset($output) && isset($input)) {
$response['output'] = array(
'file' => $output['name'],
'path' => $output['path']
);
$response['input'] = array(
'file' => $input['name'],
'path' => $input['path']
);
}
else {
$response['file'] = isset($output) ? $output['name'] : $input['name'];
$response['path'] = isset($output) ? $output['path'] : $input['path'];
}
// Return results as JSON String
Slim::outputJSON($response);
Here is the SLIM.php
<?php
abstract class SlimStatus {
const FAILURE = 'failure';
const SUCCESS = 'success';
}
class Slim {
public static function getImages($inputName = 'slim') {
$values = Slim::getPostData($inputName);
// test for errors
if ($values === false) {
return false;
}
// determine if contains multiple input values, if is singular, put in array
$data = array();
if (!is_array($values)) {
$values = array($values);
}
// handle all posted fields
foreach ($values as $value) {
$inputValue = Slim::parseInput($value);
if ($inputValue) {
array_push($data, $inputValue);
}
}
// return the data collected from the fields
return $data;
}
// $value should be in JSON format
private static function parseInput($value) {
// if no json received, exit, don't handle empty input values.
if (empty($value)) {return null;}
// If magic quotes enabled
if (get_magic_quotes_gpc()) {
$value = stripslashes($value);
}
// The data is posted as a JSON String so to be used it needs to be deserialized first
$data = json_decode($value);
// shortcut
$input = null;
$actions = null;
$output = null;
$meta = null;
if (isset ($data->input)) {
$inputData = null;
if (isset($data->input->image)) {
$inputData = Slim::getBase64Data($data->input->image);
}
else if (isset($data->input->field)) {
$filename = $_FILES[$data->input->field]['tmp_name'];
if ($filename) {
$inputData = file_get_contents($filename);
}
}
$input = array(
'data' => $inputData,
'name' => $data->input->name,
'type' => $data->input->type,
'size' => $data->input->size,
'width' => $data->input->width,
'height' => $data->input->height,
);
}
if (isset($data->output)) {
$outputDate = null;
if (isset($data->output->image)) {
$outputData = Slim::getBase64Data($data->output->image);
}
else if (isset ($data->output->field)) {
$filename = $_FILES[$data->output->field]['tmp_name'];
if ($filename) {
$outputData = file_get_contents($filename);
}
}
$output = array(
'data' => $outputData,
'name' => $data->output->name,
'type' => $data->output->type,
'width' => $data->output->width,
'height' => $data->output->height
);
}
if (isset($data->actions)) {
$actions = array(
'crop' => $data->actions->crop ? array(
'x' => $data->actions->crop->x,
'y' => $data->actions->crop->y,
'width' => $data->actions->crop->width,
'height' => $data->actions->crop->height,
'type' => $data->actions->crop->type
) : null,
'size' => $data->actions->size ? array(
'width' => $data->actions->size->width,
'height' => $data->actions->size->height
) : null,
'rotation' => $data->actions->rotation,
'filters' => $data->actions->filters ? array(
'sharpen' => $data->actions->filters->sharpen
) : null
);
}
if (isset($data->meta)) {
$meta = $data->meta;
}
// We've sanitized the base64data and will now return the clean file object
return array(
'input' => $input,
'output' => $output,
'actions' => $actions,
'meta' => $meta
);
}
// $path should have trailing slash
public static function saveFile($data, $name, $path = 'tmp/', $uid = true) {
// Add trailing slash if omitted
if (substr($path, -1) !== '/') {
$path .= '/';
}
// Test if directory already exists
if(!is_dir($path)){
mkdir($path, 0755, true);
}
// Sanitize characters in file name
$name = Slim::sanitizeFileName($name);
// Let's put a unique id in front of the filename so we don't accidentally overwrite other files
if ($uid) {
$name = uniqid() . '_' . $name;
}
// Add name to path, we need the full path including the name to save the file
$path = $path . $name;
// store the file
Slim::save($data, $path);
// return the files new name and location
return array(
'name' => $name,
'path' => $path
);
}
/**
* Get data from remote URL
* #param $url
* #return string
*/
public static function fetchURL($url, $maxFileSize) {
if (!ini_get('allow_url_fopen')) {
return null;
}
$content = null;
try {
$content = #file_get_contents($url, false, null, 0, $maxFileSize);
} catch(Exception $e) {
return false;
}
return $content;
}
public static function outputJSON($data) {
header('Content-Type: application/json');
echo json_encode($data);
}
/**
* http://stackoverflow.com/a/2021729
* Remove anything which isn't a word, whitespace, number
* or any of the following characters -_~,;[]().
* If you don't need to handle multi-byte characters
* you can use preg_replace rather than mb_ereg_replace
* #param $str
* #return string
*/
public static function sanitizeFileName($str) {
// Basic clean up
$str = preg_replace('([^\w\s\d\-_~,;\[\]\(\).])', '', $str);
// Remove any runs of periods
$str = preg_replace('([\.]{2,})', '', $str);
return $str;
}
/**
* Gets the posted data from the POST or FILES object. If was using Slim to upload it will be in POST (as posted with hidden field) if not enhanced with Slim it'll be in FILES.
* #param $inputName
* #return array|bool
*/
private static function getPostData($inputName) {
$values = array();
if (isset($_POST[$inputName])) {
$values = $_POST[$inputName];
}
else if (isset($_FILES[$inputName])) {
// Slim was not used to upload this file
return false;
}
return $values;
}
/**
* Saves the data to a given location
* #param $data
* #param $path
* #return bool
*/
private static function save($data, $path) {
if (!file_put_contents($path, $data)) {
return false;
}
return true;
}
/**
* Strips the "data:image..." part of the base64 data string so PHP can save the string as a file
* #param $data
* #return string
*/
private static function getBase64Data($data) {
return base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));
}
}
That is all the pages includes, I am not sure where to even add this so I can retrieve this rowID, is it under the async, or the slim. Sorry for the confusion. Hopefully adding these pages helped clear some stuff up.

Answer 1

Your HTML can stay the same.
<div class="slim" data-service="async.php" data-ratio="3:2" data-size="600,400">
<input type="file" />
</div>
Append data-meta-data-row to contain the rowID as well in your JS.
(['data-meta-data-row', 'data-row']).forEach( (key) => {
$('.slim').attr(key, rowID);
});
On the server side, you can then use the meta key which holds an object of properties like so:
foreach(Slim::getImages() as $image)
echo $image['meta']->data-row;

Answer 2

So after lots of hacking. I figured it out with the help of the slim frameworks developer.
Per the documentation, there is a function called willSave, this can be triggered and will update whenever is called on the server.
The meta data for slim is only called on page load, that is why it was never reading when the variable was updated via my custom function.
My fix was the following:
After opening the modal, I created the will save function. I passed the variable from the function that opens the modal, to the save function.
Code below for reference and big shout out to the developer for the initial help.
html
<div id="slim" class="slim" data-service="async.php" data-ratio="3:2" data-size="600,400" data-will-save="saveRow">
<input type="file"/>
</div>
JS
function addThumb(rowID) {
//$('.slim').attr('data-meta-data-row', rowID);
window.row = rowID;
$("#imageManager").modal('show');
}
function saveRow(data, ready) {
data.meta.row = window.row;
ready(data);
}