Unable to upload file using PHP & Javascript

Question

file_upload_parser.php

<?php

var_dump($_FILES);

if (isset($_FILES['file'])) {
    var_dump($_FILES);

    $fileName = $_FILES["file"]["name"]; 
    $fileTmpLoc = $_FILES["file"]["tmp_name"]; 
    $fileType = $_FILES["file"]["type"]; 
    $fileSize = $_FILES["file"]["size"]; 
    $fileErrorMsg = $_FILES["file"]["error"]; 

    if (!$fileTmpLoc) { 
        echo "ERROR: Please browse for a file before clicking the upload button.";
        exit();
}

if(move_uploaded_file($fileTmpLoc, "uploads/$fileName")){
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
} else {
  echo "File not found.";
}

?>

Javascript:

function _(el){
   return document.getElementById(el);
}

function uploadFile() {
    var file = _("file").files[0];
    alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}

function progressHandler(event){
     _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
     var percent = (event.loaded / event.total) * 100;
     _("progressBar").value = Math.round(percent);
     _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}

function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}

function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}

function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

Form:

<form name="uploads" action="file_upload_parser.php" enctype="multipart/form-data" method="post" class="form-horizontal" id="_uploads">
  <div id="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Uploads</h3>
          </div>
          <div class="panel-body">
            <div class="form-group">
              <label class="col-sm-2 control-label" for="_file"> </label>
              <div class="col-sm-10">
                <input type="file" name="file" id="file">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="_button"> </label>
              <div class="col-sm-10">
                <button type="button" name="button" value="Upload File" class="btn btn-success" onclick="uploadFile()" id="_button">Upload File</button>
              </div>
            </div>

This is what I get:

I've checked my php.ini file to verify file uploads are turned on and the limit of file size is high enough but every time I run this code, $_FILE is always empty. FormData is grabbing the file and outputting the name, size, and type correctly to the console but something is going on with the communication to file_upload_parser.php.

I have also made sure folder & file permissions are set with full access.

Any ideas?

Have you seen this http://stackoverflow.com/questions/3586919/why-would-files-be-empty-when-uploading-files-to-php — j08691, May 05 '17 at 14:38
Just to check, did you try uploading the file without JS, just submitting the form normally? — Pango, May 05 '17 at 14:39

score 1 · Answer 1 · answered May 05 '17 at 18:28

Ok guys, I believe I found the issue. I went in and modified the httpd.conf file within my apache2 folder from:

#LoadModule php5_module libexec/apache2/libphp5.so

To:

LoadModule php5_module libexec/apache2/libphp5.so

After doing this, my test image was moved over correctly.

score 0 · Answer 2 · answered May 05 '17 at 14:38

0

Put the encription in form

<form method="post" action="index.php" enctype="multipart/form-data"></form>

Check in php.ini file max_execution_time heavy images are not uploaded due to execution time.. and make sure that media folder has 777 permission and the path ../media/ is correct

answered May 05 '17 at 14:38

Boschko

367
5
14

The max_execution_time is set to 300 and the folder has 777 permission. – Josh May 05 '17 at 14:50
hmm id refer myself to this [LINK](http://php.net/manual/en/features.file-upload.php) but make sure you are not using Javascript to disable your – Boschko May 05 '17 at 14:56

Bullet · Answer 3 · 2017-05-05T15:58:17.227

I found the solution.

First of all you need to change the html

<!DOCTYPE html>
<html>
<body>
<script src="demo_script_src.js">
</script>

<form name="uploads" action="/testing/file_upload_parser.php" enctype="multipart/form-data" method="post" class="form-horizontal" id="_uploads">
  <div id="container">
    <div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Uploads</h3>
      </div>
      <div class="panel-body">
        <div class="form-group">
          <label class="col-sm-2 control-label" for="_file">File Upload </label>
          <div class="col-sm-10">
            <input type="file" name="file" id="file">
          </div>
        </div>           

       </div>
       </div>
      </div>
   </div>
 </div>
 <button type ="submit" class="btn btn-success pull-right">Submit</button>
</form>         

</body>
</html>

I used testing folder under public_html, so thats why action="/testing/file_upload_parser.php". If you need u can remove /testing folder in action. You need to submit the form by type="submit"

And in your javascript, need to change

function uploadFile() {
var file = _("file").files[0];
alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file", file);

file1 to file

And in file_upload_parser.php

if(move_uploaded_file($fileTmpLoc, "/uploads/$fileName")){ make sure the uploads folder is in correct path.

Finally no need to give the folder permission to 777. Its very dangerous.

This might help you. :). Kindly accept the answer, if you really benefited. Left tick mark to my answer.

Unfortunately I have tried all of that with no luck. I just tried using [W3 School's PHP 5 file upload code](https://www.w3schools.com/php/php_file_upload.asp) just to verify I could upload. I get the following: array(0) { } Notice: Undefined index So it seems like it's not communicating with the php file correctly. — Josh, May 05 '17 at 16:34
Give the path of the php file in browser. If it works, then put that path in `action ` of html file. View page source in browser and click the php file in action, if the error comes, need to change the path only. try one more time — Bullet, May 05 '17 at 17:37

Unable to upload file using PHP & Javascript

3 Answers3