Uploadify - change destination folder to another folder on different hardive - javascript

I am new to uploadify. I recently installed on a xamp in my local c:/ where uploadify resides. I have an uploads folder in the httdocs of xampp where all my uploads go. However I would like to move my uploads to a folder on a different drive. I've tried to edit the uploadifive.php but to no avail. I would like to move from '/uploads'(C:\xampp\htdocs\uploadify) to uploads in (L:\ibi\apps\ibisamp\uploads). I am using the html-5 version.
Here is my code:
index.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Elavon MDM</title>
<link rel="icon" type="image/ico" href="favicon.ico">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadifive.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
.uploadifive-button {
float: left;
margin-right: 10px;
}
#queue {
border: 1px solid #E5E5E5;
height: 177px;
overflow: auto;
margin-bottom: 10px;
padding: 0 3px 3px;
width: 300px;
}
</style>
</head>
<body>
<!-- <h1>Data Management Upload Demo</h1> -->
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="false">
<a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadifive({
'auto' : false,
'checkScript' : 'check-exists.php',
// 'fileTypeExts' : '*.csv',
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'queueID' : 'queue',
'uploadScript' : 'uploadifive.php',
'onUploadComplete' : function(file, data) { console.log(data); }
});
});
</script>
</body>
</html>
uploadifive.php
<?php
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/
// Set the upload directory
$uploadDir = '/uploads/';
// Set the allowed file extensions
$fileTypes = array('jpg', 'jpeg', 'gif', 'csv', 'png'); // Allowed file extensions
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$uploadDir = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
$targetFile = $uploadDir . $_FILES['Filedata']['name'];
// Validate the filetype
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array(strtolower($fileParts['extension']), $fileTypes)) {
// Save the file
move_uploaded_file($tempFile, $targetFile);
echo 1;
} else {
// The file type wasn't allowed
echo 'Invalid file type.';
}
}
?>
checkexists.php
<?php
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/
// Define a destination
$targetFolder = '/uploads'; // Relative to the root and should match the upload folder in the uploader script
if (file_exists($_SERVER['DOCUMENT_ROOT'] . $targetFolder . '/' . $_POST['filename'])) {
echo 1;
} else {
echo 0;
}
?>

Try to replace
$uploadDir = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
with
$uploadDir = "L:\ibi\apps\ibisamp\" . $uploadDir;

Related

How can I send a image that are cropped/rotated using the cropzee.js jQuery library as a post message?

I have sucessfully created a website that used the https://github.com/BossBele/cropzee library.
I have created a HTML form that takes inn a image from the user:
When the user has selected a image the Cropzee.js sucessfully loads and I can rotated/crop the image as expected:
Now I have the button Get Image (as blob / data-url) that gives me a alert box with a base64 image:
<button onclick="alert(cropzeeGetImage('cropzee-input'))">Get Image (as blob / data-url)</button>
I need to somehow send the base64 blob / data-url / image to my backend, I use PHP.
My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cropzee jQuery PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>
<!-- jQuery + cropzee.js -->
<script type="text/javascript" src="javascripts/jquery/jquery.min.js"></script>
<script src="javascripts/cropzee/cropzee.js" defer></script>
<!-- //jQuery + cropzee.js -->
<!-- CSS -->
<style>
.image-previewer {
height: 300px;
width: 300px;
display: flex;
border-radius: 10px;
border: 1px solid lightgrey;
}
</style>
<!-- //CSS -->
</head>
<body>
<h1>Upload</h1>
<!-- cropzee upload form -->
<label for="cropzee-input" class="image-previewer" data-cropzee="cropzee-input"></label>
<input id="cropzee-input" type="file" name="cropzee-input" accept="image/*">
<button onclick="alert(cropzeeGetImage('cropzee-input'))">Get Image (as blob / data-url)</button>
<script>
$(document).ready(function(){
if (window.location.href.indexOf("#") > -1) {
window.location = window.location.href.replace('#', '');
}
$("#cropzee-input").cropzee({startSize: [85, 85, '%'],});
});
</script>
<!-- //cropzee upload form -->
</body>
</html>
I have done this working to save the cropped image via Ajax Post to my PHP/MySQL backend.
Put a button to trigger the Ajax Call - like below
`<input type="button" onclick="uploadEx()" value="Upload" />`
Create a from with a hidden input - like below
`<form method="post" accept-charset="utf-8" name="form1">
<input name="hidden_data" id='hidden_data' type="hidden"/>
</form>`
Now put the Ajax call jQuery - like below
function uploadEx() {
var canvas = document.getElementById("cropzee-input");
var dataURL = canvas.toDataURL("image/jpeg");
document.getElementById('hidden_data').value = dataURL;
var fd = new FormData(document.forms["form1"]);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload_data.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
alert('Succesfully uploaded');
} else {
alert('Captured data');
}
};
xhr.onload = function() {
};
xhr.send(fd);
};
```
Lastly the PHP file upload_data.php looks like below
`
$upload_dir = "uploaded_files/profile_pictures/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".jpeg";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.'; `

