PHP check if file_exists without extension then Ajax a div with appropriate media tag (img or video) based on filepath

Question

First posting here. I know inline php is not preferred but I haven't converted all my scripts to echo json_encoded arrays to work in javascript on the client side...so for now, I have inline php.

I do not know the extension of the user uploaded media because it could be a jpg,mp4,etc and upon upload it goes into a media folder with the user id as an identifier.

When my user first loads the div (and html page), the php script cycles through an array and does a fetch_assoc from sql query to the database each time; It returns the (media_id #) and prints out an li with the respective media displayed next to some other values from the query.

I only know the (media_id) and the file path name without the extension. When the page first loads, everything works great and the file_exists function returns correctly.

THE PROBLEM

When I AJAX the div and do the query again, because the user added a row to the database, the new list prints out with all info, BUT the file_exists function doesn't recognize the exact same paths as before and I don't have an img or video on the page.

I copy/pasted the exact same code from the original div and put it in a file for ajax to re-query and print the new li's.

All variables are the same and when I hard code a test filepath, it prints fine. Maybe there's a caching issue?

THE CODE

<?php 

    $result=$conn->query($select);
    $row=$result->fetch_assoc();
?>

<li>

<?php
if ($row['count']>0) {
  echo "<div class='media-container'>";
       $pathname = "uploads/".$row["id"]."media1";
       $testjpg=$pathname.".jpg";
       $testjpeg=$pathname.".jpeg";
       $testpng=$pathname.".png";
       $testmp4=$pathname.".mp4";
     if (file_exists($testjpg)==TRUE || file_exists($testpng)==TRUE || file_exists($testjpeg)==TRUE) {
        echo '<img src="'.$pathname.'">';
     }if(file_exists($testmp4)==TRUE) {
        echo "<video></video>";
     }
  echo "</div>";
}?>

</li>

I could use some advice on how to fix this and how to print appropriate media tags on unknown media types.

THE OUTPUT

<div class='media-container'>
</div>

DEBUGGING ATTEMPTS

echoing the exact file path of a known image in an <img> tag works fine. putting echo'test'; inside the file_exists case does nothing.

--

Solution (Kind of)

So I've used html's onerror before and I found a workaround, though I'd still like to know why I was getting an error. PSA this uses JQuery but javascript works too:

My Solution

<script>
function img2video(el, src) {
    $( el ).replaceWith( '<video class="videoClass"><source src="'+src+'" type="video/mp4"></video>' );
}
</script>

<body>
<img style="width:100%" onerror="img2video(this,'<?php echo$pathname;?>')" src="<?php echo$pathname;?>">
</body>

if you do an echo on $testjpg,$testjpeg,$testpng and $testmp4 are they correct? — MalcolmInTheCenter
– MalcolmInTheCenter, Commented May 2, 2020 at 2:02
hey @altoids. yep, I actually did echo'<img style="width:100%" src="'.$pathname.'">'; before the file_exist test and it worked fine for the img options, just doesn't work for the video options because of the wrong tag. — kevin gifford
– kevin gifford, Commented May 2, 2020 at 4:59
Edited the question with my solution. I used Javascript/Jquery instead of php. This in turn will save server-side resources, although I never figured out why the file_exists function didn't work. I'll keep it open for a day or 2 to see if someone can figure out why. I am also planning to change my javascript to append the list of elements with a new <li> when the user adds an item, instead of doing a whole new sql query and reloading of the <div> — kevin gifford
– kevin gifford, Commented May 2, 2020 at 6:02

kevin gifford · Accepted Answer · 2020-08-26 17:22:17Z

Alright, so here's the final answer I made to best fit the problem using glob:

Javascript:

function img2video(el,src,place) {
      if (place=='type') {
        $( el ).replaceWith( '<video controls controlsList="nodownload" disablePictureInPicture style="width:100%;object-fit:contain;" preload="auto"><source src="'+src+'" type="video/mp4"></video>');
      }
    }

PHP:

<?php for ( $i=1; $i <= $limit; $i++) {
        $path ="[DIRECTORY]/".$row["id"]."media".$i;
        $path = (!empty(glob($path . '*.{jpg,png,jpeg,avi,mp4}', GLOB_BRACE)[0])) ? glob($path . '*.{jpg,png,jpeg,avi,mp4}', GLOB_BRACE)[0] : false;?>
     <div>
       <img onerror="img2video(this,'<?php echo$path;?>','type',<?php echo$row["id"];?>,<?php echo$i;?>)" src="<?php echo$path;?>">
     </div>
<?php } ?>

I don't know how to mark as duplicate, if someone could help with that. My answer uses Glob_Brace from @Akif Hussain 's response on This Question.

Collectives™ on Stack Overflow

PHP check if file_exists without extension then Ajax a div with appropriate media tag (img or video) based on filepath

Solution (Kind of)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Solution (Kind of)

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related