I am trying to create a Button so the user can copy the $filename the code works for the first one but not for the rest I understand that this is because I would probably need to array the js-copyfilename and js-copyfilenamebtn classes so each one is different but then I know very little about JavaScript so wouldn't know where to start
Thanks in advance
<p>Current Images Inside Gallery
<br />
<?php foreach($rows as $row): ?>
<div class="t">
<table class="table2">
<tr>
<td class="table2"><?php echo $row["id"]; ?></td>
</tr>
<tr>
<td><img src="images/<?php echo $row["photo"] ; ?>" alt="" width="130" height="130" /></td>
</tr>
<tr>
<td><textarea class="js-copyfilename" readonly="readonly" ><?php echo $row["photo"];?></textarea>
<button class="js-copyfilenamebtn">Copy Filname</button>
</td>
</tr>
</table>
</div>
<?php endforeach;?>
</div>
<script type="text/javascript">
var copyfilenameBtn = document.querySelector('.js-copyfilenamebtn');
copyfilenameBtn.addEventListener('click', function(event) {
var copyfilename = document.querySelector('.js-copyfilename');
copyfilename.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
</script></div>
For anybody trying to do something similar I done it like so... This code selects all rows in db, puts them into table, and then creates a copy filename button for each of them and copies the one you click into the filename field once you enter the id and click submit the delete form it will delete that image from the database and directory + a few other validation checks
function ClipBoard(obj) {
var filename = document.getElementById("filename");
filename.innerText = obj.innerText;
Copied = filename.createTextRange();
Copied.execCommand("Copy");
}@charset "utf-8";
/* CSS Document */
#wrap
{
height:800px;
text-align:center;
}
.table1 {
text-align:center;
font-weight: bold;
width: 130px;
font-size:14px;
}
.table2 {
float:left;
text-align:center;
font-weight: bold;
width: 130px;
border: 1px solid #000;
font-size:14px;
}
.t {
width:140px;
display:inline-block;
margin:0 auto;
}
.js-copyfilename {
text-align:center;
font-weight: bold;
width: 128px;
height:16px;
border:1px solid #000;
font-size:14px;
overflow:hidden;
}<?php
// Include Databse
include "common.php";
// validation errors
$error = array();
// Check if form has been submitted
if (isset ($_POST['delete']))
{
// get the filename & id. See php.net/basename for more info
$filename = basename($_POST['filename']);
$id =($_POST['id']);
// get file extension, see php.net/pathinfo for more info
$ext = pathinfo($_POST['filename'], PATHINFO_EXTENSION);
// allowed file extensions
$allowedExtensions = array('jpeg','jpg','gif','png','bmp');
// Check filename is not empty
if(empty($filename))
{
$error[] = "Please enter a Filename";
}
// Check valid file extension used
else if(!in_array($ext, $allowedExtensions))
{
$error[] = "Please check Filename";
}
// Check ID is not empty
if(empty($_POST['id']))
{
$error[] = "Please enter a ID";
}
else if(is_numeric($id))
{
// Check ID exists in database
$query = "SELECT id FROM `test` WHERE `id` = :id" ;
$stmt = $db->prepare($query);
$stmt->bindParam(":id", $id);
$stmt->execute();
if(!$stmt->rowCount() == 1)
{
$error[] = "Please check ID";
}
}
else {
$error[] = "ID is not numeric";
}
// delete file from database if there are no errors
if (empty($error))
{
// path to the image
$file_to_delete = 'images/' . $filename;
// Checks the file exists and that is a valid image
if(file_exists($file_to_delete) && getimagesize($file_to_delete))
{
// Delete File From Directory
unlink($file_to_delete);
}
else
{
$error[] = "File not found please check Filename";
}
if (empty($error))
{
// Run Query To Delete File Information From Database
try
{
$query = "DELETE FROM `test` WHERE `id` = :id";
$stmt = $db->prepare($query);
$stmt->execute(array('id' => intval($_POST['id'])));
}
catch(PDOException $ex)
{
die("Failed to run query: Please report issue to admin");
}
$status = "File Deleted";
}
}
}
// Run Query To Show The Current Data In Database
try
{
$query = "SELECT id,photo FROM test ORDER BY id";
$stmt = $db->prepare($query);
$stmt->execute();
}
catch(PDOException $ex)
{
die("Failed to run query: Please report issue to admin");
}
$rows = $stmt->fetchAll();
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Delete Image</title>
<link href="css/delete.css" rel="stylesheet" type="text/css" />
<script src="copy.js"></script>
</head>
<body>
<div id="wrap">
<form action="delete.php" method="post" enctype="multipart/form-data">
Please enter the Filename and ID of the image you wish to delete
<table width="284" align="center">
<tr>
<td width="144" class="table1">Filename</td>
<td width="128" class="table1">ID </td>
</tr>
<tr>
<td class="table1"><input name="filename" id="filename" type="text" value="<?php echo $filename; ?>" /></td>
<td class="table1"><input name="id" type="text" id="id" value="<?php echo $id; ?>" size="3" maxlength="4" /></td>
</tr>
</table>
<p>
<?php
// Show validation errros here
if(!empty($error)):
echo implode('<br />', $error);
echo $status;
endif;
?>
<br />
<input type="submit" value="Delete Selected Image" name="delete" />
</p>
</form>
<p>Current Images Inside Gallery
<br />
<?php
foreach($rows as $row):
$i = $row["photo"];
?>
<div class="t">
<table class="table2">
<tr>
<td class="table2"><?php echo $row["id"]; ?></td>
</tr>
<tr>
<td><img src="images/<?php echo $row["photo"] ; ?>" alt="" width="130" height="130" /></td>
</tr>
<tr>
<td><?php print '<textarea class="js-copyfilename" name="copytext'.$i.'" id="copytext'.$i.'">'.$i.'</textarea>
<input type="button" onclick="ClipBoard(document.getElementById(\'copytext'.$i.'\'));" value="Copy Filename">
'; ?>
</td>
</tr>
</table>
</div>
<?php endforeach;?>
</div>
</body>
</html>
COMMON.PHP
<?php
// These variables define the connection information for your MySQL database
$username = "";
$password = "";
$host = "";
$dbname = "";
// UTF-8 is a character encoding scheme that allows you to conveniently store
// a wide varienty of special characters, like ¢ or €, in your database.
// By passing the following $options array to the database connection code we
// are telling the MySQL server that we want to communicate with it using UTF-8
// See Wikipedia for more information on UTF-8:
// http://en.wikipedia.org/wiki/UTF-8
$options = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8');
// A try/catch statement is a common method of error handling in object oriented code.
// First, PHP executes the code within the try block. If at any time it encounters an
// error while executing that code, it stops immediately and jumps down to the
// catch block. For more detailed information on exceptions and try/catch blocks:
// http://us2.php.net/manual/en/language.exceptions.php
try
{
// This statement opens a connection to your database using the PDO library
// PDO is designed to provide a flexible interface between PHP and many
// different types of database servers. For more information on PDO:
// http://us2.php.net/manual/en/class.pdo.php
$db = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8", $username, $password, $options);
}
catch(PDOException $ex)
{
// If an error occurs while opening a connection to your database, it will
// be trapped here. The script will output an error and stop executing.
// Note: On a production website, you should not output $ex->getMessage().
// It may provide an attacker with helpful information about your code
// (like your database username and password).
die("Failed to connect to the database: " . $ex->getMessage());
}
// This statement configures PDO to throw an exception when it encounters
// an error. This allows us to use try/catch blocks to trap database errors.
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// This statement configures PDO to return database rows from your database using an associative
// array. This means the array will have string indexes, where the string value
// represents the name of the column in your database.
$db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
// This block of code is used to undo magic quotes. Magic quotes are a terrible
// feature that was removed from PHP as of PHP 5.4. However, older installations
// of PHP may still have magic quotes enabled and this code is necessary to
// prevent them from causing problems. For more information on magic quotes:
// http://php.net/manual/en/security.magicquotes.php
if(function_exists('get_magic_quotes_gpc') && get_magic_quotes_gpc())
{
function undo_magic_quotes_gpc(&$array)
{
foreach($array as &$value)
{
if(is_array($value))
{
undo_magic_quotes_gpc($value);
}
else
{
$value = stripslashes($value);
}
}
}
undo_magic_quotes_gpc($_POST);
undo_magic_quotes_gpc($_GET);
undo_magic_quotes_gpc($_COOKIE);
}
// This tells the web browser that your content is encoded using UTF-8
// and that it should submit content back to you using UTF-8
header('Content-Type: text/html; charset=utf-8');
// This initializes a session. Sessions are used to store information about
// a visitor from one web page visit to the next. Unlike a cookie, the information is
// stored on the server-side and cannot be modified by the visitor. However,
// note that in most cases sessions do still use cookies and require the visitor
// to have cookies enabled. For more information about sessions:
// http://us.php.net/manual/en/book.session.php
session_start();
// Note that it is a good practice to NOT end your PHP files with a closing PHP tag.
// This prevents trailing newlines on the file from being included in your output,
// which can cause problems with redirecting users. </div>