Href not working when javascript inside div tag included

I included TomTom map to my php page, and included the TomTom code (javascript) into a separate body tag at the very bottom. I'm noticing that when I include the TomTom script within these tags, none of my buttons (href links) are working.
All of the code is on one sublime text page (map.php).
map.php:
<!--Developer code: https://developer.tomtom.com/blog/build-different/add-tomtom-maps-
website-30-seconds-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Details Page</title>
<link rel="stylesheet" type="text/css" href="https://api.tomtom.com/maps-sdk-for-
web/cdn/5.x/5.41.0/maps/maps.css">
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/maps/maps-web.min.js">.
</script>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/services/services-
web.min.js"></script>
<style>
#map-div {
padding: 60px 60px 60px 60px;
height: 100%;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<ol>
<?php
if (isset($_POST["submit"]));
$search = $_POST['search'];
$navigator = $_POST['navigator'];
$sql = "SELECT DISTINCT stores_name FROM stores ";
$rs_result = mysqli_query($conn, $sql);
$rowCount = mysqli_num_rows($rs_result);
if ($rowCount > 1){
echo "There are " .$rowCount. " results...";
}
else {
echo "These is " .$rowCount. " result...";
}
if ($rowCount > 0) {
while($row = mysqli_fetch_array($rs_result)){
$title = $row['stores_name'];
//$id = $row['stores_id'];
$href = ''.$title.'';
}
}
else {
echo "<tr><td>" ."No results found". "</td><td>";
}
?>
</ol>
</body>
<body>
<div id="map-div" name="map-div"></div>
<script>
const API_KEY = 'XXX';
const APPLICATION_NAME = 'My Application';
const APPLICATION_VERSION = '1.0';
tt.setProductInfo(APPLICATION_NAME, APPLICATION_VERSION);
const GOLDEN_GATE_BRIDGE = {lng: -122.47483, lat: 37.80776};
var map = tt.map({
key: API_KEY,
container: 'map-div',
center: GOLDEN_GATE_BRIDGE,
zoom: 12
});
</script>
</body>
</html>

Passing variable value from inline php to jquery function

