Web Development

Using a spinner on a input file element

18-Feb-16 14:05

I've spent an hour trying to figure out why my img element won't resize correctly.

By cutting and pasting it in different places, I discovered when I place the IMG element inside a fieldset, it malfunctions, but outside the fieldset it works right.

But I need it inside the fieldset to load and post the form using asp.net MVC and razor.
Or maybe not?, dump the fieldset perhsps.

The image is part of a form to upload and display the image assignment.
End of the day, I'm going home.

jkirkerx17-Feb-16 13:26

17-Feb-16 13:26

So I'm using bootstrap.css and fontawesome on a asp.net MVC project, and I wanted to show the spinner on the File Upload button.

I tried wrapping the HTML in a A element, but got the default square grey button and the text saying choose a file. I did looked around the internet for awhile but found nothing.

<div class="form-group">
  <label class="control-label">Enter your avatar's name max(40)</label>
  <div class="input-group">
    
    <input id="AvatarName" class="form-control" type="text" maxlength="40">
    
      <span class="btn btn-primary btn-file">
        Browse <input id="AvatarBrowse" name="AvatarBrowse" class="btn btn-primary has-spinner active" type="file" />
        <span class="spinner">^__i class="fa fa-cog fa-spin">
      </span>
    </span>
  </div>
</div>

Maybe someone out there a ran across this before.
Funny part is I got all the complicated stuff written, like the Jquery to upload the file and the controller to write the file.

But this eludes me. I suspect it can't be done.
The active on the input was just to see if I can make it work on page load.

Richard Deeming18-Feb-16 2:59

18-Feb-16 2:59

Customising the file input is fairly complicated. Most browsers don't give you any hooks to do it, so you end up hiding the input and generating the UI yourself. It's tricky, because you have to make the click event on your custom UI trigger the click event on the input, so that the file dialog pops up.
Whipping File Inputs Into Shape with Bootstrap 3 · A Beautiful Site[^]

You might have more luck using a pre-built control for this. For example:

