2

I am trying to upload multiple files to the server that runs PHP. My code is below, but I am currently not successful in uploading multiple files. I believe my error may be in my javascript but I am not sure whereabout. Please can someone advise? Based on my code, i am getting 'files not received'.

HTML:

 <div>
    <p><input id="file" type="file" name="file[]" multiple></p>
    <div><button id="btn">Upload all files</button></div>
</div>

JAVASCRIPT:

 document.getElementById('btn').addEventListener('click', function(){
        var inputElem = document.getElementById('file');
        var arrayFiles = inputElem.files;

        var formdata = new FormData();
        formdata.append('file[]', arrayFiles);

        var xmh = new XMLHttpRequest;
        xmh.onreadystatechange = function(){
            if(xmh.readyState == 4 && xmh.status == 200){

                var response = xmh.responseText;
                console.log('response: '+response);
            }
        }
        xmh.open('POST', 'serverFile.php');
        xmh.send(formdata);   
    });

PHP:

 if(isset($_FILES['file'])){
  //  DO SOMETHING
  echo 'files received';
 }else{

  echo 'files not received';
 }
eddy123
  • 43
  • 11
  • So which message do you get returned from the PHP – RiggsFolly Jul 11 '18 at 15:34
  • @RiggsFolly I got returned 'files not received' – eddy123 Jul 11 '18 at 15:39
  • The example at https://developer.mozilla.org/en-US/docs/Web/API/FormData/append suggests you might need to append the files to the formData one at a time. Of course the example is naive and you could use a loop through the arrayFiles object, but it gives the impression you must call .append() separate for each file. The entry for the "value" parameter, saying it must be a string or a Blob (arrays are not mentioned) would appear to back this up. Worth a try, at any rate. Might be a good idea to pass in the filename as well, unless the server doesn't care about the original name. – ADyson Jul 11 '18 at 15:42
  • For `$_FILES` to be populated, you need to submit a form with `enctype="multipart/form-data"`. You're not doing that, so your files are most likely ending up in the `$_POST`. There's an example here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects -> look for `Sending files using a FormData object`. Note the difference between your HTML and JS and their. – N.B. Jul 11 '18 at 15:53
  • Heh, this would be so much easier in jquery ;) Shame. – IncredibleHat Jul 11 '18 at 15:57
  • @N.B. Not sure I get your point. None of those examples involves setting the content-type on the XHR object. In fact the article specifically says "The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data." To me this implies that the content type is set automatically. Checking the network tools to see the request content and headers would verify this, I guess. I could be wrong but that's the impression I get. I've seen other examples which seem not to need it either. – ADyson Jul 11 '18 at 16:03
  • 1
    I'm pretty sure @ADyson is correct. If you pass a `FormData` as the argument to `send()`, it automatically sends `Content-type: multipart/form-data`. – Barmar Jul 11 '18 at 16:31

0 Answers0