Description box missing from HTML5 Uploader

The amount of work and time you two are spending for this project is amazing. I can't even imagine. I know cause of what I do, but you Deano and GG are a trip. Can't wait to see this in a yr from now. 

Sounds good to me.

OK, I just noticed something.  When you post to timeline; in Cheetah, it is a single file selection.  When you are in in the photos module, it is a multiple select.  I would have the extra fields hidden with a "+" button with label "Show extra fields."  that would give us the ability to add in extra info but not have all the fields showing on a multiple upload.  What do you think?

Yes, this is something I have thought about.  I tested uploading five images at a time and left the title and description fields blank and just hit submit.  I am not sure I want members doing mass uploading of photos; especially 10 or more and if you are monitoring what is uploaded you could have a lot of work in the backend removing photos that are inappropriate.  I think I would rather have it so that members are clicking, uploading, clicking, uploading as they would be unlikely to want to do that 30 times.  As it is now, they could just highlight 30 images and then click submit and bam, I have 30 images added to the site at one go.

Something to think about.

I am working on a Dolphin site and three Cheetah sites.  The custom changes to Dolphin isn't an issue but the ones to the Cheetah site I will have to keep notes on what changes I make if they don't make it into core.

For some reason i thought you were working on a dolphin site which is the reason i posted dolphin code.

Yes, I had noticed.  That is why the html5 uploader needed some improvements.

We could add the additional fields in a collapseable header; which I know how to do in a regular Cheetah form; the tags, categories, and even description.

Below is the description added to a Cheetah site as you can see by the lower left corner.  It needs a little work; probably make the textarea a little wider.  I also added in a language key along the same lines as the language key for the title.  The "Done" being down at the bottom is confusing; it pops up after the file is uploaded and is below the fields.  It should be up at the top under the image preview and should say something along the lines of "File upload completed."  This is from Boonex though, they were not the best at UI design.  Actually, I would remove the "Done" completely and just have the error message reported if the upload failed.

langs: {

                    abort: '<bx_text_js:_sys_txt_upload_abort />',

                    error: '<bx_text_js:_sys_txt_upload_failed />',

                    done: '<bx_text_js:_sys_txt_upload_done />',

                },

I will probably make the "Done" a null value so it isn't displayed.  It doesn't make sense to the end user for that to be down at the bottom; we just need to report when the upload failed.

 I have pretty much removed the regular uploader from Cheetah.

Yea, but then go to the photo module and upload 10, 20 or 30 photos at a time and see what it looks like with all those extra fields there. It will appear overwhelming.

I may offer the extra fields in Cheetah, but i would have to make them a option the admin can select.

I think what I will look at later is having the additional fields, tags and categories; that would then have the html5 uploader completely replace the regular uploader.  Having your members doing an upload and then having to go to the photo or video and clicking edit to add the additional information is an extra step that many probably won't do.  Plus, if they are uploading and you are going to offer searches on categories and/or tags then all the photos or videos won't have any tags or categories to search on.

Again, thanks for your help; I was almost there but not quite. 

Thanks Deano; much appreciated.  You are the man.

 I had already seen I was using the wrong name; that is why it didn't process my input.

 OK, this explains why the submit button was placed over top of my description box; I didn't see that and used css to move the submit button out of the way.

This modification will add a description box to the html5 uploader.

This modification is for Dolphin. Cheetah is a little different due to changes i made in how the title is handled. I do not currently have instructions for Cheetah.

Edit templates\base\uploader_html5.html


Look for this at about line 49

            height: calc(__preview_size__px + 90px);

Change to this to add needed height to make room for the description box.

            height: calc(__preview_size__px + 310px);


Now look for this section at about line 156

    <script id="b-file-ejs" type="text/ejs">
        <div id="file-<%=FileAPI.uid(file)%>" class="js-file b-file b-file_<%=file.type.split('/')[0]%>">
            <div class="js-preview-container bx-def-border">
                <i class="sys-icon <%=icon[file.type.split('/')[0]]||icon.def%>"></i>                
            </div>
            <div class="b-progress bx-def-border"><div class="js-bar b-progress__bar"></div></div>
            <div>
                <div class="bx-def-margin-thd-top">
                    <div class="input_wrapper input_wrapper_text clearfix">
                        <input class="form_input_text bx-def-font-inputs" name="" value="<%=file.name.substr(0, file.name.lastIndexOf('.'))%>" disabled />
                    </div>
                </div>
                <div class="bx-def-margin-thd-top b-file__abort clearfix"><a class="js-abort bx-btn bx-btn-small"><bx_text:_Cancel /></a></div>
                <div class="bx-def-margin-thd-top b-file__info js-info"></div>
            </div>
        </div>
    </script>



