CODEWITHSUNDEEP
jqueryasp.netajax
EMre
EMre

Reputation: 53

JQuery ajax file upload to ASP.NET with input file

I am trying to implement file upload functionality with ASP.NET and jQuery. I use input file control and have 7 of them in my page. The page is an ASPX page with master page. Here is my code;

ASPX: 

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file1" CssClass="col-md-3 control-label">File 1</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file1"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi">
    </div>

</div> 

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file2" CssClass="col-md-3 control-label">File 2</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file2"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi">
    </div>

</div>

JavaScript:

$(document).ready(function () {
    $("#btnUpload").click(function (event) {
        var file1 = $("#<%=file1.ClientID %>").files[0];
        var file2 = $("#<%=file2.ClientID %>").files[0];

        var files = [file1, file2];

        if (files.length > 0) {
            var formData = new FormData();
            for (var i = 0; i < files.length; i++) {
                formData.append(files[i].name, files[i]);
            }

            var progressbarLabel = $('#progressBar-label');
            var progressbarDiv = $('#progressbar');

            $.ajax({
                url: '../Util/UploadHandler.ashx',
                method: 'post',
                data: formData,
                contentType: false,
                processData: false,
                success: function () {
                    progressbarLabel.text('Complete');
                    progressbarDiv.fadeOut(2000);
                },
                error: function (err) {
                    alert(err.statusText);
                }
            });

            progressbarLabel.text('Uploading...');
            progressbarDiv.progressbar({
                value: false
            }).fadeIn(500);
        }
    });
});

I got error when I press upload button stating that file1 is undefined.

I also tried 

var file1 = $("#file1").files[0];

and file1 is undefined again.

How can I get file1 in JavaScript code?

Upvotes: 2

Views: 886

Answers (3)

gre_gor
gre_gor

Reputation: 6773

You need to access files from the DOM object and not from the jQuery object.

var file1 = $("#<%=file1.ClientID %>").get(0).files[0];
var file2 = $("#<%=file2.ClientID %>").get(0).files[0];

You should probably also check, if files actually has files and is not empty.

Upvotes: 1

An0nC0d3r
An0nC0d3r

Reputation: 1303

Try adding multiple to your input elements...

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file1" CssClass="col-md-3 control-label">File 1</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file1"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi" multiple>
    </div>

</div> 

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file2" CssClass="col-md-3 control-label">File 2</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file2"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi" multiple>
    </div>

</div>

Upvotes: 0

BoundForGlory
BoundForGlory

Reputation: 4427

ASP.NET will append a bunch of characters to the end of your id if you have the runat=server attribute. Drop that if you are not accessing the the DOM element directly in your server side code (something you should never do anyway).

Upvotes: 0

Related Questions