locked
File Upload Control on CRM 2011 Form RRS feed

  • Question

  • Hi

    I added a file upload control inside an Iframe on form. I called a web-resource to do this.

    HTML webresource has following source :

    <html><head><meta><meta><meta><meta></head><body>
    <table style="width:100%; background-color:white">
    <colgroup><col width="79%"><col width="1%"><col width="20%">
    </colgroup><tbody><tr>
    <td>
    <input type="file" onchange="setFormDirty();" id="userFileId" name="userFile" >
    </td>
    </tr>
    </tbody></table>
    </body></html>
    

    Now, when I select a file and click save button on form, I want to create a webresource. I will be uploading only Image files, so please let me know how I can do it.

    Primarily, I am stuck at, how to read the file path, file and other file specifications which I can use in either jscript or a plugin to upload it as a webresource.

    • Changed type CRMDevlpr Friday, August 23, 2013 1:58 PM
    Friday, August 23, 2013 12:21 PM

All replies

  • Hi,

    Your main issue here is that your HTML web resource has no server side code so you will have to do the file upload through JavaScript. See http://www.nczonline.net/blog/2012/05/08/working-with-files-in-javascript-part-1/ for an excellent explanation of file upload controls with JavaScript.


    Michael Palmer
    xRMPalmer     @MJFPalmer     Rockstar365

    Saturday, August 24, 2013 8:05 PM
  • Hi,

    I have used file upload control in HTML web-resource.

    Please find the code below.

    We have developed an add-on by which you can upload image files into forms in CRM. 

    This add-on uses the HTML 5 file upload control.

    <input id="iptFile" onchange="addPicture(this.files)" type="file" accept="image/gif,image/jpeg,image/png"
                                style="visibility: hidden" />
    function addPicture(files) {
            var reader;
            try {
                reader = new FileReader();
            } catch (err) {
                alert(HTML5AlertMsg);
                return;
            }
    
            reader.onload = function (e) {
                // e.target.result holds the DataURL which
                // can be used as a source of the image:
                if (e.target.result.length > max_file_size) {
                    alert(FileSizeBigMsg);
                    return;
                }            
            };
    
            // Reading the file as a DataURL. When finished,
            // this will trigger the onload function above:
            reader.readAsDataURL(files[0]);
        }

    Let me know if this solves your problem.
    Thursday, September 19, 2013 12:33 PM