I do have the following pages one which is doing drag and drop and the other one to get the file written. In case the drag and drop is writning locally, no problems, in case of remote , not working.
<!DOCTYPE html>
<html>
<head>
<title> BETA APP HOME PAGE </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<ul>
<li><a class="active" href='demo_upload.php'>demo upload</a></li>
</ul>
<div style="margin-left:15%;padding:1px 16px;height:1000px;">
<a id="topright" href="#" title="RaspBerry Pi"></a>
<h1> DEMO USING FILE UPLOAD</h1>
<p></p>
<?php
if (isset($_POST['STARTSCRIPT']))
{
$command = escapeshellcmd('sudo python AppPy/cgi-bin/test.py');
$output = shell_exec($command);
echo("on");
echo $output;
}
if (isset($_POST['STOPSCRIPT']))
{
shell_exec("sudo python AppPy/cgi-bin/test.py");
echo("Off");
}
?>
<form method="post">
<button name="STARTSCRIPT">START SCRIPT</button>
<button name="STOPSCRIPT">STOP SCRIPT</button><br><br>
</form>
<div id="dragandrophandler">Drag & Drop Files Here </div>
<br><br>
<div id="status1"></div>
<script>
function sendFileToServer(formData,status)
{
var uploadURL ="http://192.168.56.153/WEBAPP/upload.php"; //Upload URL
var extraData ={}; //Extra Data.
var jqXHR=$.ajax({
xhr: function() {
var xhrobj = $.ajaxSettings.xhr();
if (xhrobj.upload) {
xhrobj.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//Set progress
status.setProgress(percent);
}, false);
}
return xhrobj;
},
url: uploadURL,
type: "POST",
contentType:false,
processData: false,
cache: false,
data: formData,
success: function(data){
status.setProgress(100);
//$("#status1").append("File upload Done<br>");
}
});
status.setAbort(jqXHR);
}
var rowCount=0;
function createStatusbar(obj)
{
rowCount++;
var row="odd";
if(rowCount %2 ==0) row ="even";
this.statusbar = $("<div class='statusbar "+row+"'></div>");
this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
obj.after(this.statusbar);
this.setFileNameSize = function(name,size)
{
var sizeStr="";
var sizeKB = size/1024;
if(parseInt(sizeKB) > 1024)
{
var sizeMB = sizeKB/1024;
sizeStr = sizeMB.toFixed(2)+" MB";
}
else
{
sizeStr = sizeKB.toFixed(2)+" KB";
}
this.filename.html(name);
this.size.html(sizeStr);
}
this.setProgress = function(progress)
{
var progressBarWidth =progress*this.progressBar.width()/ 100;
this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
if(parseInt(progress) >= 100)
{
this.abort.hide();
}
}
this.setAbort = function(jqxhr)
{
var sb = this.statusbar;
this.abort.click(function()
{
jqxhr.abort();
sb.hide();
});
}
}
function handleFileUpload(files,obj)
{
for (var i = 0; i < files.length; i++)
{
var fd = new FormData();
fd.append('file', files[i]);
var status = new createStatusbar(obj); //Using this we can set progress.
status.setFileNameSize(files[i].name,files[i].size);
sendFileToServer(fd,status);
}
}
$(document).ready(function()
{
var obj = $("#dragandrophandler");
obj.on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
});
obj.on('drop', function (e)
{
$(this).css('border', '2px dotted #0B85A1');
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
//We need to send dropped files to Server
handleFileUpload(files,obj);
});
$(document).on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e)
{
e.stopPropagation();
e.preventDefault();
});
});
</script>
</div>
</div>
<div style="margin-left:15%;padding:1px 16px;height:10px;">
</div>
</body>
</html>
My problem is when I specify my current server :
var uploadURL ="http://192.168.56.153/WEBAPP/upload.php"
it does work with this :
chmod -R 0777 /var/www/html/WEBAPP/
This is only for test ( to get ride of rights issues), I get this response from the local server in apache access log :
192.168.56.1 - - [08/Apr/2017:14:07:44 +0200] "POST /WEBAPP/upload.php HTTP/1.1" 200 203 "http://192.168.56.153/WEBAPP/demo_upload.php" "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko"
My file is being uploaded.
But when I change this to this destination to a remote :
var uploadURL ="http://192.168.56.154/WEBAPP/upload.php"
I got this message at remote server apache access log :
192.168.56.1 - - [08/Apr/2017:13:44:13 +0200] "OPTIONS /WEBAPP/upload.php HTTP/1.1" 200 203 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko"
No file uploaded.
The upload.php file is the same either situation :
<?php
$ds = DIRECTORY_SEPARATOR; //1
$storeFolder = 'uploads'; //2
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name']; //3
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; //4
$targetFile = $targetPath. $_FILES['file']['name']; //5
move_uploaded_file($tempFile,$targetFile); //6
}
?>
