Databases
StackOverflow2013
Postsdbo
POCustom HTML5 upload control empties $_FILES array in Code Igniter back-end
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCustom HTML5 upload control empties $_FILES array in Code Igniter back-end
    text
    copied!<p>I'm on a brave mission to write a custom upload control for my website. The control will make use of the latest HTML5 features (if available) to provide an experience that includes client-side image previews, real-time upload progress information and more, all without the use of Flash.</p> <p>Hereby I temporarily open up the dev URL: <em>removed</em></p> <p>Note that it is in an early stage of development, it will only work in recent versions of Firefox and Chrome. After selecting one or more JPEG files, you should see the image previews appear as well as an upload progress indicator.</p> <p>On the back-end, I'm using Code Igniter. For now I have hooked up the post request of the upload form to this very simple controller:</p> <pre><code>function uploadhtml5post() { var_dump($_FILES); echo "1!"; } </code></pre> <p>This server-side response will be written to console.log on the client-side, so to check the response, open up your console in the browser. An example of correct input would be this (for a single file):</p> <pre><code>array(1) { ["userfile"]=&gt; array(5) { ["name"]=&gt; array(1) { [0]=&gt; string(12) "DSC_1160.jpg" } ["type"]=&gt; array(1) { [0]=&gt; string(10) "image/jpeg" } ["tmp_name"]=&gt; array(1) { [0]=&gt; string(14) "/tmp/phpNtZTMk" } ["error"]=&gt; array(1) { [0]=&gt; int(0) } ["size"]=&gt; array(1) { [0]=&gt; int(8435493) } } } 1! </code></pre> <p>This correct output shows that the file was received correctly on the server-side, and we have access to them for further processing. My problem is as follow. This server-side output is correct when uploading a single image. It is also correct when uploading two images (selecting two at once). However, when selecting 3 or more images to upload, it falls apart. The server-side output will then be incorrect, for all 3 individual requests the $_FILES array will be empty.</p> <p>My upload form is as simple as this:</p> <pre><code>&lt;form action="&lt;?= $this-&gt;basepath ?&gt;uploadhtml5post" method="post" accept-charset="UTF-8" id="frmUpload" enctype="multipart/form-data"&gt; &lt;fieldset class="vertical"&gt; &lt;input type="file" name="userfile[]" id="userfile" size="20" multiple="multiple" accept="image/jpeg" onchange="processImages();" /&gt; &lt;/fieldset&gt; &lt;/form&gt; </code></pre> <p>As you can see, enctype is set correctly as well as the name of the file input control. It seems to make no difference whether I use "userfile" or "userfile[]", the problem is the same in both cases.</p> <p>As for my Javascript, it is somewhat messy right now, but here is the essence of it:</p> <pre><code>function uploadFile(f,id) { var fd = new FormData(document.getElementById('frmUpload')); fd.append("fileToUpload", f.name); var xhr = new XMLHttpRequest(); xhr.upload.id = id; xhr.id = id; xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open("POST", "./uploadhtml5post"); updateCaption(id, "&lt;em class=\"icon-signal\"&gt;&lt;/em&gt; Uploading..."); xhr.send(fd); } </code></pre> <p>As you can see, a custom post request is assembled and then fired. It all works fine for one or two images at a time. The POST url is correct and $_FILES on the server is correct. Only when selecting 3 images it fails, for all 3 individual requests. </p> <p>From other questions I learned that rewrite rules may empty the $_FILES array. Whilst I use them, I don't think they are a cause, since then no post would work at all. $_FILES is only empty when firing 3 post requests. </p> <p>This is quite a mystery to me, any thoughts?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload