File not saving

index.php →

<!doctype html>
<html class="no-js" lang="">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	</head>
	<body>
		<div class="container box">
			<br>
			<br>
			<br>
			<h2 align="center">PHP upload an image file through URL.</h2>
			<br>

			<div class="form-group">
				<label>Enter Image URL</label>
				<input type="text" name="image_url" id="image_url" class="form-control">
			</div>
			<div class="form-group">
				<input type="button" name="upload" id="upload" value="upload" class="btn btn-info">	
			</div>
			<br>			
		</div>
		<br>
		<br>
		<br>
		<div id="result"></div>
		<br>
		<br>
		<br>
	 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <script>
    	$(document).ready(function(){
    		$('#upload').click(function(){
    			var image_url = $('#image_url').val();
    			if (image_url === '') {
    				alert("Please enter image URL");
    				return false;

    			} else {
    				$('#upload').attr("disabled","disabled");
    				$.ajax({
    					url:"upload.php",
    					method:"POST",
    					data:{image_url:image_url},
    					dataType:"JSON",
    					beforeSend:function(){
    						$('#upload').val("Processing...")
    					},
    					success:function(data){
    						$('#image_url').val('');
    						$('#upload').val('Upload');   
    						$('#image_url').attr('disabled',false); 		
    						$('#result').html(data.image);	
    						alert(data.message);			
    					}
    				})
    			}
    		})
    	})
    </script>
	</body>
</html>

and

upload.php:

<?php 
//upload.php

if (isset($_POST["image_url"])) {
	$message = '';
	$image = '';
	if (filter_var($_POST['image_url'], FILTER_VALIDATE_URL)) {
		$allowed_extension = array("jpg","png","jpeg","gif");
		$url_array = explode("/", $_POST["image_url"]);
		$image_name = end($url_array);
		$image_array = explode(".", $image_name);
		$extension = end($image_array);
		if (in_array($extension, $allowed_extension)) {
			$image_data = file_get_contents($_POST["image_url"]);
			$new_image_path = "upload/".rand().".".$extension;
			file_put_contents($new_image_path, $image_data);
			$message = 'Image Uploaded';
			$image = '<img src="'.$new_image_path.'" class="img-responsive img-thumbnail">';
		}else{
			$message = 'Image not Found';
		}
	}else{
		$message = 'Invalid URL';
	}
	$output = array(
		'message' => $message,
		'image'   => $image
	);
	echo json_encode($output);
}

Issue: the actual file is not yet saving.

How far through your code does it go? What debugging have you done so far? Does it get the form variables? Does it download the image correctly from the URL provided? Does it do that, but fail to save it?

Sir, This is the Live location. No errors are coming, but the file doesnt gets saved to upload folder.

Yes, but if you add echo and var_dump() statements through your PHP code to trace how far it is getting, what do you see? I can’t debug it from your live link, of course.

Isn’t a form essential or doesn’t JavaScript require a html form?

As @droopsnoot said - add echoes then at least you know where it is failing

I wondered about that, but presumed that the JavaScript was handling that, which is fine as long as the user hasn’t disabled JavaScript. Again, as you know, a simple debug var_dump() to make sure the form variables get through to the PHP would confirm that straight away.

1 Like

How can we use var_dump when index.php JS/AJAX code calls upload.php only through ajax call, in that case, upload.php is actually never called in the browser.

If you’re using var_dump to see where your script has got to, you can put a die() directly after.

2 Likes

Sir,

I have difficulty understanding how can var_dum help because ajax on index.php will receive only this output:

1 Like

You can view the network response, the raw output from the web page, in the browser’s developer console.

1 Like

I think if we put content of upload.php on index.php that way we can debug and ask ajax to call index.php

It is live server. in case we have any rights issue ons server?
Shared hosting!

I feel problem is here:

$new_image_path = “upload/”.rand().“.”.$extension;

On live server we have to correct this path.

Something like this:
$new_image_path = $_SERVER[“DOCUMENT_ROOT”].“upload/”.rand().“.”.$extension;

Changing the name of the piece of code that it calls won’t make any difference, changing what the code does.

OK, so what happens when you change it? Does it fix the problem?

No. Then in upload.php I ammanualty assigned:

$_POST["image_url"] = 'https://cms.qz.com/wp-content/uploads/2016/07/rtx2c9ws.jpg';

I am yet confused about what is wrong?

can this be a file permission issue or what else should I do to debug?

Does it get the image contents correctly? If so, does it have a problem when you try to store them? Both of those functions will return false if they fail, if you just look for their return values.

index.php (1.9 KB) upload.php (1019 Bytes)

Sir would it be possible if you can give a try on Live server?

That won’t help debug why it won’t work on your server. How about you do a bit more debugging first? I’m not being rude (and I’m sorry if it comes across that way, I’ve had a bad week), but it seems that you’ve stuck one echo statement into the code and tried nothing else.

What do file_get_contents() and file_put_contents() return?

1 Like

How do I check that?

As I said earlier - check the return values. You check the returns from isset(), filter_var() and in_array() to see if they’ve worked, so you should check the returns from these too, for the same reason. What if someone enters a URL that is inaccessible for some reason?