Show/hide label/<p> depending on upload state

[Richard]

Hello all

I have the following partial view that I use to display various uploads on a websites.

 

<div class="formEditorFor">
              @{ Html.RenderPartial("_Upload", Model.Upload.Where(p => p.RelatedQuestion.Contains("Question1")), new ViewDataDictionary { { "RelatedQuestion", "Question1" }, { "SupplierId", Model.EmploymentFreedomDiscrimination.SupplierId } }); }
          </div>

@model IEnumerable<Valpak.Websites.Sancroft.Ethical.Models.UploadInitialFile>

<div style="width:100%">
    <div>
        @(Html.Kendo().Upload()
              .Name(ViewData["RelatedQuestion"].ToString())
              .Async(a => a
                  .Save("SaveAndPersist", "Upload",
                      new { relatedQuestion = ViewData["RelatedQuestion"], supplierId = ViewData["SupplierId"], subSupplierId = ViewData["SubSupplierId"] })
                  .Remove("RemoveAndPersist", "Upload",
                      new { relatedQuestion = ViewData["RelatedQuestion"], supplierId = ViewData["SupplierId"], subSupplierId = ViewData["SubSupplierId"] })
                  .AutoUpload(true)
                      )
              .Files(files =>
              {
                  foreach (var f in Model)
                  {
                      files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);
                  }
              })
        )
    </div>
    @if (!Model.Any())
    {
        string name = ViewData["RelatedQuestion"] + "Required";
        <p id=@name>Required</p>
    }
</div>

 

As you can see, for each upload on the page, I wish to display a "Required" bit of text dependent upon whether a particular upload has a file etc. I do not wish to enforce any strong validation which I could do on the post of the form, I just want to bring to the users attention that they need to upload something here.

How would I go about showing and hiding this depending on whether the upload has any thing present?

Alternatively, are their any css selectors I can use to facilitate this task e.g. k-dropzone k-empty >>> an empty upload;  k-dropzone k-hasdata >>> upload has received a file.

Again alternatively, is there a way to change the button text from "Select Files" when nothing is present, to "File already selected" when something has been uploaded?

Please note, I have multiple instances of the upload on the page which is where I have encountered a few problems!!!

[Dimiter Madjarov]

Hello Richard,

You could use the select event of the widget to modify the text of the upload button. Here is a small example that demonstrates this in action. The approach in the MVC Upload would be the same.

Regarding the other question, indeed the Upload widget has a specific CSS k-upload-empty class on it's wrapper, when there are no selected files.

Regards,
Dimiter Madjarov
Telerik

 

 

[Richard]

Good morning Dimiter

Thank you very much for this - I have gone with the k-upload-empty method as I was experiencing all sorts of strange things (also it's a lot easier to implement!)

Thank you for pointing this out to me.

 Rich