Bootstrap File Input - © Kartik[^]
Bootstrap Filestyle 1.2.1 - jQuery Customization of input html file for Bootstrap Twitter[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

jkirkerx18-Feb-16 4:04

18-Feb-16 4:04

Richard Deeming wrote:
Customising the file input is fairly complicated

Your right about that. I have the first part done in the 1st link you provided.
Just thought it would be cool to add a spinner to show work is being done.

The more I think about it should be able to do that. My wheels are turning!
Thanks Richard, I'll read the other links.

jkirkerx18-Feb-16 4:16

18-Feb-16 4:16

I got my cog to spin, Happy now.
I just made a cog and toggled the class of the cog.

<div class="form-group">
  <label class="control-label">Enter your avatar's name max(40)</label>
  <div class="input-group">
    <span class="input-group-addon">
      <i class="fa fa-folder-open"></i>                                                                                                
    </span>
    <input id="AvatarName" class="form-control" type="text" maxlength="40">
    <span class="input-group-btn">
      <span class="btn btn-primary btn-file">
        Choose                                                             
        <input id="AvatarBrowse" name="AvatarBrowse" class="btn btn-primary spinner" type="file" />
        <i id="AvatarSpinner" class=""></i>                                                                                                                                                                                                                                                
      </span>                                                        
    </span>
  </div>
</div>

And then the JQuery Side

function run_upload_serviceAvatar(e) {

    var _files = e.target.files,
        $spinner = $("#AvatarSpinner");

    if (_files.length > 0) {

        $spinner.toggleClass("fa fa-cog fa-spin");

        if (window.FormData !== undefined) {
            var _data = new FormData();
            for (var x = 0; x < _files.length; x++) {
                _data.append("file" + x, _files[x]);
            }            

            $.ajax({
                type: "POST",
                url: '/Admin/json_upload_avatar?id=-1',
                contentType: false,
                processData: false,
                data: _data,
                error: function (xhr, status, p3, p4) {

                    var err = "run_upload_serviceAvatar Error: " + " " + status + " " + p3 + " " + p4;
                    if (xhr.responseText && xhr.responseText[0] == "{") {
                        err = JSON.parse(xhr.responseText).Message;
                    }
                    console.log(err);
                    $spinner.toggleClass("fa fa-cog fa-spin");

                },
                success: function (data) {
                    console.log(data);
                    $spinner.toggleClass("fa fa-cog fa-spin");

                }
            });
        }
        else {

            alert("This browser doesn't support HTML5 file uploads!");
        }
    }    
}

modified 18-Feb-16 11:11am.

Brisingr Aerowing26-Feb-16 17:57

Brisingr Aerowing

26-Feb-16 17:57

For anything Bootstrap related I would recommend Bootsnipp[^]

What do you get when you cross a joke with a rhetorical question?

The metaphorical solid rear-end expulsions have impacted the metaphorical motorized bladed rotating air movement mechanism.

Do questions with multiple question marks annoy you???

jkirkerx27-Feb-16 13:08

27-Feb-16 13:08

Oh Thanks!, just bookmarked it

Brisingr Aerowing27-Feb-16 15:13

Brisingr Aerowing

27-Feb-16 15:13

There's also Bootswatch[^] for themes.

jkirkerx28-Feb-16 8:09

28-Feb-16 8:09

I have those already, but thanks for pointing that out!

This Bootstrap.css stuff is hard to learn. I'm finally starting to figure out the col-xx-xx and how it works.

the middle xx controls when to go block or inline based on device, like xs or sm
and how the numbers work for it.

however I do like it. less artwork to manufacture and less HTML writing.

Thwarting CTRL-A Copies

C-P-User-316-Feb-16 7:10

16-Feb-16 7:10

I want to do a simple CTRL-A copy/paste of a list from THIS PAGE HERE[^]

When I do that, I get only part of the entire list, and at this moment I can't figure out the parameters that define the start and stop points of what I do get.

I looked at the page source, and I see 124 lines of what appears to be JavaScript (anyone, correct me).

This is a new trick on me. Can anyone here describe to me a method for getting that list in some sort of text (ASCII or HTML, or whatever) form ?

Richard Deeming16-Feb-16 7:53

16-Feb-16 7:53

The page appears to be using SlickGrid[^], which is virtualizing the UI, so only a small number of rows actually exist in the DOM at any one time.

The data is available via script, so it's fairly easy to extract. Open the browser's developer tools, and paste in the following commands:

JavaScript

var table = $("<table/>");
table.append($("<thead/>").append($("<tr/>").append($("<th/>").html("Booth")).append($("<th/>").html("Name"))));
var tbody = table.append("<tbody/>");
$.each(expocadfx.fxData.exhibitors, function(i,v){ tbody.append($("<tr/>").append($("<th/>").text(v.boothNumber)).append($("<td/>").text(v.name))); });
$("body").empty().append(table);

That will replace the entire page content with a single table containing the list you want to copy.

If you need more data, each record has some other properties you can use:

id
status
name
nameOther
exhId
boothNumber
boothIndex
address1
address2
city
state
zip
country
contact
phone
fax
email
website
profile
category
url

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

C-P-User-316-Feb-16 7:57

16-Feb-16 7:57

Super cool. Where do I paste your sample code ?

Richard Deeming16-Feb-16 8:02

16-Feb-16 8:02

Open the developer tools and paste the commands in the console.

Firefox[^]
Chrome[^]
IE[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

C-P-User-316-Feb-16 8:03

16-Feb-16 8:03

I'm using Opera (I know, I know)

Chrome and/or Firefox have some malware installed in them

I'll see if either one fixed itself yet

Richard Deeming16-Feb-16 8:05

16-Feb-16 8:05

It should work in Opera as well:
Console | Documentation | Opera Dragonfly – Opera's built-in web developer tools[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

C-P-User-316-Feb-16 8:09

16-Feb-16 8:09

Thanks. As you have probably guessed by now, my web design skills are minimal. You are really helping me a lot.

C-P-User-316-Feb-16 8:13

16-Feb-16 8:13

Ultra cool, I didn't know that DragonFly existed. Still doing some learning curve stuff.

C-P-User-316-Feb-16 9:56