Click here to Skip to main content
15,895,142 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I want to send a message to another member of a web application.

Message will contain text and as well as attachment of images or pdf.

I have used message sending $.ajax post of JQuery with XML WebService.

Everything is okay but I cannot sent Image object with this message.
Is there anyway to save image with the message in same function?


JavaScript
$("#btnSend").click(function (evt) {
    evt.preventDefault();
    evt.stopPropagation();

    if (validateMSG()) {
        //debugger;
        //console.log(document.getElementById('attachment').files[0].getAsBinary());
        //console.log(body);
        var mailMsg = { From: clientId, To: parseInt(msgTo), Subject: Subject, Body: body }

        $.ajax({
            url: "/StuffProfile.asmx/SendMessage",
            data: JSON.stringify({ mailMsg: mailMsg }),
            dataType: "json",
            type: "POST",
            async: true,
            cache: false,
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                res = $.parseJSON(result.d);
                $("#staff-id").val('');
                $("#txtSubject").val('');
                $(".editor").val('');
                $("#compose-close").click();
                jAlert(res.MSG, "Success");
                //var obj = { type: 2, LASTMAILID: res.MSGID };
                ajaxFileUpload();
                GetNewMailMesseges(2, res.MSGID - 1);
                GetMailCount(2);
            },
            error: function () { jAlert("Error Occured", "Error"); },
            complete: function () {
            }
        });
    }

});
function validateMSG()
{
    var msgTo = $("#staff-id").val();
    if (!msgTo) { jAlert("Select a Staff or Send to Please", "Error", function () { $("#txtTo").focus(); return false; }); }
    else return true;
    var Subject = $("#txtSubject").val();
    if (Subject == '') { jAlert("Add Subject Please", "Error", function () { $("#txtSubject").focus(); return false; }) }
    else return true;
    var body = $(".editor").val();
    if (!body) { jAlert("You cannot send empty message."); $(".editor").focus(); return false; }
    else return true;
}


I want to send Image or any file with it.

C#
/// <summary>
       /// Send Mail Message
       /// </summary>
       /// <param name="mailMsg">Wooskie.Business.Mail Object </param>
       /// <returns>Success Message</returns>
       [WebMethod]
       [ScriptMethod(ResponseFormat = ResponseFormat.Json, XmlSerializeString = true)]
       public string SendMessage( Mail mailMsg )
       {
           mailMsg.Read = false;
           mailMsg.Status = "sent";
           mailMsg.Date = DateTime.UtcNow;
           try
           {
               var db = new WooskieDBInstance().WooskieDB;
               db.Mails.InsertOnSubmit(mailMsg);
               db.SubmitChanges();
               var mailID = mailMsg.ID;
               return  new JavaScriptSerializer().Serialize(new { MSG = "Mail Send Successfully.",MSGID=mailID });
           }
           catch (Exception ex)
           {
               return ex.Message;
           }
       }


My HTML IS LIKE THIS
XML
<div id="compose" class="mail ui-widget">
        
        <img title="Close" alt="X" src="../Images/close-button.png" id="compose-close">
        <div class="compose ui-widget">
            <input type="text" role="textbox" class="txt-to margin-left" id="txtTo"
                required="required" placeholder="Send To" style="width: 100%" />
            <input type="hidden" id="staff-id" />
           

            <br />
            <input type="text" role="textbox" class="txt-subject margin-left" style="width: 100%" id="txtSubject" required="required" placeholder="Subject" />
            <br />
            <br />
            <asp:Label ID="Label3" runat="server" Text="Message" meta:resourcekey="Label3Resource1"></asp:Label>

            <textarea class="editor"></textarea>
            <script src="../ckeditor/ckeditor.js"></script>
            <script src="../ckeditor/adapters/jquery.js"></script>
            <script type="text/javascript">
                $('textarea.editor').ckeditor();
            </script>
            <br />
            <br />
            <fieldset>
                <legend>Upload</legend>
                <asp:FileUpload ID="fileToUpload" runat="server"   ClientIDMode="Static" meta:resourcekey="attachmentResource1"  Font-Size="9px" Width="100%" />

            </fieldset>
        </div>
    </div>


Please help me.
Posted
Updated 19-Dec-12 11:35am
v2
Comments
Christian Graus 19-Dec-12 17:20pm    
Is that REALLY your name ? Aren't you dead ?
Yaseer Arafat 19-Dec-12 17:24pm    
Yes.This is my real name.And you have found me alive and asking for help.

1 solution

You can't send an image. javascript does not have the ability to read the file system. You can only send an image to the server via a submitted form with a file input control on it. You also cannot resize an image with javascript. Nothing about your question makes sense to me. Why is the image resized ? The only way to 'send a message' is for your database to record it, and the other member to refresh their web page in order to see it.
 
Share this answer
 
Comments
Yaseer Arafat 19-Dec-12 17:22pm    
Other member dose not need to refresh page.Because I have use setInterval function for fetching messages.
Christian Graus 19-Dec-12 17:24pm    
Yes, you can make your page keep asking, without a refresh. But you can't push out to the page, was my point. Your question still makes no sense to me.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900