Search code examples
javascriptphpangularjsuploadng-file-upload

Angular + PHP file upload (can't sent newly created properties)


I'm using ng-file-upload . It works perfectly, But I need to add some specific properties to object that I sent. Here controller method:

self.uploadFiles = function (files) {
  if (files && files.length) {
    for (var i = 0; i < files.length; i++) {
      files[i].upload_folder = 'upload'; //here i add first property
      files[i].current_date = getCurrentDate(); //here second
      var file = files[i];
      console.log(files[i]);
      Upload.upload({
        url: 'app/views/antonovich/upload.php',
        headers: {'Content-Type': undefined},
        method: 'POST',
        data: file,
        file: file
      }).progress(function(evt){
        self.uploadProgress = parseInt(100.0 * evt.loaded / evt.total);
        //console.log('progress: ' + self.uploadProgress + '% ' + evt.config.file.name);
      }).success(function(data, status, headers, config){
        console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
        $('.errors').html(data);
        self.uploadReady = config.file.name + ' uploaded.';
      });
    }
  }
}

In console log I see that properties, for example:

File {$$hashKey: "object:19", upload_folder: "upload", current_date: "2016-01-08"}
$$hashKey: "object:19"
current_date: "2016-01-08"
file: File
lastModified: 1448878298580
lastModifiedDate: Mon Nov 30 2015 13:11:38 GMT+0300 (Russia Standard Time)
name: "14488072165280.png"
size: 872713
type: "image/png"
upload_folder: "upload"
webkitRelativePath: ""
__proto__: File

PHP script uploads these files to folder and creates DB row, But 2 created properties are undefind, and return just this:

Response: Array
(
    [name] => 14488072165280.png
    [type] => image/png
    [tmp_name] => C:\wamp\tmp\phpC39D.tmp
    [error] => 0
    [size] => 872713
)

here php script example:

<?php
  if(isset($_FILES['file'])) {
    print_r($_FILES['file']);
    $errors= array();

    $file_name = $_FILES['file']['name'];
    $file_size = $_FILES['file']['size'];
    $file_tmp = $_FILES['file']['tmp_name'];
    $file_type = $_FILES['file']['type'];
    $upload_folder = $_FILES['file']['upload_folder'];
    $current_date = $_FILES['file']['current_date'];
    print_r($upload_folder);
    print_r($current_date);

    $db = new PDO('mysql:host=localhost;dbname=antonovich', 'root', '');
    $query = "INSERT INTO  portfolio(url,date) VALUES('$file_name','$current_date')";
    $stmt = $db->prepare($query);
    $stmt->execute();

    $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
    move_uploaded_file($file_tmp,"../../img/".$upload_folder."/".$file_name);
    echo $file_name . " uploaded file: " . "images/" . $file_name;

  }
  else {
    $errors= array();
    $errors[]="No image found";
    print_r($errors);
  }
?>

Solution

  • For background, see PHP documentation on file uploads. The $_FILES superglobal only contains a fixed set of values about each uploaded file (name, type, tmp_name, error, and size), any other data from the POST request should be in the $_POST superglobal instead. Try changing your PHP script like so:

    $upload_folder = $_POST['upload_folder'];
    $current_date = $_POST['current_date'];
    

    As a side note, I would be wary about allowing clients to specify the destination folder without robust validation. Attackers might be able to use relative paths to upload malicious code.