Ajax Multiple Upload

Question

I have seen tons of ways to do the same thing and some scripts just don't intertwine with each other from jQuery to plain JavaScript and ajax, quite the confusion.

Anyway I found this upload script that only uploads single files and I challenge myself to turn it into a multi file uploader and I am getting this little issue every time I try changing up few variables that I read about to parse my php script with this top lines below.

function uploadFile(){

var file = _("file").files[0]; //This line is the issue, changed it around still gave null errors

var formdata = new FormData();

formdata.append("file1", file);
var ajax = new XMLHttpRequest();

and my HTML looks like this

<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
</form>

I tried every variable to not give errors and yet I get object or variable and null errors.

Edit

This is what I been working with and this is the part that Is giving issues, I have more functions but they are in different link with the output of the parsing php file to handle progress bar and error handling. this part below is what I have been switching up since yesterday afternoon without success. @EmielZuurbier I tried incoperating your addon and still error messages about uploadFile not being a variable etc.

   }

   function uploadFile(){
    var file = _("file1").files[0];
    var formdata = new FormData();
    formdata.append("file1", 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", “plistingscript.php");
    ajax.send(formdata);
    }

https://stackoverflow.com/questions/19295746/how-to-upload-multiple-files-using-php-jquery-and-ajax — Jay Blanchard, Apr 24 '20 at 17:57
Does this answer your question? [How to upload multiple files using PHP, jQuery and AJAX](https://stackoverflow.com/questions/19295746/how-to-upload-multiple-files-using-php-jquery-and-ajax) — Rachel Gallen, Apr 24 '20 at 18:10
I am currently reading the article to see which bits to take and in cooperate with my existing script to see if it works. soon i am done I will give the verdict here. thats alot. — jasmine.willis, Apr 24 '20 at 18:12
@RachelGallen still got errors about uploadFile is not a variable then i make a var then it's another error. I got it as a function from the onclick on the submit input still errors — jasmine.willis, Apr 24 '20 at 18:30
@jasmine.willis ensure all vars are declared properly in your code and assess your code for any syntax errors (if necessary, use an online checker if you're going blind on it - sometimes it's easy to miss something when you've been looking at it too long). After these basics, **take a break** before you go back and do a step-by-step — Rachel Gallen, Apr 24 '20 at 18:38
took a nap just woke, i think i was going paranoid being at this for more than 24 hours. back to reading more. i need this working tonight. — jasmine.willis, Apr 24 '20 at 22:51
anyone got time to give some advice and help please? I am trying everything I am reading and this just keep failing. — jasmine.willis, Apr 25 '20 at 02:20
Finally got it to parse the files over unto the php file. however, i can use vardump and json_encode to see the data from $_FILES but no matter how I write this foreach loop, I get a null response. — jasmine.willis, Apr 28 '20 at 02:43

Emiel Zuurbier · Answer 1 · 2020-04-24T20:11:02.570

The line _("file").files[0] won't do no good. I assume that _ is a replacement for the $ of jQuery. It would create a jQuery object with the elements found by the "file" query and look for the files property on that object, which is not there.

But the FormData part is good and you should keep using that. When combining FormData with a <form> element you can get all the data from the form instantly by using the form as an argument for FormData.

To allow multiple files to be upload on a single <input type="file"> element, add the multiple attribute to allow for more than 1 file to be selected.

<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1" multiple><br>
  <input type="button" value="Upload File">
</form>

const form = document.getElementById('upload_form');

function onSubmit(event) {
  const formData = new FormData(form);
  fetch('plistingscript.php', {
    method: 'POST',
    body: formData
  });
  event.preventDefault();
}

form.addEventListener('submit', onSubmit);

Thanks @EmielZuurbier, still getting errors. I should show you the rest of my script. see below — jasmine.willis, Apr 24 '20 at 18:33

Ajax Multiple Upload

Edit

1 Answers1