Advertisement:

Author Topic: Tip: Add an upload status indicator on the item post/edit pages  (Read 15615 times)

Jesse

  • Hero Member
  • *****
  • Posts: 631
  • Out of my mind, back in 5 minutes
Tip: Add an upload status indicator on the item post/edit pages
« on: January 27, 2012, 10:42:03 am »
Got Status?


Hi all,

For anyone interested in adding a simple "status" indicator to the Item Post or Item Edit pages, I'll show you a way to do so. This is not a "progress" indicator in the sense that it lets you know how far along the upload is. Rather, it simply gives a visual indication to the user that something is happening. You can use any animated GIF image you'd like with this... I'll show you where to get some.


Step 1: Edit your item-post.php or item-edit.php page (or both). Within the <head> section, at this code:
Code: [Select]
<script type="text/javascript">
    function loadSubmit() {
var selected = $("#catId").val();
if(selected>0){
    var ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.visibility = "visible";
    setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
    return true;
}
    }
</script>


Step 2: Find this code near the bottom of the document:
Code: [Select]
<button type="submit">
Replace it with this code:
Code: [Select]
<button type="submit" onclick="return loadSubmit()" >

Step 3: Finally, place this code where you wish for the indicators to be seen (I suggest placing it immediately below the <button> code shown in Step 2):
Code: [Select]
<p style="visibility:hidden;" id="progress"/><img id="progress_image" style="padding-left:5px;padding-top:5px;" src="statusbar.gif" alt=""> Uploading in progress...</p>

You'll want to replace the image src statusbar.gif with the correct file path and name for your own image. The text, "Uploading in progress", can also be customized as you'd like.


Where to get your own animated GIF indicators:


Below, I've attached some images. The first one is of the "Publish" button before clicking it. The second image shows the status bar being displayed after clicking the "Publish" button.


Code source: http://www.ryantetek.com/2009/06/animated-progress-loading-bar-upon-form-submit-javascript/
« Last Edit: January 28, 2012, 12:43:07 am by Jesse »

ingo

  • Full Member
  • ***
  • Posts: 216
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #1 on: January 27, 2012, 11:16:25 am »
Hi jesse,


Great - looking good, works perfect


"TJ"- always   with quick solutions   :)




thanks

Swede

  • Sr. Member
  • ****
  • Posts: 388
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #2 on: January 27, 2012, 03:24:17 pm »
I cant find the right way to get the loader image to show... i have it in the images folder, but i dont know the right way to type the path correctly to show the gif...
« Last Edit: January 27, 2012, 03:27:00 pm by Swede »

przemo

  • Jr. Member
  • **
  • Posts: 81
  • Director ;)
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #3 on: January 27, 2012, 04:48:03 pm »
For me the problem is. I put a picture here: http://www.jasielskie.org.pl/statusbar.gif, but unfortunately does not show it, only the text loading in progress ..

RajaSekar

  • Hero Member
  • *****
  • Posts: 791
  • ராஜசேகர்
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #4 on: January 27, 2012, 05:29:21 pm »

@Jesse

if you submit the ad without selecting a category that time also statusbar image loads.

ingo

  • Full Member
  • ***
  • Posts: 216
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #5 on: January 27, 2012, 06:11:42 pm »
Hi,


@ Swede / przemo


try it like this:


 <button type="submit" onclick="return loadSubmit()" ><?php _e('Publish', 'modern'); ?></button><p style="visibility:hidden;" id="progress"/><img id="progress_image" style="padding-left:5px;padding-top:5px;" src="<?php echo osc_current_web_theme_url('images/statusbar.gif') ; ?>" alt=""> Uploading in progress...</p>


@przemo - put the statusbar in current theme/images folder

regards
« Last Edit: January 27, 2012, 06:17:02 pm by ingo »

Jesse

  • Hero Member
  • *****
  • Posts: 631
  • Out of my mind, back in 5 minutes
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #6 on: January 27, 2012, 10:30:24 pm »
Thanks Ingo for showing how to link to the image.

If the images aren't showing up, but the text is, it just means you've got a wrong path to the image. You can always provide the full URL to the image, like:
http://www.yourwebsite.com/oc-content/themes/modern/images/statusbar.gif


Raja, good catch. I didn't notice that. I'll see if I can figure out a solution.

Jesse

  • Hero Member
  • *****
  • Posts: 631
  • Out of my mind, back in 5 minutes
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #7 on: January 28, 2012, 12:42:40 am »
Ok, I've found a fix for this. I've added a couple additional jquery lines to the code, which checks that a category has been selected. Since this is the only condition that seems to be an issue, it's the only one that needs to be addressed. With any other validation error, the page is "refreshed" anyway, so the status bar will disappear on its own should there be additional validation errors.

This is the code I've added, I will update the complete code in my first post (so make sure to copy it from there):
Code: [Select]
var selected = $("#catId").val();
if(selected>0){ ....

chofi

  • Full Member
  • ***
  • Posts: 211
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #8 on: January 28, 2012, 01:58:57 am »
Hi Jesse
Tell me, there's a way that when you select an image, that image appears without  uploaded to the server. Creating a link to the image with the user on your pc. Then, take the example of post
http://forums.osclass.org/plugins/%28new-plugin%29-picture-director/msg20578/#msg20578
I'm sorry my English is bad
Some time ago I had done that, place a gif to show the activity of a file upload. But did not work because if there were several errors continued as if the image was loaded and did not seem real.
regards
Chofi

Swede

  • Sr. Member
  • ****
  • Posts: 388
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #9 on: January 28, 2012, 04:04:03 am »
Thx, Ingo!!

Jesse

  • Hero Member
  • *****
  • Posts: 631
  • Out of my mind, back in 5 minutes
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #10 on: January 28, 2012, 09:06:42 am »
Hi chofi,

No, an image (like a preview image) can not be displayed without being uploaded first. This can be done with OSClass, but I believe it would take a good bit of work to do so.

RajaSekar

  • Hero Member
  • *****
  • Posts: 791
  • ராஜசேகர்
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #11 on: January 28, 2012, 08:48:21 pm »

We have made this as plugin try out this

plugin attached here

Jesse

  • Hero Member
  • *****
  • Posts: 631
  • Out of my mind, back in 5 minutes
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #12 on: January 28, 2012, 11:37:41 pm »
Awesome, thanks Raja! I'll have to try it out myself. But in the hospital right now as my wife is in labor.  ;D

ingo

  • Full Member
  • ***
  • Posts: 216
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #13 on: January 30, 2012, 11:21:00 am »
Hi Raja,

Please enlighten me on this plugin,
Is it proposal to work on this plugin or did your forget to add files to appear in Admin panel like Help and  "<?php ajax _loader(); ?>" code?

regards

mkmobi

  • Full Member
  • ***
  • Posts: 119
Re: Tip: Add an upload status indicator on the item post/edit pages
« Reply #14 on: February 26, 2012, 08:59:20 pm »
its works!!!!