Website Membership Plugin -- Uploading Image(s)

Hi yusuke,

This isn't currently very simple to do, but I've written some code that should get you started.

Before I even started, I added an Upload field to the accounts table called Profile Image.

You can add this code to your profile editing page. I added it to the sample_profile.php page that comes with the Website Membership plugin to try it out and make sure it works.

First, I added this row to the <table>:

<tr>
<td valign="top">Profile Image</td>
<td>
<?php list(list($current_user_with_uploads),) = getRecords(array('tableName' => 'accounts', 'where' => mysql_escapef('num = ?', $CURRENT_USER['num']), 'allowSearch' => false)); ?>
<?php if (sizeof(@$current_user_with_uploads['profile_image'])):
$upload = $current_user_with_uploads['profile_image'][0] ?>
<a href="<?php echo $upload['urlPath'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>
</a>
<?php else: ?>
No image uploaded<br />
<?php endif ?>
Upload: <input type="file" name="profile_image">
</td>
</tr>

Note that I needed to call getRecords() because the $CURRENT_USER array doesn't contain uploads.

Then I added this code immediately above "// update user":

// upload 'profile_image' if supplied
$uploadFieldName = 'profile_image';
$uploadInfo = @$_FILES[$uploadFieldName];
if ($uploadInfo && !$errorsAndAlerts) {

/// attempt to save the upload
$errors = saveUpload('accounts', $uploadFieldName, $CURRENT_USER['num'], null, $uploadInfo, $newUploadNums);

/// check for errors
if ($errors) {
$errorsAndAlerts .= "There was a problem with your upload: $errors<br/>\n";
}
else {

/// if the upload was successful, delete any other uploads associated with that record and field (so users only ever have 1 profile image)
global $TABLE_PREFIX;

// create query
$where = mysql_escapef(" WHERE tableName = 'accounts' AND recordNum = ? AND num != ?", $CURRENT_USER['num'], $newUploadNums[0]);

// remove upload files
$query = "SELECT * FROM `{$TABLE_PREFIX}uploads` $where";
$result = mysql_query($query) or die("MySQL Error: ". htmlspecialchars(mysql_error()) . "\n");
while ($row = mysql_fetch_assoc($result)) {
$files = array($row['filePath'], $row['thumbFilePath'], @$row['thumbFilePath2'], @$row['thumbFilePath3'], @$row['thumbFilePath4']);
foreach ($files as $filepath) {
if (!$filepath || !file_exists($filepath) || @unlink($filepath)) { continue; }

//$error = "Unable to remove file '" .htmlspecialchars($filepath). "'\n\n";
//$error .= "Please ask your server administrator to check permissions on that file and directory.\n\n";
//$error .= "The PHP error message was: $php_errormsg\n";
//die($error);
}
}
if (is_resource($result)) { mysql_free_result($result); }

// remove upload records
mysql_query("DELETE FROM `{$TABLE_PREFIX}uploads` $where") or die("MySQL Error: ". htmlspecialchars(mysql_error()) . "\n");
}

}

More than half of that code is dedicated to removing any other uploads after an upload is successful so that users never have more than one profile image. This is important since I haven't provided any way for users to remove a profile image! (They can, of course, replace their current image with another.)

The only other thing left to do is to make sure that your <FORM> has ENCTYPE="multipart/form-data" so that web browsers will allow uploads.

I hope this helps get you started! Please let me know if you have any questions.

Hi Chris.

This is GREAT! Wow!
Everything is working beautifully.

Thank you so much for your very easy-to-understand instruction, and of course the wonderful code.

I know you would've already done it if it was possible but would it be possible to upload multiple images/user?

Hi yusuke,

It's certainly possible, just more complicated.

Firstly, you'd want to remove the "remove upload files" block of code above, since that prevents users from uploading more than one image for your field.

Next you'd need to provide a way for users to delete images. The UI is more tricky than actually removing an image. You'd probably want to use JavaScript to fire a request to remove the image without reloading the page (and discarding the user's other changes to the form) and also remove the image element from the page. Another way to do it would be to have checkboxes beside images to delete them.

Once you've decided which image to delete, (preferably based on the upload record's num,) you can delete an upload like this:

function removeUpload($uploadNum) {
$where = mysql_escapef('num = ?', $uploadNum);

// remove upload files
$row = mysql_query_fetch_row_assoc("SELECT * FROM `{$TABLE_PREFIX}uploads` $where");
$files = array($row['filePath'], $row['thumbFilePath'], @$row['thumbFilePath2'], @$row['thumbFilePath3'], @$row['thumbFilePath4']);
foreach ($files as $filepath) {
if (!$filepath || !file_exists($filepath) || @unlink($filepath)) { continue; }

//$error = "Unable to remove file '" .htmlspecialchars($filepath). "'\n\n";
//$error .= "Please ask your server administrator to check permissions on that file and directory.\n\n";
//$error .= "The PHP error message was: $php_errormsg\n";
//die($error);
}

// remove upload record
mysql_query("DELETE FROM `{$TABLE_PREFIX}uploads` $where") or die("MySQL Error: ". htmlspecialchars(mysql_error()) . "\n");
}

Hi Chris,

Thank you so much for your reply!

Even though I understand what you are describing, I have no idea how to implement them, especially the UI part.

How should I move forward on this matter?
If it requires custom programming, will you please let me know so I can ask my client?

Thanx!

Hi yusuke,

Yes, this is definitely something that our consulting department could help you with. If this is something you're interested in doing, please send an email to consulting@interactivetools.com going over the functionality you would want and we can get you a quote on what this would cost.

Can a modified version of this be used in the signup form?

Hi,

Yes, you could do this in the signup form. Give it a try and let us know if you run into any issues.

Thanks

This code is great and works wel,

Could you also create a code or plugin with the membership function to upload multiple images and few the current images just like the the back-end of CMSB,

Ithink many people would be happy and great full.

Greetz Maurice