Saving files to server - php

Question

I'm using AngularJs and PHP to try and accomplish this but it doesn't seem to work.
I have created a virtual host with WAMP and inside the folder from which I'm receiving all my content I have created an uploads folder to which I would like to store files I have uploaded via different forms. The problem is that whenever I execute my PHP the folder is still empty. Here is the code I use:
AngularJs
myApp.controller('AdminPromotionsDetailsController', function($scope, $http) {
$scope.msg = '';
$scope.msg_type = 'error';
$scope.savePromotion = function(promotion) {
$scope.promotion.PromotionPhoto = promotion.PromotionPhoto.name;
$http.post('save.php', promotion)
.success(function(data, status, headers, config) {
if (data == 'success') {
$scope.msg = 'Success message';
$scope.msg_type = 'success';
} else {
$scope.msg = 'Error message';
$scope.msg_type = 'error';
}
}).error(function(data, status) {
$scope.msg = 'Error message';
$scope.msg_type = 'error';
});
}
});
PHP
<?php
$con = mysqli_connect('ecommerce', 'root', '', 'my_db');
// Check connection
if (!$con) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
mysqli_set_charset($con,"utf8");
$data = json_decode(file_get_contents("php://input"));
$id = '';
if(!empty($data->PromotionId)) {
$id = mysqli_real_escape_string($con, $data->PromotionId);
}
$name = mysqli_real_escape_string($con, $data->PromotionName);
$link = mysqli_real_escape_string($con, $data->PromotionLink);
$cover = mysqli_real_escape_string($con, $data->PromotionPhoto);
$date_start = mysqli_real_escape_string($con, $data->PromotionDateStart);
$date_end = mysqli_real_escape_string($con, $data->PromotionDateEnd);
$folder = 'http://ecommerce/uploads/';
move_uploaded_file($cover, "$folder".$cover);
if(!empty($data->PromotionContent)) {
$content = mysqli_real_escape_string($con, $data->PromotionContent);
} else {
$content = '';
}
if ($id != '') {
$sql = "UPDATE `promotions` SET PromotionName='$name', PromotionLink='$link', PromotionPhoto='$cover', PromotionDateStart='$date_start', PromotionDateEnd='$date_end', PromotionContent='$content' WHERE `PromotionId`='$id'";
$sql_res = mysqli_query($con, $sql) or die(mysqli_error($con));
if ($sql_res) {
print 'success';
} else {
print 'error';
}
} else {
$sql = "INSERT INTO promotions (PromotionName, PromotionLink, PromotionPhoto, PromotionDateStart, PromotionDateEnd, PromotionContent) VALUES ('$name', '$link', '$cover', '$date_start', '$date_end', '$content')";
$sql_res = mysqli_query($con, $sql) or die(mysqli_error($con));
if ($sql_res) {
print 'success';
} else {
print 'error';
}
}
?>
HTML
<form autocomplete="off" name="promotionForm">
<input type="hidden" value="" ng-model="promotion.PromotionId" />
<div class="form-notification form-notification--{{msg_type}}" ng-if="msg != ''">
{{msg}}
</div>
<div class="form-notification form-notification--error" ng-if="promotionForm.file.$error.maxSize">
{{msg}}
</div>
<ul>
<li class="input">
<label for="promotion_name" class="input__label">
Title
</label>
<input type="text" class="input__field" value="" ng-model="promotion.PromotionName" id="promotion_name" required="required" />
</li>
<li class="input">
<label for="promotion_link" class="input__label">
URL
</label>
<input type="text" class="input__field" value="" ng-model="promotion.PromotionLink" id="promotion_link" required="required" />
</li>
<li class="input">
<label for="promotion_link" class="input__label">
Cover
</label>
<input type="file" ngf-select ng-model="promotion.PromotionPhoto" name="file"
accept="image/*" ngf-max-size="10MB" required id="promotion_link"
class="input__field input__field--upload"
ngf-model-invalid="errorFile"
/>
<img ng-show="promotionForm.file.$valid" ngf-thumbnail="promotion.PromotionPhoto" alt="" />
<button ng-click="promotion.PromotionPhoto = null" ng-show="promotion.PromotionPhoto">
Remove
</button>
</li>
<li class="input">
<label for="date_start" class="input__label">
Date
</label>
<ul class="row">
<li class="small-6 columns">
<datepicker ng-model='promotion.PromotionDateStart' date-format='MMMM d, yyyy' disable-timepicker='true' ng-patter='/\d\d/\d\d/\d\d\d\d/' required></datepicker>
</li>
<li class="small-6 columns">
<datepicker ng-model='promotion.PromotionDateEnd' date-format='MMMM d, yyyy' disable-timepicker='true' ng-patter='/\d\d/\d\d/\d\d\d\d/' required></datepicker>
</li>
</ul>
</li>
<li class="input">
<label for="promotion_content" class="input__label">
Content
</label>
<text-angular ng-model="promotion.PromotionContent"></text-angular>
</li>
</ul>
<button type="submit" class="button--big" ng-click="savePromotion(promotion)"
ng-if="promotion.PromotionId != null"
>
Edit
</button>
<button type="submit" class="button--big" ng-click="savePromotion(promotion)"
ng-if="promotion.PromotionId == null"
>
Add
</button>
</form>

Answer 1

I found the answer I had to set the $folder to $_SERVER['DOCUMENT_ROOT'].'/uploads/'

Answer 2

You cannot POST files in JSON. While you use ng-file-upload, you can use the service Upload for your uploads. It takes care of headers and give you the ability to track your progress. Check https://github.com/danialfarid/ng-file-upload#usage