Portfolio Functionality

<!–UPLOAD A FILE–>
<?php if( isset( $_POST) )
{
// upload file
if( $_FILES[‘file’][‘size’] > 0)
{
$origin = $_FILES[‘file’][‘tmp_name’];
$destination = ‘files/’.$_FILES[‘file’][‘name’];
$file = move_uploaded_file($origin,$destination);

// insert into database
$user_id = $_GET[‘user’];
$file_title = $_POST[‘title’];
$file_path = $_FILES[‘file’][‘name’];
$uploaded_date = date(‘Y-m-d H:i:s’);
mysqli_query($db_server, “INSERT into files (USERID, file_title, file_path, uploaded_date) values (‘$user_id’,’$file_title’,’$file_path’,’$uploaded_date’)”);
}
}
$user_id = $_GET[‘user’];
$files = mysqli_query($db_server, “select * from files where USERID=’$user_id'”);
?>

<div style=”background-color:rgba(255, 255 , 255, 0); padding: 5px; width: 20px;”>
<button data-toggle=”modal” href=”#modalUpload” class=”btn btn-success btn-sm”>UPLOAD FILE</button>

</div>
<div class=”previews”>
<?php while( $myFile = mysqli_fetch_object( $files ) ):
$tmp = explode(‘.’, $myFile->file_path );
$extension = end($tmp);
?>
<div class=”preview”>
<?php
switch( $extension ):
case ‘jpg’:
case ‘gif’:
case ‘png’:
echo ‘<img src=”files/’.$myFile->file_path.'”>’;
break;
case ‘pdf’:
echo ‘<img src=”files/pdf-default.png”>’;
break;

endswitch;
?>

<div id=”deleteimagelink”><a href=”deletefile.php?file_to_delete=<?php echo $myFile->file_title?>”>Delete Image</br></a></div>
<div id=”setimagelink”><a href=”setfeaturedwork.php?thefile=<?php echo $myFile->id; ?>”>Set Featured Image</br></a></div>
</div>
<?php endwhile;?>
</div>
<div class=”modal fade” id=”modalUpload” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>&times;</span></button>
<h4 class=”modal-title” id=”myModalLabel”>Upload File</h4>
</div>

<div class=”modal-body”>
<form method=”post” enctype=”multipart/form-data” >
<input name=”title” placeholder=”Title of file”><br>
<input name=”file” type=”file”><br>
<button name=”btnUpload” value=”btnUpload” type=”submit”>Upload File</button>
</form>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
</div>
</div>
</div>

</div>

</div>

This week I have implemented the main feature of my site in which a user can upload multiple files to their portfolio. My intention was for a user to be able to build a portfolio of their work, with a thumbnail and a corresponding caption.

Originally I thought I could use the same method as the profile picture upload functionality, however because the file upload for a portfolio required multiple uploads with varied file types the code could not be replicated.

The above code uploads the file by directing the file to the folder destination, inserts the file into the database and gives it the correct user id using the session ‘user’ which is defined in the login page of the user that is currently logged in. A file name is given to the file which will be printed underneath each thumbnail. The $files variable is what prints out all (*) the files WHERE $user_id is equal to the user that is logged in. The while loop is executed repeatedly for each file, giving a preview of either JPG, GIF, PNG, or PDF. The ‘switch’ statement allows the code to be executed based on different conditions. Inside the while loop is also the ‘Set file as featured’ selection and the ‘Delete file’ selection because each file needs the same two selection buttons. The pop up modal for the upload process is appropriate because at this point the user can then give the file a name.

Advertisements
This entry was posted in Code. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s