PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Aug 16, 2018 11:40 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 2 posts ] 
Author Message
PostPosted: Fri Aug 04, 2017 9:35 am 
Offline
Forum Contributor
User avatar

Joined: Wed May 14, 2014 12:18 pm
Posts: 331
Hey guys i have the following html code:

Syntax: [ Download ] [ Hide ]
 <form action="mail/filesend.php" method="POST" accept-charset="utf-8" enctype="multipart/form-data" validate>
            <div class="input-wrpr">
                <input type="file" name="files[]">
            </div>
                <button type="submit">
                        Send File
                </button>              
 </form>
 


and the following PHP code:

Syntax: [ Download ] [ Hide ]
<?php


if ($_FILES['files']) {

  $total = count($_FILES['files']['name']);
  $data = array();
  $errors = array();

  for($i = 0; $i < $total; $i++) {

    $tmpFilePath = $_FILES['files']['tmp_name'][$i];

    if ($tmpFilePath != "") {
      $newFilePath = "../uploads/" . $_FILES['files']['name'][$i];
     
      if(move_uploaded_file($tmpFilePath, $newFilePath)) {
        echo json_encode(array('success' , 'Yup Done'));
      } else {
        $errors['files'] = 'You need to upload a file';
      }
    }
  }

  $data['success'] = 'Files have been uploaded successfully';
  json_encode($data);

} else {
 
  $errors['files'] = 'You need to upload a file';
  $data['errors'] = $errors;
  json_encode($data);

}

?>
 


Now when i submit the form without any ajax, it all works just fine , the file gets uploaded to the specified directory and a message a echoed, but now when i add ajax to the equation , like below:

Syntax: [ Download ] [ Hide ]
$(function () {

        let files = null;
        $('input[type="file"]').on('change' , (e) => {
                files = e.target.files;
        });

        $('form').submit(function(e){
                e.stopPropagation();
                e.preventDefault();

                    let data = new FormData();

                    $.each(files, function(key, value){
                        data.append(key, value);
                    });


                        $.ajax({
                                type: $(this).attr('method'),
                                url : $(this).attr('action'),
                                data: data,
                        cache: false,
                        dataType: 'json',
                        processData: false, // Don't process the files
                        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                                data : data
                        }).done(function(data){
                                // console.log(data);
                                if (! data.success) {
                                        // console.log(data.errors);
                                        /*for(let er in data.errors) {
                                                console.log(data.errors[er])
                                        }*/

                                        console.log(data);
                                } else {
                                        /* else condition fires if form submission is successful ! */
                                        console.log(data.file);
                                }
                        }).fail(function(data){
                                console.log(data);     
                        });

        });
});
 


My code does't work i the form is not uploaded , i suspect if ($_FILES['files']) is unable to extract the file and this error gets thrown.

in my console , i get the following under response text in the ajax message:

Syntax: [ Download ] [ Hide ]
<br /><b>Notice</b>:  Undefined index: files in <b>C:\xampp\htdocs\parselyJS\mail\filesend.php</b> on line <b>4</b><br />
 


What am i doing wrong here ?

Thank you.
Gautam.


Top
 Profile  
 
PostPosted: Fri Aug 04, 2017 1:40 pm 
Offline
Forum Contributor
User avatar

Joined: Wed May 14, 2014 12:18 pm
Posts: 331
Actually changing my JS code from:

Syntax: [ Download ] [ Hide ]
let data = new FormData();

$.each(files, function(key, value){
     data.append(key, value);
});
 


To:

Syntax: [ Download ] [ Hide ]
$('form').submit(function(e){
    let data = new FormData(this);
});
 



Made my code work ! :)


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: Google [Bot] and 15 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group