1

I have an app that uploads the files to server and save them as files with drag and drop function, it is working so far with images, except, It is not accepting sometimes a video not sure if there is limiting in php or any other, short clips gets accepted, need you help with this.

index.php

<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
         <div id="drag_upload_file">
              <p>Drop file here</p>
              <p>or</p>
              <p><input type="button" value="Select File" onclick="file_explorer();" /></p>
              <input type="file" id="selectfile" multiple="multiple"/>
         </div>
 </div>

ajax.php

if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
  
$filename = time().'_'.$_FILES['file']['name'];
  
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$filename);
  
echo 'uploads/'.$filename;
die;

and u.js

var fileobj;

// Drag and Drop Function
function upload_file(e) {
    e.preventDefault();
    fileobj = e.dataTransfer.files;
    
   
    if(fileobj.length > 0){
        for (let index = 0; index < fileobj.length; index++) {
            ajax_file_upload(fileobj[index])
        }
    } else {
        ajax_file_upload(fileobj[0]);
    }
}

// Select upload function
function file_explorer() {
    document.getElementById('selectfile').click();
    document.getElementById('selectfile').onchange = function() {
        fileobj = document.getElementById('selectfile').files;
        
        if(fileobj.length > 0){
            for (let index = 0; index < fileobj.length; index++) {
                ajax_file_upload(fileobj[index])
            }
        } else {
            ajax_file_upload(fileobj[0]);
        }

    };
}
  
function ajax_file_upload(file_obj) {
    if(file_obj != undefined) {
        var form_data = new FormData();                  
        form_data.append('file', file_obj);
        var xhttp = new XMLHttpRequest();
        xhttp.open("POST", "../u/ajax.php", true);
        xhttp.onload = function(event) {
            oOutput = document.querySelector('.img-content');
            if (xhttp.status == 200) {
                oOutput.innerHTML += "<p>"+ this.responseText +"</p> Upload Successfull </br>";
            } else {
                oOutput.innerHTML += "Error " + xhttp.status + " occurred when trying to upload your file.";
            }
        }
 
        xhttp.send(form_data);
    }
}

Any suggestion that I can update my code here? Trying to make the loading while uploading, how would be my approach on doing that?

Aaron Magpantay
  • 405
  • 1
  • 5
  • 17

1 Answers1

1

phpinfo function gives the information about PHP's configuration. You can make a single file in your server and use phpinfo() function to access your server's PHP configuration.

There is a setting called the post_max_size and it's used to set the maximum size for a single upload to the server. So try to access the file first and check your post_max_size.

Now, you have two options, either warn the user to not upload more then the max file size or change the maximum upload file size.

Read the previous answer for changing the max size.

phpinfo manual

Kang Yul
  • 28
  • 5