I have html file that load jQuery.Gantt. Inside html i put nested php that grabs necessary data from database to populate grid. The data are formate to json according to spec.
My question is how to pass array to $function() to property source?
Here is the code:
<html lang="en-au">
<head>
<title>jQuery.Gantt</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://taitems.github.com/UX-Lab/core/css/prettify.css" />
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 0 0 50px 0;
}
.contain {
width: 800px;
margin: 0 auto;
}
h1 {
margin: 40px 0 20px 0;
}
h2 {
font-size: 1.5em;
padding-bottom: 3px;
border-bottom: 1px solid #DDD;
margin-top: 50px;
margin-bottom: 25px;
}
table th:first-child {
width: 150px;
}
</style>
</head>
<body>
<div class="contain">
<h1>
<small>Planning</small>
</h1>
<div class="gantt"></div>
</div>
<?php
include 'config.php';
mysql_query('SET CHARACTER SET utf8');
$sql_query = "SELECT Code, OrderNumber, DeliveryDate, QTY, Progress FROM production WHERE IDCustomer = 8 and Code = '5101452 SMD E PTH';";
$r=mysql_query($sql_query, $con);
$outp = "[";
while($rs=mysql_fetch_array($r))
{
if ($outp != "[") {$outp .= ",";}
$outp .= '{"name":"' . $rs["Code"] . '",';
$outp .= '"desc":"' . $rs["OrderNumber"] . '",';
$outp .= '"values": ';
$outp .= '[{"from": "' .$rs["DeliveryDate"] . '", ';
$outp .= '"to": "' .$rs["DeliveryDate"] . '",';
$outp .= '"label": "' .$rs["QTY"] . '",';
$outp .= '"customClass": "' .$rs["Progress"] .'"}]}';
}
$outp .="]";
mysql_close($con);
?>
</body>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://taitems.github.com/UX-Lab/core/js/prettify.js"></script>
<script>
$(function() {
"use strict";
$(".gantt").gantt({
source: "src/mydata1.json",
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "days",
waitText: "Please wait...",
itemsPerPage: 50,
onItemClick: function(data) {
alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
$(".gantt").popover({
selector: ".bar",
title: "I'm a popover",
content: "And I'm the content of said popover.",
trigger: "hover"
});
});
</script>
</html>
Or there is better way to do it? Actually I'd like to split HTML and PHP code but I'm not nimble with web programming.

I'm getting corrupted image when converting base64 image using webcam.js

here's my html with javascript using webcam.js. I just followed the https://github.com/jhuckaby/webcamjs on how you will implement it using existing form.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Your captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="../webcam.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
Webcam.snap( function(data_uri) {
var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
document.getElementById('mydata').value = raw_image_data;
document.getElementById('myform').submit();
} );
</script>
<!-- A button for taking snaps -->
<form id="myform" method="post" action="myscript.php">
<input id="mydata" type="hidden" name="mydata" value=""/>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<input type="submit" value="submit">
</form>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
} );
}
</script>
here's the myscript.php to save the image. I successfully save the PATH in the database but I'm getting a corrupted .jpg file (file size always in 7 bytes).
<?php
include 'connect.php';
$encoded_data = $_POST['mydata']; // to get the base 64 code image link
$name = base64_decode($encoded_data); // to convert base 64 code
$name = date('YmdHis');
$newname="images/".$name.".jpg";
$file = file_put_contents( $newname, file_get_contents('php://input') );
if (!$file) {
print "Error occured here";
exit();
}
else
{
$sql="INSERT INTO image (images) VALUES('$newname')";
$result=mysqli_query($con,$sql);
$value=mysqli_insert_id($con);
$_SESSION["myvalue"]=$value;
}
$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $newname;
print "$url\n";
?>
After all the trail and errors i found out you'll need to convert the base64 string to a blob and then attach to a file before sending.
var binaryImg = atob(base64string);
var length = binaryImg.length;
var ab = new ArrayBuffer(length);
var ua = new Uint8Array(ab);
for (var i = 0; i < length; i++) {
ua[i] = binaryImg.charCodeAt(i);
}
var blob = new Blob([ab], {
type: "image/jpeg"
});enter code here
var imgFile = new File([blob], 'photo.jpeg', {type: 'image/jpeg'});
Now you can use the imgFile to send across to a remote server.

How to store captured image path in mysql database using php.?

I want to capture image from webcam user image that image stored in specified folder and captured image path store into mysql using php. I have an problem with webcam captured image path is not stored in mysql database. so please help me...
<script src="webscript.js"></script>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
var shutter = new Audio();
shutter.autoplay = false;
shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
Webcam.upload( data_uri, 'upload.php', function(code, text) {
alert(data_uri);
});
} );
}
</script>
<?php
include 'connection.php';
// be aware of file / directory permissions on your server
$newname = move_uploaded_file($_FILES['webcam']['tmp_name'], 'uploads/webcam'.date('YmdHis').rand(383,1000).'.jpg');
$query = "INSERT INTO entry(name) VALUES('".$_GET['url']."')";
mysql_query($query)or die(mysql_error());
echo "<script>alert('successfully..');</script>";
?>
<!DOCTYPE html>
<html>
<head>
<title>Javascript Webcam</title>
<link href="font-awesome.min.css" rel="stylesheet"/>
<link href="bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<center>
<div class="row">
<div class="col-md-6">
<h3>Profile Picture</h3>
<div id="my_camera"></div>
<!-- A button for taking snaps -->
<form>
<input type=button class="btn btn-success" value="Take Snapshot" onClick="take_snapshot()">
</form>
<div id="results" class="well">Your captured image will appear here...</div>
</div>
</div>
</center>
</body>
</html>
Assuming $mysqli is a successfully connected [new Mysqli] object.
$query = "SELECT * FROM 'database.table' WHERE 'somecolumn'='someval' LIMIT= 5";
if ($stmt = $mysqli->prepare($query)) {
/* execute statement */
$stmt->execute();
/* bind result variables */
$stmt->bind_result($name, $code);
/* fetch values */
while ($stmt->fetch()) {
printf ("%s (%s)\n", $name, $code);
}
/* close statement */
$stmt->close();

Categories