Link to home
Start Free TrialLog in
Avatar of tonelm54

asked on

File upload

Ive been trying to figure out how to do my own file upload from a dropped file. Ive cobbled together from multiple articles and got the following:-
<!DOCTYPE html>
<html lang="en">
<script src="jquery-3.4.1.js"></script>

#testDiv {
    border: 1px solid black;

<div id="testDiv">nnn</div>

$(document).ready(function() {
$('#testDiv').on('dragover', function(e) {

$('#testDiv').on('dragenter', function(e) {

$('#testDiv').on('drop', function(e){
    if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {

function myOwnCallBack(file) {
    let data = new FormData();

    for(var i = 0;i<file.length;i++){
        data.append("file_"+i, file[i]);
    data.append("test1", "value1");
    data.append("test2", "value2");

        data: data,
        type: "POST",
        url: "file-uploader.php",
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() {
            let myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            return myXhr;
        success: function(reponse) {

function progressHandlingFunction(e) {
    if (e.lengthComputable) {
        console.log((e.loaded / * 100) + '%');

        if (e.loaded === {
            console.log("Upload finished.");

Open in new window

My test values transfer fine, but the file(s) dont transfer.

Can anyone see what Im doing wrong with the files?

Thank you in advance
Avatar of lenamtl
Flag of Canada image


The problem is maybe in your PHP file, make sure the directory have the correct chmod /  permission.
Also you may need to set file size, memory size  in  php.ini

If you are dealing with large file you may need to edit those too

max_input_time in php.ini
max_execution_time in php.ini
FcgidMaxRequestLen in Apache, (if using fastcgi)
FcgidBusyTimeout in Apache, (if using fastcgi)
FcgidIOTimeout in Apache, (if using fastcgi)
Timeout in Apache
LimitRequestBody in Apache

I would make a test with 1 small file, then 2 small files

Display PHP errors if you can or check your PHP error logs files

I'm using this script which is great
Avatar of tonelm54


I have tried it with a 4Kb file without success. From my understanding if it was PHP failing then the upload php file behind it wouldnt fire at all, but it does run, just nothing in $_FILE, and my 2 variables in $_POST nothing else. Looking at Fiddler logs the filesize of the post isnt big enough to hold the file.

Ive looked at fileuploader which I agree does look good, but Id like to see if I can get my own working first ;-)

Thank you
Also your hosting comes into play.

For example, so brain dead hosting companies have all rules about where files can be uploaded, with permissions set to block any file outside wp-contents/uploads/YYYY, so be sure your hosting allows writing files into the directory you're targeting.

This means you can't just... pick any directory to write files.

Refer to your Apache + PHP logs for details about reason write failed, as this will only show up in server logs, never available in Javascript... unless you write very specific code to return such errors to your Javascript.

First do your test local on your computer using Wampserver or any PHP web server.

Where are you testing (local computer, hosting server, private server?)
Where are you trying to save the file?

Do you have any error in PHP file?
Do you have any error in browser console (right click inspect)?

Enable PHP error to make sure to see the error if you are testing on your computer
ini_set('display_errors', 'On');

Open in new window

Note the script I recommend has PHP file that could help you...
Avatar of tonelm54

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial