Archivatory Update #003 | Delete your data, your account, and upload a profile photo!

in utopian-io •  3 months ago

archivatory-update-003-delete-your-data

Repository

https://github.com/jrswab/archivatory

New Features

What feature(s) did you add?

  • User Settings Page.
  • Photo upload for coming profile pages.
  • Account Deletion (removes user account and all data).
  • Display file size in MB instead of bytes.
  • Ability for users to delete their content from the server.

How did you implement it/them?

User Settings Page.
Profile Image Display:
<?php
$timeIs = time(); // set time

// forces photo reload to let user know the upload succeeded.
$proPho = shell_exec('ls uploads/profiles | grep '
.htmlspecialchars($_SESSION['username'])); 

// if no photo is found for the user, use current archivatory logo
if (!$proPho) {
  echo '<img src="img/archieTheArchivonaut.png" 
  class="rounded img-fluid" style="max-height:250px;"/>';
} else {
  echo '<img src="uploads/profiles/'.$proPho.'?='.$timeIs.'" 
  class="rounded img-fluid" style="max-height:250px;"/>';
}
?>
Profile Image Upload Form:
// Upload user profile photo with execs/proPhoUp.php to uploads/profiles/
<div id="uploadPro" class="d-inline-flex flex-column justify-content-center">
  <h5>Upload Profile Image:</h5>
  <p>Max allowed file size is 2MB</p>
  <form id="profilePhoto" class="form-group" enctype="multipart/form-data" 
  action="execs/proPhoUp.php" method="POST">
    <input class="form-input" type="file" name="file" />
    <br /><br />
    <button id="proPhoClick" onclick="pgShow()" class="btn btn-success" 
    name="submit" type="submit">Upload Photo</button>
    <br /><br />

   // Hide progress bar until button is pressed
    <div id="bar" style="display:none;">
      <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" 
        role="progressbar" aria-valuenow="100" aria-valuemin="0" 
        aria-valuemax="100" style="width: 100%"></div>
      </div>
      <br>
    </div>

  </form>
</div>
Account Deletion Form:
// Send account deletion data to execs/delUser.php script via POST
<form id="delForm" class="d-flex flex-wrap justify-content-center" 
action="execs/delUser.php" method="POST">
  <p style="font-size:1em; text-align:center;">
    You are about to delete your account.<br />
    <strong>This process is permanent!</strong><br />
    Click here only if you understand and would like to continue.&nbsp;&nbsp;
  </p>

  <input name="user" type="text" style="display:none" 
  value="<?php echo htmlspecialchars($_SESSION['username']); ?>">
  </input>

  <button type="submit" name="delAccount" class="btn btn-danger btn-lg">
    Yes, delete my account.
  </button>

  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
  </button>
</form>
Settings Page Javascript:
<script>
  // account deletion popup
  function pop(){
    document.getElementById("delButton").style = "display: none";
    document.getElementById("delAlert").style = "display: block";
  }
  // show progress bar on photo upload
  function pgShow() {
    var bar = document.getElementById("bar");
    bar.style.display = "block";
  }
</script>

Full source code found for settings.php at Github

Photo upload for coming profile pages:
<?php include '../config/topMem.php';
if (isset($_POST['submit'])) {
  $file = $_FILES['file']; // define file
  $fileName = $_FILES['file']['name']; // grab the file name
  $fileTmpName = $_FILES['file']['tmp_name']; // define file temp name
  $fileSize = $_FILES['file']['size']; // grab the file size
  $fileError = $_FILES['file']['error']; // define error code
  $fileType = $_FILES['file']['type']; // grab the file type

  // separate the file extension from the file name
  $fileExt = explode('.', $fileName);
  // convert the extension to lower case
  $fileActualExt = strtolower(end($fileExt));
  // allowed file extensions
  $allowed = array('jpg', 'jpeg', 'png');
  // check if file extension is allowed first
  if (in_array($fileActualExt, $allowed)) {
    if ($fileError === 0) { // check for no error codes
      if ($fileSize < 2202010) { // make sure file size is less than 2MB
        // give the upload a unique name
        echo $_SESSION['username'];
        $fileNameNew = $_SESSION['username'].".".$fileActualExt;
        // define file upload end location
        $fileDestination = '../uploads/profiles/'.$fileNameNew;
        // move the file
        move_uploaded_file($fileTmpName, $fileDestination);
        // return user to settings.php
        header('Location: ../settings.php');
      } else {
        echo "Your file is too big. 
        For best results please keep your file under 250MB.";
      }
    } else {
      echo "There was an error during uploading. Please try again.";
    }
  } else {
    echo "Sorry, the ".$fileActualExt." file type is not supported.";
  }
}
include '../config/bottom.html';

Full source code found for execs/proPhoUp.php at Github

Account Deletion (removes user account and all data).
<?php
include '../config/topMem.php'; 
require '../config/config.php';
require '../config/uploadDBconfig.php';

if (isset($_POST['delAccount'])){
  $user = htmlspecialchars($_POST['user']);
  echo '<div class="alert alert-danger" role="alert">';
  echo '<h2>Deleting '.$user;
  echo '</div>';
  
  // Define SQL commands
  $sqlDelUp = 'DROP TABLE archivatoryUploads.'.$user.';';
  $sqlDelUser = 'DELETE FROM archivatory.users WHERE username="'.$user.'";';

  // Run SQL commads to delete user data
  $runDelUp = mysqli_query($link, $sqlDelUp);
  $runDelUser = mysqli_query($link, $sqlDelUser);

  // get and delete user profile photo
  $getProPho = shell_exec('ls ../uploads/profiles/ | grep '.$user);
  shell_exec('rm ../uploads/profiles/'.$getProPho);

  // Redirect upon success or output error message.
  if ($runDelUp) {
    if ($runDelUser) {
      header("Location: ../index.php");
      }
    } else {
      echo 'Could not delete account. <br />';
      echo $link->error;
      echo '<br /><br /> Please take a screen shot and send it to the 
      #support thread on our <a href="https://discord.gg/PVNKWDx"> 
      Discord chat</a>';
    }
  } else {
    echo "Could not delete user content table. <br />";
    echo $link->error;
    echo '<br /><br /> Please take a screen shot and send it to the 
    #support thread on our <a href="https://discord.gg/PVNKWDx"> 
    Discord chat</a>';
  }
include '../config/bottom.html';

Full source code found for execs/delUser.php at Github

Updates to user content display page:
Show file size in MB:
while ($row = mysqli_fetch_assoc($result)) {
  echo '<tr><td>'.$row["date"].'</td><td>'.$row["file_name"].'</td>
      <td style="word-wrap:break-word">
      <a href="https://ipfs.io/ipfs/'.$row["hash"].'" target="_blank">'
      .$row["hash"].'</a></td><td>'.$fileSize = ($row["file_size"]/1000000).' MB</td><td>
Allow user to delete their files:
    <div class="btn-group">
      <img src="img/delete.png" width="50" type="button" class="dropdown-toggle" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" />

      <div class="dropdown-menu">
        <a class="dropdown-item" name="id" href="?delete='.$row["id"].'">Yes, delete forever.</a>
      </div>
    </div></td></tr>';
}
Check for _GET information to delete data.
//Check for deletion
if (!empty($_GET['delete'])) {
  $sqlDelete = "DELETE FROM ".$_SESSION['username']." WHERE id='".$_GET["delete"]."'";
  $delRun = mysqli_query($link, $sqlDelete);
  $rm = shell_exec("rm uploads/".$_GET['delete']);
}

Full source code found for hashtable.php at Github

GitHub Account

https://github.com/jrswab

Thanks For Reading!

All images came from royalty and attribution free sources unless specified.

Looking to take your Steem based creations to the next level?
Join us over at the Creators' Guild Discord group! We are here to encourage, support and increase the creation of quality content.

If you have any questions about the future of Steem
or my witness please feel free to message jrswab#3134 on Discord.

vote-jrswab-for-steem-Witnesses—Steemit.gif

Click here to vote with SteemConnect!
Or go to https://steemit.com/~witnesses
You can see all active witnesses on @drakos' steemian.info


Click here to join the mailing list and get exclusive SDB/STEEM giveaways!

Looking to support my content creation efforts outside of the Steem Blockchain?
Check out jrswab.com/support


Mastodon | Keybase | Twitter | Gitlab | Hacker Culture Podcast

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thanks for the contribution, @jrswab! Some really cool new features, Archivatory is definitely improving a lot by the day!

A few thoughts about the post itself though: I'm personally more interested in hearing about how you implemented the features, than seeing code snippets - e.g. you could've encountered something difficult and solved it in a certain way. Also, it would be great if you'd link to the commits you deem most relevant to your contribution (or a PR, or a comparison etc.), as that really helps us when reviewing! Keep in mind this is just my opinion and it didn't affect your score, so it's really no big deal if you prefer to keep your posts like this!

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thanks for the tips! I'll try to keep those in mind on the next update <3

Hey @jrswab
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

@jrswab can you please explain about account deletion process in coding somewhere there seems to see some mistake by my learning ??

·

What you you mean? I don't seem to follow your question.

This project is being supported by @Fundition

Fundition is a next-generation, decentralized, peer-to-peer crowdfunding and collaboration platform, built on the Steem blockchain.

#upfundition and #fundition tags on Steem represent the projects that are started on https://fundition.io.

Are You Prepared to Make the World a Better Place too?

Read the full details of Fundition Fund program

Learn more about Fundition by reading our purplepaper


Join a community with heart based giving at its core
steemitf.pngtwitterf.pngyoutubef.pngfacebookf.pnginstaf.pngdiscordf.png