MyBB Community Forums

Full Version: [Solved] Attachment progress bar
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I'm looking for a progress bar when I upload attachments.
I've seen other people asking for that but no solution.

The nearest thing for this is to use the Ajax Multiple Upload Attachment, http://community.mybb.com/mods.php?action=view&pid=104

But there is some bugs in it and I don't like some functionality (for example, when you add a file it does not bother to show you the file you selected, it's like nothing  happened :/)

I've search for nice an simply way to add this functionality, until now I'm trying to do with this https://www.developphp.com/video/JavaScr...l-Ajax-PHP but no success on my side :/

I've seen similar technique as : http://www.sitepoint.com/html5-javascrip...gress-bar/
or http://phppot.com/jquery/jquery-progress...le-upload/
or this : http://www.w3bees.com/2013/10/file-uploa...s-bar.html

Anybody to try this with me ? Big Grin

An update if somebody want to help.
Adding the progress bar itself is not a problem using the "post_attachments_add" template and some css, however, updating the progress during the file upload is something else ^^"

In the different php file editpost, newreply and newthread, we can found the call for the upload function if conditions are ok :


[...]

if($mybb->settings['enableattachments'] == 1 && !$mybb->get_input('attachmentaid', MyBB::INPUT_INT) && ($mybb->get_input('newattachment') || $mybb->get_input('updateattachment') || ($mybb->input['action'] == "do_editpost" && isset($mybb->input['submit']) && $_FILES['attachment'])))

[...]

$attachedfile = upload_attachment($_FILES['attachment'], $update_attachment);

[...]

Now if we go in functions_upload.php, at the bottom of the file there is the actual upload function :


function upload_file($file, $path, $filename="")

[...]

$upload['original_filename'] = preg_replace("#/$#", "", $file['name']); // Make the filename safe

    $filename = preg_replace("#/$#", "", $filename); // Make the filename safe
    $moved = @move_uploaded_file($file['tmp_name'], $path."/".$filename);
[...]

For the progress bar it should be the "@move_uploaded_file($file['tmp_name'], $path."/".$filename)" that we need to track to update the progress.

In the tutorial that I've read, everytime there is some ajax to do this. My competences are limited and I don't know if it could even be just possible to implement the progress bar by adding some line of code to the actual upload function of MyBB. So if you have an idea, let me know.
As it seems that I won't be able to do the above. I'm trying to incorporate uploadify ( http://www.uploadify.com ) in mybb for newreply, newthread and editpost. However, I still have some problems.

In the template "header" I've added at the beginning :

<script type="text/javascript" src="{$mybb->asset_url}/upload-video/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/upload-video/jquery.uploadify-3.1.min.js"></script> 


In the template "post_attachments" I've integrate this code
<div id=upload_video_box>
<script type="text/javascript" src="{$mybb->asset_url}/upload-video/upload_module.js"></script> 
<input type="file" name="file_upload" id="file_upload" />
</div>


"upload_module.js" contains :

$(function() {
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',
        'uploader' : 'uploadify.php'
        // Put your options here
    });
});

I created a new theme file "uploadify.css" which contains the whole css needed by uploadify and it's applied globally.

Al the files available by downloading uploadify from its website are in my "upload-video" folder + jquery-1.7.2.min.js that I've downloaded aside.

But it is not working, i just obtain the input :
[attachment=34256]

Documentation for its implementation from uploadify : http://www.uploadify.com/documentation/u...uploadify/


Anybody has an idea or has managed to integrate an equivalent uploader for file ?

Thanks in advance.

Edit : Did my initial post was moved to this "plugin" category ? I think that I originally post in "support" ( http://community.mybb.com/thread-119455-...pid1156173 ) and i'm not trying to make a plugin but to integrate this directly.
If you could move back the thread to support would be great.

Edit 2: "This is a place where plugin, modification and theme authors can discuss anything they may be working on." Ok, I fit in the modification frame. As there is "plugin" in each title, it was completly dedicated to plugin in my mind.

I've also tried with this uploader : http://www.albanx.com/ajaxuploader/index.php
Not working with my installation.

Based on the comments in this thread : http://community.mybb.com/thread-118369.html

For this ajax uploader I've uploaded the whole batch of file into "folder/upload-video".
In "headerinclude" I added "<script type="text/javascript" src="{$mybb->asset_url}/upload-video/jslibs/ajaxupload-min.js"></script>"
as I saw there is already "<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1804"></script>" I diddn't add the line for jquery.

For direct observation I changed the integration into the template "forumdisplay_rules_link", and thus, at the beginning of this template I added

<link rel="stylesheet" href="{$mybb->asset_url}/upload-video/css/baseTheme/style.css" type="text/css" media="all" />
			<div  style="border:1px solid black;padding:5px;">
				<div id="uploader_div"></div>
				<head><script type="text/javascript">$('#uploader_div').ajaxupload({url:'http://www.domain.tld/folder/upload-video/upload.php',});</script></head>	</div>


Based on this simple demo: http://www.albanx.com/ajaxuploader/examples.php?e=1
I shouldn't add anything else no ?
Up.

The javascript does not seem to be interpreted.

How can I include the Real ajax uploader, the basic setup seems rather simple : http://www.albanx.com/ajaxuploader/doc.php?e=1

After numerous configurations of code insertion, it is still not working.

Anybody to help ?
You can take a look at current AJAX uploader plugins, for example: http://community.mybb.com/mods.php?action=view&pid=104
In my first post I've mentioned this plugin, however, I don't want to use it for different reason.

I've also look at the plugin file and I didn't saw something that could help me.
He activates its javascript file using the headerinclude template. After there is a lot of code that I don't all understand. He is using the attachment system of mybb which is something that I don't want.

I still don't understand why using the basic setup of the mentioned ajax uploader : http://www.albanx.com/ajaxuploader/doc.php?e=1
it is not working.

I've uploaded th whole batch of files (http://www.albanx.com/ajaxuploader/pricing.php - free download) in the "upload-video" folder.

In headerinclude, i've added :

<script type="text/javascript" src="{$mybb->asset_url}/upload-video/jslibs/ajaxupload-min.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/upload-video/jslibs/jquery.js"></script>
<link rel="stylesheet" href="{$mybb->asset_url}/upload-video/css/baseTheme/style.css" type="text/css" media="all" /> 

I'm not sure I should add the jquery as it's seems already incorporate with mybb.


At the top of the "forumdisplay_rules_link" template, I've added :

<div  style="border:1px solid black;padding:5px;">
<div id="uploader_div"></div>
</div>
<head><script type="text/javascript">
$('#uploader_div').ajaxupload({
    url:'http://www.domain.tld/fofov2/upload-video/upload.php'
});
</script> </head>
PS : The correct url is inserted on my forum.

All I have is the border design mentionned in this line : "<div  style="border:1px solid black;padding:5px;">"


Why the javascript does not seem to be interpreted ?
With the coide I've mentionned above shouldn't be the case ?

Looking at the code of the generated page (ctrl+u), the <head> and </head> tags that i've added to contains the javascript inside the "forumdisplay_rules_link" template appears red.
I've tried to put the following code inside "headerinclude" :
<script type="text/javascript">
$('#uploader_div').ajaxupload({
    url:'http://www.domain.tld/fofov2/upload-video/upload.php'
});
</script>

I removed it from the other place.

Still not working.

It is working well if I use the demo page integrated in the download package.
So it is it's integration with Mybb.