Replace it with this.

    <script id="b-file-ejs" type="text/ejs">
        <div id="file-<%=FileAPI.uid(file)%>" class="js-file b-file b-file_<%=file.type.split('/')[0]%>">
            <div class="js-preview-container bx-def-border"> <i class="sys-icon <%=icon[file.type.split('/')[0]]||icon.def%>"></i> </div>
            <div class="b-progress bx-def-border">
                <div class="js-bar b-progress__bar"></div>
            </div>
            <div>
                <div class="bx-def-margin-thd-top form_advanced_table">
                    <div class="bx-form-element bx-form-element-textarea bx-def-margin-top clearfix">
                        <div class="bx-form-caption bx-def-font-inputs-captions">
                            <bx_text:_Title />
                        </div>
                        <div class="input_wrapper input_wrapper_text clearfix">
                            <input class="form_input_text bx-def-font-inputs" name="" value="<%=file.name.substr(0, file.name.lastIndexOf('.'))%>" disabled /> </div>
                    </div>
                    <div class="bx-form-element bx-form-element-textarea bx-def-margin-top clearfix">
                        <div class="bx-form-caption bx-def-font-inputs-captions">
                            <bx_text:_Description />
                        </div>
                        <div class="input_wrapper input_wrapper_textarea  clearfix">
                            <textarea class="form_input_textarea bx-def-font-inputs" name="medDesc"></textarea>
                        </div>
                    </div>
                </div>
                <div class="bx-def-margin-thd-top b-file__abort clearfix">
                    <a class="js-abort bx-btn bx-btn-small">
                        <bx_text:_Cancel />
                    </a>
                </div>
                <div class="bx-def-margin-thd-top b-file__info js-info"></div>
            </div>
        </div>
    </script>


Save it.


Now edit inc\classes\BxDolFilesUploader.php

Look for this at about line 604

            if (!$this->initFile($iId, $s)) {


Change it to this so it will update the description along with the title.

            if (!$this->initFile($iId, $s, '', '', $_POST['medDesc'])) {


Thats it.

From what I see, the HTML5 uploader was hacked together by Boonex.  It has inline CSS and JS instead of having it in external files.  When requests were called to fix some of the issues, they just ignored the members.  

 Inline scripts as well.  // Simple JavaScript Templating

// John Resig - http://ejohn.org/ - MIT Licensed

Now my input text box isn't working.  I tried moving some things around for a better layout. the submit button is over the input box.  I wanted the Please enter a title to be above the input box because if you have two boxes then it may be confusing.

This should have been fixed by Boonex; several people pointed out the issue and why it was bad for not having a description.  When you are posting to the timeline, you need the description box to be there at the time you are posting.

I may put the regular uploader in place and try stripping out the unneeded parts.  The HTML5 uploader is great for posting to the timeline, simple easy for members; except it is missing the description part.  Basically two things, select the file; file is uploaded and then enter title and description which gets posted to the timeline.  The description box isn't just; "This is a Corvette Stingray."  It is for imputing commentary such as "The 2020 Corvette Stingray was one of the worst of the Corvette line.  It had many design flaws that caused ...."  The timeline is going to be the main area of the site where people interact.

Are you referring the file-api plugin? Or did you find something else.

When Boonex implemented this, they added some third party code from outside of Boonex.

If I add the following to the uploader._html5.html I can get an input box for the description. 

<input class="form_input_text ch-def-font-inputs" name="description" value="" />

However, it needs to be a text area and that doesn't work; it doesn't process the textarea.  The form in uploader.html5.html is actually ejs templating.  I guess I need to look in the FileAPI.min.js

A user should be able to put in a description at the time of uploading.  This was mentioned over at the Boonex forum but the Boonex team ignored it.  I mentioned the same on a different thread.  This goes for photos as well as videos; and files.

https://www.boonex.com/forums/topic/No-detailed-description-while-submitting-videos.htm