Need Help With Styling Javascript Output

Question

Hello

I am building a desktop app. On one of the pages I have a file uploader built from html, and javascript. When I upload a file, they are displayed underneath the upload form. Here is a screenshot https://postimg.org/image/d0u0yvn5p

I have set the background color of the div to red using css. However, I need to set a 1px border top to each entry so they have separation. I tried giving the div a border top but that only applies to the entire div.

How can I set the background color and add a borderTop to each upload?

Here is my html:

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">

<fieldset>
<legend>HTML File Upload</legend>

<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />

<div>
    <label for="fileselect">Files to upload:</label>
    <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
    <div id="filedrag">or drop files here</div>
</div>

<div id="submitbutton">
    <button type="submit">Upload Files</button>
</div>

</fieldset>

</form>

<div id="messages">

</div>

Here is my Javascript:

// getElementById
function $id(id) {
    return document.getElementById(id);
}

//
// output information
function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
}

// call initialization file
if (window.File && window.FileList && window.FileReader) {
    Init();
}

//
// initialize
function Init() {

    var fileselect = $id("fileselect"),
        filedrag = $id("filedrag"),
        submitbutton = $id("submitbutton");

    // file select
    fileselect.addEventListener("change", FileSelectHandler, false);

    // is XHR2 available?
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {

        // file drop
        filedrag.addEventListener("dragover", FileDragHover, false);
        filedrag.addEventListener("dragleave", FileDragHover, false);
        filedrag.addEventListener("drop", FileSelectHandler, false);
        filedrag.style.display = "block";

        // remove submit button
        submitbutton.style.display = "none";
    }

}

// file drag hover
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

// file selection
function FileSelectHandler(e) {

    // cancel event and hover styling
    FileDragHover(e);

    // fetch FileList object
    var files = e.target.files || e.dataTransfer.files;

    // process all File objects
    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
    }

}

function ParseFile(file) {

    Output(
        "<p><strong>File: </strong>" + file.name +
        "  <strong>Size: </strong>" + file.size +
        " bytes</p>"
    );



}

Any help would be appreciated.

Answer 1 · 2017-01-06T22:12:22Z

January 6, 2017 10:12pm

You could give each output paragraph a class and then style that class.

Instead of styling the #output div, you could give each output a class and then style that class in your CSS. For example, in ParseFile, the argument to Output begins with a paragraph tag, just add a class to it:
"<p class='upload'> ...".

Then, in your CSS you can create a new rule for .upload where you set your background and margin. But I'm surprised you need the margin, since paragraphs by default have vertical margins. Perhaps somewhere else in your CSS the normal paragraph behavior is already being overridden.

Welcome to the Treehouse Community

Looking to learn something new?

Kent Hefley

Kent Hefley

Need Help With Styling Javascript Output

1 Answer

Steven Parker

Steven Parker

You could give each output paragraph a class and then style that class.

Kent Hefley

Kent Hefley