0

I have customize the design upload file input so that it looks same in all browsers. Now I want to add 10 more upload file inputs one by one by clicking on add another file link. These 10 upload files should look same in design as the customized upload file input.

I also want to have a clear link so that if a user click on clear the text should get clear if there any in the upload file input.

And can we also clear the 10 upload files.

like i can add and clear the upload file simultaneously.

Can I get any help in this?

Here is my code:

<script language="JavaScript"> 
function validate_fileext() {
        var check = true;
        var error_msg = "Only PDF, JPG, JPEG, HTML, HTM and TIF accepted, please try again.";
            for (var j = 0; j <=upload_number; j++) {
                if (document.getElementById("attachment"+j) != null) {
                    var file = document.getElementById("attachment" + j).value.toLowerCase();
                    if (file != "" && !(file.lastIndexOf(".pdf") > 0 || file.lastIndexOf(".jpg") > 0 || file.lastIndexOf(".jpeg") > 0 ||                
                        file.lastIndexOf(".htm") > 0 || file.lastIndexOf(".html") > 0 || file.lastIndexOf(".tif") > 0)) {
                        check = false;
                       document.getElementById("static_error_message").innerHTML = 'Error : Only PDF, JPG, JPEG, HTML, HTM and TIF accepted as attachment(s).';
                        document.getElementById("attachment" + j).focus();
                        break;
                    }   
                }
            }
           return check; 
} 

function togglePOAttachment(){
   if (document.forms["frm_payment"].opt_payment[0].checked){
        document.getElementById("attachment0").disabled = false;
        document.getElementById("link_clear").setAttribute("href","javascript:resetFileContent();")
        document.getElementById("link_clear").disabled = false;
        document.getElementById('moreUploadsLink').style.visibility = 'visible'; 
   }else if (document.forms["frm_payment"].opt_payment[1].checked) {
         for (var j = 1; j < upload_number; j++) {          
            reSetPOAttachments("f"+j);
         }
        upload_number = 1;
        resetFileContent();
        document.getElementById('moreUploadsLink').style.visibility = 'hidden'; 
        document.getElementById("attachment0").disabled = true;
        document.getElementById("link_clear").disabled = true;
        document.getElementById("link_clear").removeAttribute("href");
   }
}

function resetFileContent(){
    document.getElementById("static_attachment").innerHTML = '<input type="file" name="attachment0" id="attachment0" onchange="document.getElementById(\'moreUploadsLink\').style.display  = \'block\';" /><a  id="link_clear" href="javascript:resetFileContent();">Clear</a> ';   
}

 function reSetPOAttachments(i){
     var elm = document.getElementById(i);
     document.getElementById("moreUploads").removeChild(elm); 
 }   
</script>

When I click on clear link to clear the default text from the upload file input it replace the input with the customized input which displaying default.

This is the function you will find in the above script:

function resetFileContent(){
    document.getElementById("static_attachment").innerHTML = '<input type="file" name="attachment0" id="attachment0" onchange="document.getElementById(\'moreUploadsLink\').style.display  = \'block\';" /><a  id="link_clear" href="javascript:resetFileContent();">Clear</a> ';   
}

I want to customize the design for this upload file input. and for those who are repeating.

Can I modify the style of an input type file generating from JavaScript. Like the one below:-

<script language="JavaScript"> 
 var upload_number = 1; 
function addFileInput()
   {

      var d = document.createElement("div");
      var l = document.createElement("a");
      var file = document.createElement("input");
      file.setAttribute("type", "file");
      file.setAttribute("name", "attachment"+upload_number);
      file.setAttribute("id", "attachment"+upload_number);
      l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');");
      l.appendChild(document.createTextNode("Clear"));
      d.setAttribute("id", "f"+upload_number);  
       d.appendChild(file);
      d.appendChild(l);

      document.getElementById("moreUploads").appendChild(d);
      document.getElementById("attachments").value = upload_number;
      upload_number++;
   }
   function removeFileInput(i)
   {
     var elm = document.getElementById(i);
     document.getElementById("moreUploads").removeChild(elm);
   }   
</script>

Thanks,

braX
  • 11,506
  • 5
  • 20
  • 33
Vika Hatwal
  • 33
  • 1
  • 8

1 Answers1

0

Edit

Ok I think I understand now. Unfortunately you cannot modify the style of an input type file due to browser vendors thinking its some sort of security risk (you could be uploading a file without the people realizing it?)

Anyways take a look at this thread

How to customize <input type="file">?

Original Text

first make the add + new file button and the target destination for the input files:

<!-- runat="server" is only if you are using ASP.Net -->
<div id="addFileTarget"></div>
<input type="button" id="addFileButton" />
<input type="button" id="clearFilesButton" />
<input type="submit" id="uploadFilesButton" runat="server" />

then using jquery attach the click event to addFileButton

var i = 0;

$("#addFileButton").click(function () {
    // define id for upcoming element and increment for next time
    var id = 'file_' + (i++);

    //add new file input element as last child to our div
    $("#addFileTarget").append("<input type='file' id='" + id + "' runat='server' />");
});

$("#clearFilesButton").click(function () {
    // remove all child elements
    $("#addFileTarget").empty();

    // reset IDs
    i = 0;
});

Not sure what you are using for server side technology but if its

  • PHP: ($_FILES) (I think)

  • ASP.Net: Request.Files

both are arrays.

Community
  • 1
  • 1
Tom Fobear
  • 6,729
  • 7
  • 42
  • 74