Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Dynamics 365 Community / Forums / Microsoft Dynamics CRM (Archived) / How to upload multiple...
Microsoft Dynamics CRM (Archived)

How to upload multiple notes using html button javascript/jquery ?

(0) ShareShare
ReportReport
Posted on by Community Member Microsoft Employee

Below is clearly html and php,but I want to make custom ribbon workbench html button that can upload multiple notes for one entity.How do i start?do I need to use xrm,jquery or anything?

<html><head>
<meta charset="UTF-8">
<title>Document</title>
<meta><meta></head>
<body style="word-wrap: break-word;">
<form action="upload.php" method="post" multipart="" enctype="multipart/form-data">
<input type="file" name="img[]" multiple="">
<input type="submit">
</form>

</body></html>

*This post is locked for comments

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: How to upload multiple notes using html button javascript/jquery ?

    Change [tag:document] for [tag:document]s, Then you have to loop all the documents and gather the files in an array.

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: How to upload multiple notes using html button javascript/jquery ?

    Below is the HTML file that i am using to upload the multiple files:

    <input id="browse" type="file" onchange="previewFiles()" multiple>
    <div id="preview"></div>

    <script>
    function previewFiles() {

    var preview = document.querySelector('#preview');
    var files = document.querySelector('input[type=file]').files;

    function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
    var reader = new FileReader();

    reader.addEventListener("load", function () {
    var image = new Image();
    image.height = 100;
    image.title = file.name;
    image.src = this.result;
    preview.appendChild( image );
    }, false);
    reader.readAsDataURL(file);
    }
    }

    if (files) {
    [].forEach.call(files, readAndPreview);
    }
    }

    </script>

    I would like to create annotation record as i am trying to achieve this functionality from resco. Can somebody please enlighten on this?

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: How to upload multiple notes using html button javascript/jquery ?

    Is it something like this?

    <html>

    <head>

    <title>Notes</title>

    <p>Add Notes</p>

    <input type="text" id="titleid" placeholder="Title:" style="margin-left:10px; margin-bottom:10px; width:60%"/>

    <div >

    <textarea name="textarea" placeholder="Description" style="margin-left:10px; margin-bottom:10px; width:60%" cols="40" rows="5" id="descriptid"></textarea>

    <div class="header">

          <div class="contactheader">

      <div align="left" style="margin-left:0px;margin-bottom:0px;margin-top:15px ">  <label style=" font-size:14px;">Select Files to Upload</label></div>

        <input type="file" id="file" name="files[]" multiple="true" value="" style="float:left;margin-left:0px;margin-top:0px; width: 380px" />            

    <button class="button" onclick="save()">Save</button>

    </script>

     <script type="text/javascript" language="javascript" >

    var id = opener.parent.Xrm.Page.data.entity.getId();

    var nam = opener.parent.Xrm.Page.data.entity.getEntityName();

    function _arrayBufferToBase64(buffer) {

    var binary = '';

    var bytes = new Uint8Array(buffer);

    var len = bytes.byteLength;

    for (var i = 0; i < len; i++) {

    binary += String.fromCharCode(bytes[i]);

    }

    return window.btoa(binary);

    }

    function createNote(title, description, docBody, fName, mType) {

    var entity = {};

    if (docBody != null & fName != null & mType != null) {

    entity.DocumentBody = docBody;

    entity.FileName = fName;

    entity.MimeType = mType;

    }

    entity.Subject = title;

    entity.NoteText = description;

    entity.ObjectId = {

    Id: id,

    LogicalName: nam

    };

    SDK.REST.createRecord(

    entity,

    "Annotation",

    function (result) {

    var newEntityId = result.AnnotationId;

    opener.RetrieveAnnotations(null);

    window.close();

    },

    function (error) {

    Xrm.Utility.alertDialog(error.message, null);

    }

    );

    }

    function save() {

    var file = document.getElementById("file").files[0];

    var subject = document.getElementById("titleid").value;

    var desc = document.getElementById("descriptid").value;

    if (file) {

    var reader = new FileReader();

    reader.onload = function (evt) {

    var str = _arrayBufferToBase64(reader.result);

    createNote(subject, desc, str, file.name, file.type);

    }

    reader.readAsArrayBuffer(file);

    }

    else {

    createNote(subject, desc, null, null, null);

    }

    }

    </script>

    </body>

    </html>

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: How to upload multiple notes using html button javascript/jquery ?

    Can you enlighten me please how to use the coding?I need to put HTML and the complete code in the same web resource text editor?

  • Suggested answer
    Adrian Begovich Profile Picture
    Adrian Begovich 21,009 Super User 2024 Season 2 on at
    RE: How to upload multiple notes using html button javascript/jquery ?

    Hi Belcaliz Almanzar,

    You might find this article on uploading notes (annotations) using JavaScript and REST useful.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Suggested Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,280 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,214 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans