Original post
I want to use javascript to send some images to my Server running PHP, which then saves these images. I have followed this guide, but my php script only recieves empty files.
I suspect that this piece of javascript from the guide:
const files = document.querySelector('[type=file]').files;
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
let file = files[i];
formData.append('files[]', file);
}
does not really put the whole image data into formData. How can I fix this?
Source code
PHP script:
<?php
echo "Hello world";
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
var_dump($_FILES);
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo "File is valid, and was successfully uploaded.\n";
} else {
echo "Possible file upload attack!\n";
}
}
?>
Javascript:
const url = "http://localhost:8888/post.php"
const files = document.querySelector('[type=file]').files;
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
let file = files[i];
formData.append('files[]', file);
}
console.log(files);
fetch(url, {
method: 'POST',
body: formData
}).then(response => {
response.text().then((text) => {console.log(text)});
});
Output of the javascript:
Without actually seeing all of the code, it's hard to pinpoint any specific issue. If I follow the guide you linked to, I'm able to see the image posted to my server. This is my source code:
process.php:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<?php
var_dump($_POST);
var_dump($_FILES);
?>
<form>
<input type="file">
<input type="submit">
</form>
<script>
const url = 'process.php'
const form = document.querySelector('form')
form.addEventListener('submit', e => {
e.preventDefault()
const files = document.querySelector('[type=file]').files
const formData = new FormData()
for (let i = 0; i < files.length; i++) {
let file = files[i]
formData.append('files[]', file)
}
fetch(url, {
method: 'POST',
body: formData,
}).then(response => {
console.log(response)
})
})
</script>
</body>
</html>
In your case, I would recommend removing the javascript, setting the action attribute of your form to process.php, adding the enctype attribute to the form, setting it to multipart/form-data, and submitting an image that way. If you still don't see any images, then your issue may lie with PHP's configuration.
Your uploaded file may be too large. The default PHP max is 2MB. Try increasing the configuration value for upload_max_filesize. Also, if you increase the value of upload_max_filesize, you'll need to increase post_max_size too.
Here I a link to some common pitfalls: https://www.php.net/manual/en/features.file-upload.common-pitfalls.php
Related
I'd like to start by mentioning that I'm using vanilla Javascript and PHP, no jquery. The code that I have posted below is just a fragment. I have not included the PHP file or other code in javascript.
Now, the problem I am having is that no other code besides the form data post runs whenever I click my save button and activate the event. I have a console log at the beginning and end of the event to test if other code runs, and it never does. The form data, in this case a picture, gets posted to the PHP rest API file and stored in a folder as it should, but I do not receive a response in JSON from the PHP file that it is posted to, and my biggest problem is that no other code besides the post request runs in the event of the javascript code. Neither of the console.logs (test 1 and test 2) will appear.
When I test the post request with any other type of data, for instance, JSON, everything works perfectly. All of the code in the event runs, and I can receive responses in JSON from the same PHP file that the request was made to. There's something about posting form data that creates this bug. I hope that I have explained this clearly enough. Thank you for any assistance.
save_bg_btn.addEventListener('click', save_background_picture);
async function save_background_picture(){
console.log("test 1");
const formData = new FormData();
const save_files_background_pic = file_bg_pic.files[0];
const url = 'http://localhost/test/background-cover.php';
formData.append("file_bg_pic", save_files_background_pic);
await post_formdata_request(url, formData)
.then(data =>{
console.log(data);
})
.catch(err => console.log(err));
console.log(test 2);
}
function post_formdata_request(url, formData){
return new Promise((resolve, reject) => {
fetch(url, {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err));
});
}
Assuming this button is in a form, I think you need to add preventDefault() for the click event otherwise the form will submit and refresh the page. Also, fix the second console.log because that was breaking my tests until I noticed it as well.
async function save_background_picture(e){
e.preventDefault();
// ...rest of the code
console.log("test 2"); // <--- needed quotes
}
html file: test-fetch.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="myForm">
<input type="file" id="inpFile">
</form>
</body>
<script>
const inpFile = document.getElementById('inpFile');
const myForm = document.getElementById('myForm');
myForm.addEventListener('change', inpFunction);
async function inpFunction(e){
e.preventDefault();
const endpoint = "http://localhost/php-practice/test-fetch.php";
const formData = new FormData();
formData.append('inpFile', inpFile.files[0]);
fetch(endpoint, {
method: 'post',
body: formData
})
.catch(err => console.log(err));
}
</script>
</html>
And this is the php file: test-fetch.php
<?php
$file = $_FILES['inpFile'];
$fileName = $_FILES['inpFile']['name'];
$fileTmpName = $_FILES['inpFile']['tmp_name'];
$fileSize = $_FILES['inpFile']['size'];
$fileError = $_FILES['inpFile']['error'];
$fileType = $_FILES['inpFile']['type'];
$fileExt = explode('.', $fileName);
$fileActualExt = strtolower(end($fileExt));
$allowed = array('jpg', 'jpeg', 'png', 'pdf');
if(in_array($fileActualExt, $allowed)){
if($fileError === 0){
if($fileSize < 2000000){
$fileNameNew = uniqid('', true).".".$fileActualExt;
$fileDestination = 'images/'.$fileNameNew;
move_uploaded_file($fileTmpName, $fileDestination);
}else{
echo "Your file is too large!";
}
}else{
echo "There was an error uploading your file!";
}
}else{
echo "You cannot upload files of this type!";
}
echo 'Success';
?>
Now, if you add any other code, such as a console log inside the function "inpFunction" it will not run. The only code that will run will be the fetch posting the form data to the php file. This problem is really baffling me.
edit: the php file requires a folder called "images" as that is the path destination of any pictures being posted.
I am uploading a csv file and sending it to page to process using the js fetch api. I have session included using my init file and all works well accept for the page that should process to file info. Without including the session it works fine and I can process the file, when including it, I can see al the session info, but $_FILES just stops working, I can't see any of the info for some reason.
I really hope this is something stupid
Some code if needed
The init file
<?php
//define Site Root and Includes Path
defined('DS') ? null : define('DS', DIRECTORY_SEPARATOR);
defined('SITE_ROOT') ? null : define('SITE_ROOT', __DIR__ . DS );
defined('INCLUDES_PATH') ? null : define('INCLUDES_PATH', SITE_ROOT);
//get class files
include(INCLUDES_PATH.DS."Session.php");
require_once(INCLUDES_PATH.DS."functions.php");
require_once(INCLUDES_PATH.DS."DB.php");
require_once(INCLUDES_PATH.DS."Validation.php");
require_once(INCLUDES_PATH.DS."User.php");
require_once(INCLUDES_PATH.DS."Swp.php");
require_once(INCLUDES_PATH.DS."Incident.php");
require_once(INCLUDES_PATH.DS."Hira.php");
require_once(INCLUDES_PATH.DS."Mail.php");
The Session.php page
<?php
class Session
{
private $logged_in;
public $user_id;
function __construct()
{
session_start();
$this->check_login();
}
public function is_logged_in() {
return $this->logged_in;
}
private function check_login() {
if (isset($_SESSION['UserID'])) {
$this->user_id = $_SESSION['UserID'];
$this->logged_in = true;
} else {
unset($this->user_id);
$this->logged_in = false;
}
}
}
$session = new Session();
The form page
<?php
//get all the includes
require_once("../php_functions/_init.php");
print_r($_FILES);
//all rows from csv file
$rows = array_map('str_getcsv', file($_FILES['file']['tmp_name'][0]));
//get only the headers
$header = array_shift($rows);
//declare the array
$csv = array();
//create associative array using array_combine
foreach ($rows as $row) {
$csv[] = array_combine($header, $row);
}
print_r($csv);
like I mentioned if I removed the require once from this page it works as expected. Any ideas would help
Just in case you need it here is the js for uploading the file
document.querySelector("#upload_file").addEventListener("click", function () {
const url = 'php/employee/upload_employee_csv_form.php';
const files = document.querySelector('[type=file]').files;
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
let file = files[i];
formData.append('file[]', file);
}
console.log(formData);
fetch(url, {
method: 'POST',
body: formData
}).then(response => {
console.log(response);
});
});
I actually figured it out. So my session was being included before I actually added it, to fix this instead of just saying session_start I check to see if the session is there and then only start if necessary.
The code
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
Bonus tip :-)
The above code will work for php 5.4 and up if you are running something lower than 5.4 you can do the following:
if(session_id() == '') {
session_start();
}
Hope this helps
I want to upload an image in onchange of the input type file using AJAX. I can only use javascript, ajax and php.
Look my code:
index.html
<form id="myForm" action="" enctype="multipart/form-data">
<input type="file" name="imagefile" id="imagefile" onchange="uploadImage()">
</form>
upoad.js
function uploadImage(){
try {
ajpass = new XMLHttpRequest();
} catch (e) {
ajpass = new ActiveXObject("Microsoft.XMLHTTP");
}
ajpass.onreadystatechange = epasscheck2;
ajpass.open("post", "http://localhost/moodle/lib/editor/tinymce/plugins/moodleimage/upload.php", true);
ajpass.send();
}
function epasscheck2() {
if ((ajpass.readyState == 4) && (ajpass.status == 200)) {
var restxt = ajpass.responseText;
alert(restxt);
}
}
upload.php
<?php
echo $_FILES["imagefile"]["name"]; //error here
//file upload code here
?>
I am getting the error Undefined index imagefile in upload.php.
I am failed to pass the image file properties(like name, size, tmp_name etc) from upload.js to upload.php.
use the coding below it will help you to validate file
$(document).ready(function (e) {
$("#form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend : function()
{
//$("#preview").fadeOut();
$("#err").fadeOut();
},
success: function(data)
{
if(data=='invalid file')
{
// invalid file format.
$("#err").html("Invalid File !").fadeIn();
}
else
{
// view uploaded file.
$("#preview").html(data).fadeIn();
$("#form")[0].reset();
}
},
error: function(e)
{
$("#err").html(e).fadeIn();
}
});
}));
});
<form id="form" action="upload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
<input id="button" type="submit" value="Upload">
</form>
<div id="err"></div>
you must create a folder "upload".
<?php
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = 'uploads/'; // upload directory
if(isset($_FILES['image']))
{
$img = $_FILES['image']['name'];
$tmp = $_FILES['image']['tmp_name'];
// get uploaded file's extension
$ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
// can upload same image using rand function
$final_image = rand(1000,1000000).$img;
// check's valid format
if(in_array($ext, $valid_extensions))
{
$path = $path.strtolower($final_image);
if(move_uploaded_file($tmp,$path))
{
echo "uploaded";
}
}
else
{
echo 'invalid file';
}
}
?>
I feel like a necromancer right now, but regardless, it seems to me that the primary issue in this case was that no actual data was sent in the send() function. Since XMLHttpRequest is being used the form data isn't sent with it as it would be through a redirect directly through HTML. To rectify this, we'd need to first of all grab the file.
const img = document.getElementById("imagefile");
if (img.files.length == 0) return;
const file = img.files[0];
After which I suppose all there is left to do is to actually send the data.
const data = new FormData();
data.append("imagefile", file);
ajpass.send(data);
And with this, you hopefully would get a working result. Since I'm feeling generous, I'll also give you an extra PHP bit that can be useful.
if (isset($_FILES['imagefile']) {
...
}
isset() will more easily help you see if what you're looking for actually exists within the context. It makes finding where things go wrong if they do, and you can avoid nasty error messages.
You can use Dropzone instead of reinventing the wheel,
Here's the link : http://www.dropzonejs.com/#
I am trying to upload images to my server via an html-form without refreshing the page. My problem is the files arent getting uploaded and I cant figure out why.
Javascript code:
function uploadFiles(event) {
var fileSelect = document.getElementById('file');
var files = fileSelect.files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match('image.*')) {
alert("File: " + file.name + " is not an image and will not be uploaded.");
continue;
}
formData.append('images[]', file, file.name);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '../htdocs/Php/upload_file.php', true);
xhr.onload = function () {
if (xhr.status === 200) {
// File(s) uploaded.
alert('files uploaded');
} else {
alert('An error occurred!');
}
};
xhr.send(formData);
}
HTML code:
<form action="../htdocs/Php/upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" name="images[]" id="file" onchange="uploadFiles()" multiple required />
</form>
PHP code:
$numberOfFiles = count($_FILES['images']['name']);
for($id = 0; $id < $numberOfFiles; $id++)
{
if (!file_exists("../UploadedImages/" . $_FILES["images"]["name"][$id])) {
move_uploaded_file($_FILES["images"]["name"][$id], "../UploadedImages/" . $_FILES["images"]["name"][$id]);
}
}
Looks like your JavaScript is correct, but your PHP needs some attention. I modified your php so that it first check to see if $_FILES were passed. Then where you had some incorrect logic was in your !file_exists() statement and how you move and check the file name.
To check if a file exists, and to move the file you need to use $_FILES['images']['tmp_name']. The 'name' attribute is just the name of the file uploaded, not the physical file uploaded to the browser.
To really test your code, use firebug and look at the console. It should return a line that you can expand and look at what was posted and what was returned.
Here is an example, the following code i gave you returns this:
C:\filepath\binaries\tmp\phpDB53.tmp Was Succesuflly uploaded
C:\filepath\binaries\tmp\phpDB54.tmp Was Succesuflly uploaded
C:\filepath\binaries\tmp\phpDB55.tmp Was Succesuflly uploaded
C:\filepath\binaries\tmp\phpDB56.tmp Was Succesuflly uploaded
NOTE: Double check that the files paths are absolutely correct. When checking firebug console, the php file will also return file errors as well, given that you have php error reporting on.
//Check if files were passed through to your ajax page
if(isset($_FILES)) {
$numberOfFiles = count($_FILES['images']['name']);
for($id = 0; $id < $numberOfFiles; $id++)
{
if (file_exists($_FILES["images"]["tmp_name"][$id])) {
move_uploaded_file($_FILES["images"]["tmp_name"][$id], $_FILES["images"]["name"][$id]);
echo $_FILES["images"]["tmp_name"][$id] . " Was Succesuflly uploaded \r\n ";
} else {
echo "file didnt exists " . $_FILES["images"]["tmp_name"][$id] . "\r\n ";
}
}
} else {
//No Files were passed through
echo "no files passed through";
}
exit();
Hopefully that answers your question.
My goal is to upload some images to a server and provide them with a description.
On clicking an upload button, this is what I want to happen:
1) a javascript function dynamically adds a form to get a description
of the images.
2) on submitting the form:
a) the description entered in the form must be available $_POST['description'] at server side.
b) the images are sent to the server using an XMLHttpRequest
In the code I wrote the description is not available $_POST['description'].
When i remove the check if(!isset($_POST['description'])), the imagefiles are perfectly uploaded.
This is my code:
javascript code
upload.onclick = uploadPrompt;
// dynamically add a form
function uploadPrompt () {
// fileQueue is an array containing all images that need to be uploaded
if (fileQueue.length < 1) {
alert("There are no images available for uploading.");
} else {
var inputDescription = document.createElement("input");
inputDescription.className = "promptInput";
inputDescription.type = "text";
inputDescription.name = "description";
var inputButton = document.createElement("button");
inputButton.id = "promptInputButton";
inputButton.type = "submit";
inputButton.innerHTML = "Start uploading";
var promptForm = document.createElement("form");
promptForm.method = "post";
promptForm.action = "upload.php";
promptForm.onsubmit = uploadQueue;
promptForm.id = "promptForm";
promptForm.appendChild(inputDescription);
promptForm.appendChild(inputButton);
document.body.appendChild(promptForm);
}
}
function uploadQueue(ev) {
ev.preventDefault();
elementToBeRemoved = document.getElementById("promptForm");
elementToBeRemoved.parentElement.removeChild(elementToBeRemoved);
while (fileQueue.length > 0) {
var item = fileQueue.pop();
// item.file is the actual image data
uploadFile(item.file);
}
}
function uploadFile (file) {
if (file) {
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append('image',file);
xhr.upload.addEventListener("error", function (ev) {
console.log(ev);
}, false);
xhr.open("POST", "upload.php");
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("X-File-Name", file.name);
xhr.send(fd);
}
}
php code upload.php
<?php
session_start();
if (!isset($_POST['description'])) {
echo "upload:fail\n";
echo "message:No scene was specified";
exit();
}
if (isset($_FILES['image'])) {
if(!move_uploaded_file($_FILES['image']['tmp_name'], "uploads/" . $_POST['description'] . "/" . $_FILES['image']['name'])) {
echo "upload:fail\n";
}
else {
echo "upload:succes\n";
}
exit();
}
exit();
?>
I'd really advise against creating your own asynchronous file upload functionality when there is a plethora of developers who have already programmed the same thing better. Check out these options:
Blueimp's jQuery file uploader
Uploadifive (Uploadify's HTML5 implementation)
I've used these two before and they work very well. For BlueImp, you can use this option to send additional form data:
$('#fileupload').fileupload({
formData: $('.some_form').serialize()
});
The above captures a form and serializes its inputs. Alternatively, you can populate an array or object using specific values (i.e. from specific elements in your DOM):
var array = new Array();
$('.description').each(function() {
array[this.id] = this.value;
});
You'd use IDs to link your files and descriptions.