Topic: uploaded file size in JS?

Hi,

    i am uploading multipul files from my form. how to validate type and size in javascript?

  my code for uploading files:

  <script type="text/javascript">
upload_number = 1;
function addFileInput()
{
    var d = document.createElement("div");
    var l = document.createElement("a");
    var file = document.createElement("input");
    d.setAttribute("id", "f"+upload_number);
    file.setAttribute("type", "file");
    file.setAttribute("name", "image[image_"+upload_number+"]");
    l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');");
    l.appendChild(document.createTextNode("Remove"));
    d.setAttribute("id", "f"+upload_number);
    d.appendChild(file);
    d.appendChild(l);
    document.getElementById("moreUploads").appendChild(d);
    upload_number++;
    document.getElementById("attachments").value = upload_number;
   
}
function removeFileInput(i)
{
    var elm = document.getElementById(i);
    document.getElementById("moreUploads").removeChild(elm);
    upload_number = upload_number - 1;
}
</script>


my field:

  div class="fieldset">
        <div class="fieldhead">Photos/Videos:</div>
        <div class="fieldinput"><input type="file" name="image[image]" id="attachments" onchange = "document.getElementById('moreUploadsLink').style.display = 'block';" /></div>
        <div id="moreUploads"></div>
        <div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();"><%= image_tag "add_icon.gif", :border => "0" %> <font size=3 color="green">Attach another file</font></a></div>
    </div>


my validations:

   function validateNewReviewForm(theForm)
{   
    var reason = "";
    var reason1 = "";
    var selected_review = document.getElementById('review_category').value;
    if (selected_review == 0)
    {
        alert("Please select Review Category.\n")
        return false;
    }
    else
    {
        var name = document.getElementById('name').value;
        var address = document.getElementById('address').value;
        var review_title = document.getElementById('review_title').value;
        var review_description = tinyMCE.get('review_description').getContent();
        var review_experience = tinyMCE.get('review_experience').getContent();
        var zip_code = document.getElementById('zip_code').value;
        var phone_no = document.getElementById('phone_no').value;
        var fax_no = document.getElementById('fax_no').value;
        var accommodation_type = document.getElementById('accommodation_type').value;
        var reservation_type = document.getElementById('reservation_type').value;
        reason += validateName(theForm.name);
        reason += validateAddress(theForm.address);
        reason += validateReviewTitle(theForm.review_title);
        reason += validateReviewDescription(review_description);
        reason1 += validateReviewExperience(review_experience);
        reason1 += validateZip(theForm.zip_code);
        reason1 += validateAccommodationType(theForm.accommodation_type);
        reason1 += validateReservationType(theForm.reservation_type);
        reason1 += validatePhone(theForm.phone_no);
        reason1 += validateFax(theForm.fax_no);
        if (document.getElementById('star1').checked == false && document.getElementById('star2').checked == false && document.getElementById('star3').checked == false && document.getElementById('star4').checked == false && document.getElementById('star5').checked == false)
        {
         reason2 = rating_msg;
        }
        else
        {
            reason2 = ""
         }
        if (reason1 != "" || reason != "" || reason2 != "")
        {
              alert("Some fields need correction:\n" + reason + "" + reason1 + "" + reason2 + "");
            return false;
        }
    }
    return true;
}

Re: uploaded file size in JS?

Yuu can't basically. You don't know the filesize until the file has been uploaded. Javascript has no access to the local filesystem without getting very broswer specific and writing a plugin. You may want to look at a Java or Flash upload option.

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: uploaded file size in JS?

how about this, is there a way to know the filesize before uploading in RoR?

Re: uploaded file size in JS?

You can do this. You need to have the rails application check the file size, and return a JSON object to the browser for parsing by JS.