please help. I am trying to create a drag and drop file uploader with php and javascript but the when I click on upload files the php file shows the following error: This page isn’t working localhost is currently unable to handle this request. HTTP ERROR 500
Here is the body of my html.
<body>
<div class="wrapper">
<div class="upload-console">
<h2 class="upload-console-header">Upload</h2>
<div class="upload-console-body">
<h3>Select files from your computer</h3>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="standard-upload-files" multiple>
<input type="submit" value="Upload files" id="standard-upload">
</form>
<h3>Or drag and drop files below</h3>
<div class="upload-console-drop" id="drop-zone">
Just drag and drop files here
</div>
<div class="bar">
<div class="bar-fill" id="bar-fill">
<div class="bar-fill-text" id="bar-fill-text"></div>
</div>
</div>
<div id="uploads-finished" class="hidden">
<h3>Processed files</h3>
</div>
</div>
</div>
</div>
<script src="js/upload.js"></script>
<script src="js/global.js"></script>
</body>
Here is my upload.php file.
<?php
header('Content-Type: application/json');
$allowed = ['mp4','png','jpg'];
$processed = [];
foreach($_FILES['files']['name'] as $key => $name) {
if($_FILES['files']['error'][$key] === 0) {
$temp = $_FILES['files']['tmp_name'][$key];
$ext = explode('.',$name);
$ext = strtolower(end($ext));
$file = uniqid('',true) . time() . '.' . $ext;
if(in_array($ext, $allowed) && move_uploaded_file($temp, 'uploads/' . $file)) {
$processed[] = array(
'name' => $name,
'file' => $file,
'uploaded' => true
);
} else {
$processed[] = array(
'name' => $name,
'uploaded' => false
);
}
}
}
echo json_encoded($processed);
?>
Here are results of running the tree command
.
├── css
│ └── global.css
├── index.html
├── js
│ ├── global.js
│ └── upload.js
├── phpinfo.php
├── upload.php
└── uploads
├── 5cc57ea6322ba7.448603261556446886.jpg
├── 5cc58390d82095.937935921556448144.jpg
├── 5cc583f48b4a81.475000611556448244.jpg
├── 5cc596bb0b2980.525819171556453051.jpg
├── 5cc5ca069f34e8.919505521556466182.jpg
└── 5cc5ccc7525ad4.537311361556466887.jpg
Images appear to be uploading but I get a 500 error page. I'm trying to get it to get the progress bar to show progress and change the class hidden to show the downloaded files. But it redirects to uploads.php with a 500 error. Thank you.
All of the html and js can be seen here on codepen.
