Grow your CSS skills. Land your dream job.

How To Display Stored Image Using Path?

  • MBM
    # February 22, 2014 at 12:01 pm

    The code you posted doesn’t do that, either (it uses the filename the user provides*). If you did do that, however, it would mean that each user could have only one image uploaded at a time.

    • I would recommend against this, since it makes overwriting an image -accidentally or not- very easy. Using a checksum as the filename is a better approach, since it will be unique per file. You could store the user’s desired “filename” separately.

    I wanted to understand the theory before attempting the code. Yes I only want to use the filename the user provides and I only want the user to upload a single image – as it’s for a trading card multiple images are pointless. My php checks for an existing image so an image with the same filename cannot be stored twice. Of course this is a problem if a user creates an image themselves and wishes to update it but I will allow users to delete existing images so that should resolve the problem.

    I made the changes to the image table as you suggested. I now have :

    id - auto incrementing id
    username - session username *
    path
    
    • once a user logs in their username is stored in a session.

    I want users to enter all data – the card data and the image on a single page. As it stands I have two forms on one page that work independently. Now the tricky part will be putting it all together. Before I attempt the code :

    1. I assume I will need to create a username field in my card data table to link each user with their record – using a session as I have done with the image table?
    2. Empty field validation is in place so a user cannot create a record unless they have entered data in all files but how do I prevent users from not submitting an image?
    3. Is it possible to write both the card data and image data (two separate forms) on a single submit button click? Is this a way to resolve the issue above?
    __
    # February 22, 2014 at 7:33 pm

    1) If you’re using the user accounts for anything else, you should store them in a User table. The “user” field in your trading card table would refer to the matching username in the User table.

    2) Simply check that a file was submitted.

    3) Why would you use separate forms? Submit it all at once.

    MBM
    # February 22, 2014 at 7:47 pm
    1. Registered users information (name and e-mail) is stored in a table users
    2. Not sure how to do this but will look into it
    3. I don’t know how to do everything in one form! The first form creates the record :

    <form action="cards.php?CreateRecord=1" method="post" enctype="multipart/form-data" name="form1" id="genericForm"> While the second calls a php script which deals with the image uploading :

    <form action="upload_file.php" method="post" enctype="multipart/form-data">
    

    I could dump everything into one script but I think that would cause more issues as the data for the cards is written into one table and the data for the images into another.

    __
    # February 22, 2014 at 11:08 pm

    Checking if a file was uploaded follows the same process as checking if a form field was submitted. I would expect you’re doing it anyway: look in the $_FILES array.

    There’s no reason you couldn’t put everything in one form.

    You’re right that “dumping” everything into one script would likely cause problems, of course. You need to look at the tasks that each script does, and make a plan for them to work together in one process. Make a sort of “outline” for what it would look like.

    MBM
    # February 26, 2014 at 3:25 pm

    I knew this was going to happen!

    My form captures data and uploads an image into a folder and then the path is stored into a database table. In both cases a session is used to link this data to the user.

    User creates form – username session stored in db table User uploads image – username session stored in db table

    HOWEVER a user can upload any number of images so these records are not unique. A user could upload 10 images and only one form but each form MUST be linked to a single image! How do I ensure each form and image are linked to each other because unless I’m missing something there is no way to upload an image and then create a form at the same time? These are two independent actions? When you upload an image it’s stored in a temp folder and only once you click submit is the data then written into the table then clicking another submit button writes the form data into a table.

    To make each record unique I could use an auto incrementing id field then store that in a session and write it to the two database tables but again I don’t understand how to ensure the form and image are linked?

    I’ll post a gist once I understand the theory. This should help :

    Sorry don’t know how to embed images :

    Card

    __
    # February 26, 2014 at 3:53 pm

    unless I’m missing something there is no way to upload an image and then create a form at the same time?

    There’s no reason you couldn’t put everything in one form.

    <form action="form-and-image.php" method ="post" enctype="multipart/form-data">
        <input type="file" name="your-image">
        <input type="text" name="another-field">
        <!-- etc. . . . -->
    </form>
    

    Sorry don’t know how to embed images

    Just like a Link, but with an exclamation point in front:

    ![alt text](http://example.com/image.png)

    MBM
    # February 26, 2014 at 4:43 pm

    Amazing! Your code worked! In order to make each record unique I should use an auto incrementing id and store it as a session as well as the username?

    One more thing.

    I can only display the images inside a query e.g.

    php snippet 1

    I want to display them inside a table but this code doesn’t work :

    php snippet 1

    __
    # February 26, 2014 at 8:51 pm

    In order to make each record unique I should use an auto incrementing id and store it as a session as well as the username?

    The primary key must be unique per record, but that doesn’t mean it has to be an auto-incrementing id. Any unique value will work. If there is already some column that is guaranteed to be unique for all records (the card title, maybe?), then you don’t have to bother with an “artifical” PK. It won’t hurt, though, so if using an auto-inc column makes the most sense to you, go ahead.

    I don’t see any reason to store the card’s PK in the session, however. Maybe, if you were displaying a list of submitted cards on a subsequent page? So, the answer here is, “do you need it for some reason?”

    I can only display the images inside a query

    I’m not sure what you mean by that. In the image you posted, “the query” is your variable $Query. You can’t “do” anything inside it… In fact, the query isn’t even executed by your php script: it’s executed by the database.

    Your example displays the query results in a while loop. If you want to use the retrieved values outside of that loop, then you need to store them in a variable. Otherwise, each iteration of the loop overwrites the previous value, so after the loop is done, you only have the last set of values.

    The typical solution is to store the values in an array, for example:

    <?php
    //  . . .
    
    // fetch paths from all rows
    while( $row = mysqli_fetch_array( $Result ) ){
    // store values in an array
        $img_paths[] = $row["path"];
    }
    
    // later . . .
    
    foreach( $img_paths as $img_path ){
        print "<img src='$img_path'>";
    }
    
    MBM
    # February 27, 2014 at 10:05 am

    I’m having the same problem with the form i.e. I can upload an image without any date in the form fields. I must have made a change and it’s screwed everythng up. I’ve checked yesterday’s backup but I made it before the code was working. I don’t think the php is the issue?

    <form action="comics.php" method ="post" enctype="multipart/form-data">
    
    <div><input id="name" class="insetcard" name="name" type="text" placeholder="Name" value="<?PHP print $name ; ?>"/>
    <p class="error"><?php echo $nameErr;?></p></div>
    
    etc, etc
    
    <input type="file" name="upload" />
    
    <input name="Submit" type="submit" class="submitbutton" value="submit">
    
    __
    # February 27, 2014 at 8:26 pm

    I’m having the same problem with the form i.e. I can upload an image without any date in the form fields.

    I don’t see any input element for a date.

    I don’t think the php is the issue?

    I don’t know. Your example does not show the PHP code that processes the form.

    If a date is required, then just make sure that one is provided before accepting the image. Something like:

    <?php
    if(
        isset( $_POST["your-date-field"] ) 
        && strtotime( $_POST["your-date-field"] ) !== false
    ){
        /* valid date submitted */
    }
    else{
        /* no valid date submitted */
    }
    
    MBM
    # February 28, 2014 at 7:36 pm

    I’ve resolved it. I’m working on retreving the images and form data. I need to explain this so sorry for the long post.

    In the form table I have the following fields :

    id - PK auto incrementing
    username - stored as a session when the user logs in
    name
    species
    population
    weight
    length
    

    In the images table I have the following fields :

    id - PK auto incrementing
    username - stored as a session when the user logs in
    path - path to the image
    

    Both the form data and image data are submitted at the same time and have matching ids. e.g.

    The id for the form data for Tiger in $Table_2 is 1
    The id for the image path for Tiger in $Table_3 is 1
    

    etc, etc.

    If I run this query in mysql admin the records and images match :

    Select * from $Table_2 JOIN $Table_3 ON $Table_2.id = $Table_3.id
    

    The problem is I have two queries in my php. One for retrieving and displaying the form data and one for retrieving and displaying the images e.g.

    $Link = mysqli_connect($Host, $User, $Password, $Database);
    $Query = " Select * from $Table_2 JOIN $Table_3 ON $Table_2.id = $Table_3.id";
    if($Result = mysqli_query($Link, $Query)){
    while($row = mysqli_fetch_array($Result))
    {
    php for storing image path as array etc, etc
    }
    
    $Link = mysqli_connect($Host, $User, $Password, $Database);
    $Query = " Select * from $Table_2 JOIN $Table_3 ON $Table_2.id = $Table_3.id";
    if($Result = mysqli_query($Link, $Query)){
    while($row = mysqli_fetch_array($Result))
    {
    php for storing form data as arrays and adding a count etc, etc
    }
    

    So when I try the joins above it’s a mess and the form data does not match with the image.

    What query do I need to run in order to get the records to match? I have tried the same select statement in both queries and also tried reversing the tables.

    Also how do I add an image class around this code?

    <td class="tcgimagecell" colspan="5">
    <?php echo "<img src='$img_path'>"; ?>
    </td>
    

    I would normally use class=”imgsize” but that doesn’t work in this case. Do I add it in the loop here?

    <?php foreach( $img_paths as $img_path )
    { ++$i;?>
    
    __
    # February 28, 2014 at 8:12 pm

    Both the form data and image data are submitted at the same time and have matching ids.

    This is not necessarily true. There is absolutely nothing that ensures the two ids will stay in sync. You have the right idea -using the id to relate the two records- but one of them must not be auto-incrementing. One can be, but the other needs to be deliberately based on the first.

    So when I try the joins above it’s a mess and the form data does not match with the image.

    Don’t use * in your queries. At best, it gets confusing; at worst, it can lead to SQL errors (e.g., if you join two tables that have columns with the same names). It is far better to explicitly name each column you want, for example:

    SELECT f.username, f.name, f.species, f.population, f.weight, f.length,
        i.path
        FROM form_table f
        JOIN image_table i
        ON f.id = i.id
    

    Also how do I add an image class around this code?

    “Around” it? Are you trying to add a class to the image, or do you want to wrap the image in another element with a specific class?

    MBM
    # February 28, 2014 at 8:26 pm

    This is not necessarily true. There is absolutely nothing that ensures the two ids will stay in sync. You have the right idea -using the id to relate the two records- but one of them must not be auto-incrementing. One can be, but the other needs to be deliberately based on the first.

    Store the session of the auto incrementing PK id from the form table into the id of the image table?

    Don’t use * in your queries. At best, it gets confusing; at worst, it can lead to SQL errors (e.g., if you join two tables that have columns with the same names). It is far better to explicitly name each column you want, for example:

    Noted.

    “Around” it? Are you trying to add a class to the image, or do you want to wrap the image in another element with a specific class?

    Add a class to the image. Normally I would write :

    <img src="images/banner.png" class="imgsize" alt="banner">
    

    But within the php code that displays the images that doesn’t work.

    # February 28, 2014 at 9:14 pm

    But within the php code that displays the images that doesn’t work.

    <?php echo "<img src='$img_path'>"; ?>
    

    Try:

    <?php echo '<img class="imgsize" src="'.$img_path.'" />'; ?>
    
    __
    # February 28, 2014 at 10:30 pm

    Store the session of the auto incrementing PK id from the form table into the id of the image table?

    I think you are confusing the “session” with the database. The two are unrelated.

    But yes, one table (probably the form table) would have an auto-incrementing PK, which the other table would use.

    Add a class to the image. But within the php code that displays the images that doesn’t work.

    I don’t see why it wouldn’t…? Does @chrisburton‘s suggestion solve your problem?

Viewing 15 posts - 16 through 30 (of 36 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".