I am creating a drag file upload by using Ajax File Upload Control in Asp.net(VB). I want to show file name, uploaded datetime, file size when I dragged into panel. How can I do for that setting? I could change the text for droparea like

$(document).ready(function () {

            
            Sys.Extended.UI.Resources.AjaxFileUpload_Pending = "保留中";
            Sys.Extended.UI.Resources.AjaxFileUpload_Remove = "削除";
            Sys.Extended.UI.Resources.AjaxFileUpload_Uploaded = "アップロード済";
            Sys.Extended.UI.Resources.AjaxFileUpload_Uploading = "アップロード中";
            Sys.Extended.UI.Resources.AjaxFileUpload_UploadedPercentage = "アップロード中 {0} %";
            Sys.Extended.UI.Resources.AjaxFileUpload_Upload = "アップロード";

            document.getElementsByClassName
            $(".ajax__fileupload_dropzone").text("ここにファイルをドロップ");

            document.getElementsByClassName
            $(".ajax__fileupload_uploadbutton").text("アップロード");
            
        });

But I don't know how to change file info display.

This is my drag form and I want to change from application/pdf to uploaded datetime

CodePudding user response：

You can't really display the "time" of up-load until the user starts.

You ALREADY can see the file size in your screen cap, so why the need for that?

you have:

so in above, you see the file name, you see the file size.

However, until such time you hit up-load and start up-loading files, you don't know yet the up-load time as of yet, do you?

So, when you hit up-load files, then each file selected will be up-loaded, and in the server side (code behind), you have this:

Protected Sub AjaxFileUpload1_UploadComplete(sender As Object, e As AjaxControlToolkit.AjaxFileUploadEventArgs) Handles AjaxFileUpload1.UploadComplete

    Dim strFileSave As String
    strFileSave = Server.MapPath("~/Content/" & e.FileName)
    AjaxFileUpload1.SaveAs(strFileSave)

    ' now code to add say to a database table of files up-loaded.

    Using conn As New SqlConnection(My.Settings.TEST4)
        Dim strSQL = "INSERT INTO MyUpoadFiles (FileName, UpLoadTime, Size, User_id) " &
                     "VALUES (@File, @Time,@Size, @User)"

        Using cmdSQL As New SqlCommand(strSQL, conn)
            conn.Open()
            With cmdSQL.Parameters
                .Add("@File", SqlDbType.NVarChar).Value = e.FileName
                .Add("@Time", SqlDbType.DateTime).Value = Date.Now
                .Add("@Size", SqlDbType.Int).Value = e.FileSize
                .Add("@User", SqlDbType.Int).Value = Membership.GetUser.ProviderUserKey
            End With
            cmdSQL.ExecuteNonQuery()
        End Using
    End Using


End Sub

Now, when ALL files are up-loaded, then the server side even UpLoadComplete all will fire, and THEN you can take the above list/table and display the files up-loaded along with the FileName, size, and time.

But, you really don't have the ability to display the file information such as what time until such time you uploaded the file and then have the time, right?

Edit:

Perhaps the idea above was not all that clear. What I am suggesting is that you have the up-loader on the page.

So, say we drop in this markup:

        <div style="width:40%;padding:25px">
        <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" 
            OnClientUploadCompleteAll="MyCompleteAll"  ChunkSize="16384" />

            <asp:Button ID="cmdDone" runat="server" Text="Done" CssClass="btn" ClientIDMode="Static"/>
            <script>
                function MyCompleteAll() {
                    $('#cmdDone').click()
                  }
            </script>
            <asp:GridView ID="Gfiles" runat="server" CssClass="table"></asp:GridView>
        </div>

And note how we use the client side all done click.

So, we now have this:

We hit upload, and now we see this:

Now we should (need to) hide the Done button - we have the upload clicking on that done button for us.

So that button in theory should become this to hide it:

 <asp:Button ID="cmdDone" runat="server" Text="Done"
   style="display:none" ClientIDMode="Static"/>

And the code for that button is this:

Protected Sub cmdDone_Click(sender As Object, e As EventArgs) Handles cmdDone.Click

    Dim rstFiles As New DataTable
    Using conn As New SqlConnection(My.Settings.TEST4)
        Dim strSQL As String = "select FileName, UpLoadTime, Size, User_id from MyUpLoadFiles"
        Using cmdSQL As New SqlCommand(strSQL, conn)
            conn.Open()
            rstFiles.Load(cmdSQL.ExecuteReader)
        End Using
    End Using

    Gfiles.DataSource = rstFiles
    Gfiles.DataBind()

    ' hide up-loader
    AjaxFileUpload1.Visible = False
End Sub