0

I need to add at my web site a drag & drop function that allows the upload of all type of files (pdf, jpg, txt, etc.).

And I need a function to store this file in a specific directory.

I've found this code on the net, but it only allows the upload of images (jpg, png, etc.).

var fileobj;
 function upload_file(e) {
  e.preventDefault();
  fileobj = e.dataTransfer.files[0];
  ajax_file_upload(fileobj);
 }

 function file_explorer() {
  document.getElementById('selectfile').click();
  document.getElementById('selectfile').onchange = function() {
      fileobj = document.getElementById('selectfile').files[0];
   ajax_file_upload(fileobj);
  };
 }

 function ajax_file_upload(file_obj) {
  if(file_obj != undefined) {
      var form_data = new FormData();                  
      form_data.append('file', file_obj);
   $.ajax({
    type: 'POST',
    url: 'ajax.php',
    contentType: false,
    processData: false,
    data: form_data,
    success:function(response) {
     alert(response);
     $('#selectfile').val('');
    }
   });
  }
 }
  
  
#drop_file_zone {
        background-color: #EEE;
        border: #999 5px dashed;
        width: 290px;
        height: 200px;
        padding: 8px;
        font-size: 18px;
    }

    #drag_upload_file {
        width:50%;
        margin:0 auto;
    }

    #drag_upload_file p {
        text-align: center;
    }

    #drag_upload_file #selectfile {
        display: none;
    }
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <title></title>
</head>
<body>
<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">

    </div>

</div>


</body>
</html>
<?php 
$arr_file_types = ['image/png', 'image/gif', 'image/jpg','image/jpeg']; if (!(in_array($_FILES['file']['type'], $arr_file_types))) { echo "false"; return; }

if (!file_exists('uploads')) { mkdir('uploads', 0777); }

move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . time() . $_FILES['file']['name']);

echo "File uploaded successfully."; 
?>

How can I fix it to make sure that it allows the upload of all types of files?

I've already tried to add at $arr_file_types=['document/pdf']. If someone already has a working script, it would help me.

Thank you so much.

Striezel
  • 3,693
  • 7
  • 23
  • 37
NarcosZTK_10
  • 137
  • 3
  • 11

2 Answers2

0

i have managed to make is work by making some changes

change the html input accepted files

<input type="file" id="selectfile" accept="application/pdf">

And alter the ajax file

$arr_file_types = ['application/pdf'];

Prince
  • 1
0

just remove these lines:

$arr_file_types = ['image/png', 'image/gif', 'image/jpg','image/jpeg']; 

if (!(in_array($_FILES['file']['type'], $arr_file_types))) { 
   echo "false"; 
   return; 
}
huntharo
  • 2,616
  • 21
  • 23
Fedo
  • 1