image Archives - Bool Tech

I continue my series about Client Side Rendering (CSR) and jsgrid. Today I want to try a custom field where users can drag and drop images. The inspiration comes from:

AutoUpload field written by Anton Vishnyakov and
Base64 Drag and drop written by oroboto

What I want to achieve is:

A custom field that is rendered with jslink
Users can drag and drop small pictures (thumbnails) into the field
A base64 image representation is saved as the field value
Optionally implement pasting images using Clipboard API

Step 1 Create a field with a custom jslink

Create a field of type Note. I am using the PnP Core Extensions to make it quickier:

‘

My jslink file is very simple to begin with:

(function () {
    'use strict';
    function view(ctx, field) {
        return &amp;quot;hello&amp;quot;;
    }

    var overrideContext = {};

    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.Fields = {
        'DragAndDropImage': {
            'View': view,
            'DisplayForm': view
            //'EditForm': verySimpleNewAndEdit,
            //'NewForm': verySimpleNewAndEdit
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

(function () {

'use strict';

function view(ctx, field) {

return &quot;hello&quot;;

}

var overrideContext = {};

overrideContext.Templates = overrideContext.Templates || {};

overrideContext.Templates.Fields = {

'DragAndDropImage': {

'View': view,

'DisplayForm': view

//'EditForm': verySimpleNewAndEdit,

//'NewForm': verySimpleNewAndEdit

}

};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

})();

This will result in the following display form. Just outputting “hello” indicates that my field is jslink are registered correctly:

Step 2. Ensure base64 works in the field

Not all fields will work. I have tried many of them and found that the field type Note with Plain text works for saving base64 images.

First download some sample icons at flaticons.com

Convert an icon to a base64 image using dataurl.net:

Save the string into the Drag And Drop Image field:

Now update the view template in the CSR overrides:

//http://stackoverflow.com/a/822486/632117
//in display form we have to strip the html elements that are pasted in by SharePoint
function strip(html) {
    var tmp = document.createElement(&amp;quot;DIV&amp;quot;);
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || &amp;quot;&amp;quot;;
}
function renderImage(fieldValue) {
    if (fieldValue) {
        return ['&lt;img style=&amp;quot;max-width:100px;&amp;quot; src=&amp;quot;',
            strip(fieldValue), '&amp;quot;/&gt;'].join(&amp;quot;&amp;quot;);
    }
    return &amp;quot;&amp;quot;;
}

function view(ctx, field) {
    //disable editing in Quick Edit mode
    if (ctx.inGridMode) {
        field.AllowGridEditing = false;
    }
    var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return renderImage(fieldValue);
}

//http://stackoverflow.com/a/822486/632117

//in display form we have to strip the html elements that are pasted in by SharePoint

function strip(html) {

var tmp = document.createElement(&quot;DIV&quot;);

tmp.innerHTML = html;

return tmp.textContent || tmp.innerText || &quot;&quot;;

}

function renderImage(fieldValue) {

if (fieldValue) {

return ['<img style=&quot;max-width:100px;&quot; src=&quot;',

strip(fieldValue), '&quot;/>'].join(&quot;&quot;);

}

return &quot;&quot;;

}

function view(ctx, field) {

//disable editing in Quick Edit mode

if (ctx.inGridMode) {

field.AllowGridEditing = false;

}

var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

return renderImage(fieldValue);

}

Well, it works:

Step 3. Implement drag and drop

Let’s start with the edit template:

; title: ; notranslate ]
function renderDropZone(fieldValue) {
    var img = renderImage(fieldValue);
    return ['&lt;div id=&amp;quot;drop_zone&amp;quot;&gt;', img, '&lt;/div&gt;'].join('');
}

function edit(ctx, field) {
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {
        //will implement the logic later
        return &amp;quot;&amp;quot;;
    });
    var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return renderDropZone(fieldValue);
}

var overrideContext = {};
overrideContext.Templates = overrideContext.Templates || {};
overrideContext.Templates.Fields = {
    'DragAndDropImage': {
        'View': view,
        'DisplayForm': view,
        'EditForm': edit,
        'NewForm': edit
    }
};

; title: ; notranslate ]

function renderDropZone(fieldValue) {

var img = renderImage(fieldValue);

return ['<div id=&quot;drop_zone&quot;>', img, '</div>'].join('');

}

function edit(ctx, field) {

var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

formCtx.registerGetValueCallback(formCtx.fieldName, function () {

//will implement the logic later

return &quot;&quot;;

});

var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

return renderDropZone(fieldValue);

}

var overrideContext = {};

overrideContext.Templates = overrideContext.Templates || {};

overrideContext.Templates.Fields = {

'DragAndDropImage': {

'View': view,

'DisplayForm': view,

'EditForm': edit,

'NewForm': edit

}

};

I have wrapped the image element with a div (id=drop_zone). Now I need some css to show it:

var additionalStyle = [
    '&lt;style&gt;',
    '#drop_zone { height: 100px; width:100px; background: #efe}',
    '&lt;/style&gt;'
].join('');
document.write(additionalStyle);

var additionalStyle = [

'<style>',

'#drop_zone { height: 100px; width:100px; background: #efe}',

'</style>'

].join('');

document.write(additionalStyle);

Now there is a clear “drop zone”:

To make it as simple as possible, let’s follow oroboto’s drag and drop code. Here we go:

var processFiles = function (event) {
    var element = event.target;
    event.stopPropagation();
    event.preventDefault();
    removeDropZoneClass(event);

    // FileList object of File objects
    var files = event.dataTransfer.files;
    for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();

        // closure to capture file info
        reader.onload = (function (file, index) {
            return function (e) {
                var dataUri = e.target.result;
                var img = renderImage(dataUri);
                element.innerHTML = img;
            };
        })(f, i);

        // read file as data URI
        reader.readAsDataURL(f);
    }

};

var highlightDropZone = function (e) {
    e.stopPropagation();
    e.preventDefault();
    document.getElementById('drop_zone').classList.add('highlight');
}

var removeDropZoneClass = function (e) {
    document.getElementById('drop_zone').classList.remove('highlight');
}

function prepareDropZone(ctx) {
    if (ctx.inGridMode) {
        return;
    }
    // add event listeners if File API is supported
    var dropZone = document.getElementById('drop_zone');
    if (window.File &amp;amp;&amp;amp; window.FileReader &amp;amp;&amp;amp; window.FileList &amp;amp;&amp;amp; window.Blob) {
        dropZone.addEventListener('drop', processFiles, false);
        dropZone.addEventListener('dragover', highlightDropZone, false);
        dropZone.addEventListener('dragenter', highlightDropZone, false);
        dropZone.addEventListener('dragleave', removeDropZoneClass, false);
    } else {
        dropZone.innerHTML = 'The File APIs are not fully supported in this browser.';
        dropZone.className = 'highlight';
    }

};

// ... code omitted for brevity

overrideContext.Templates.OnPostRender = prepareDropZone;

var processFiles = function (event) {

var element = event.target;

event.stopPropagation();

event.preventDefault();

removeDropZoneClass(event);

// FileList object of File objects

var files = event.dataTransfer.files;

for (var i = 0, f; f = files[i]; i++) {

var reader = new FileReader();

// closure to capture file info

reader.onload = (function (file, index) {

return function (e) {

var dataUri = e.target.result;

var img = renderImage(dataUri);

element.innerHTML = img;

};

})(f, i);

// read file as data URI

reader.readAsDataURL(f);

}

};

var highlightDropZone = function (e) {

e.stopPropagation();

e.preventDefault();

document.getElementById('drop_zone').classList.add('highlight');

}

var removeDropZoneClass = function (e) {

document.getElementById('drop_zone').classList.remove('highlight');

}

function prepareDropZone(ctx) {

if (ctx.inGridMode) {

return;

}

// add event listeners if File API is supported

var dropZone = document.getElementById('drop_zone');

if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {

dropZone.addEventListener('drop', processFiles, false);

dropZone.addEventListener('dragover', highlightDropZone, false);

dropZone.addEventListener('dragenter', highlightDropZone, false);

dropZone.addEventListener('dragleave', removeDropZoneClass, false);

} else {

dropZone.innerHTML = 'The File APIs are not fully supported in this browser.';

dropZone.className = 'highlight';

}

};

// ... code omitted for brevity

overrideContext.Templates.OnPostRender = prepareDropZone;

That’s not bad, not bad:

The last thing in this step is to save the base64 value

formCtx.registerGetValueCallback(formCtx.fieldName, function () {
    var dropZone = document.getElementById(&amp;quot;drop_zone&amp;quot;);
    var img = dropZone.getElementsByTagName(&amp;quot;img&amp;quot;);
    return img.length ? img[0].src : &amp;quot;&amp;quot;;
});

formCtx.registerGetValueCallback(formCtx.fieldName, function () {

var dropZone = document.getElementById(&quot;drop_zone&quot;);

var img = dropZone.getElementsByTagName(&quot;img&quot;);

return img.length ? img[0].src : &quot;&quot;;

});

Step 4 Support pasting images

Drag And Drop is cool. But what about pasting images. Wouldn’t it be nice? The functionality is called Clipboard API. You can check which browsers support this on caniuse.com. The simplest example I’ve found is on stackoverflow: How does onpaste work

The code I use is as follows:

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(JSON.stringify(items)); // will give you the mime types
    var blob = items[0].getAsFile();
    var reader = new FileReader();
    reader.onload = function (e) {
        var dataUri = e.target.result;
        var img = renderImage(dataUri);
        dropZone.innerHTML = img;
    }; // data url!
    reader.readAsDataURL(blob);
}

document.onpaste = function (event) {

var items = (event.clipboardData || event.originalEvent.clipboardData).items;

console.log(JSON.stringify(items)); // will give you the mime types

var blob = items[0].getAsFile();

var reader = new FileReader();

reader.onload = function (e) {

var dataUri = e.target.result;

var img = renderImage(dataUri);

dropZone.innerHTML = img;

}; // data url!

reader.readAsDataURL(blob);

}

Here is how pasting works:

Step 5 Error handling (Not done yet)

I need to ensure that

only images are allowed
only small images are allowed, otherwise base64 will be to heavy
proper handling of old browsers, we don’t need to support them, but the users should get good information about what they need to make it work
a help icon is shown, when clicked a help callout is shown about how it works

Step 6 Support Quick Edit (Not done yet)

We need code that works in Quick Edit:

need to write code for jsgrid
need handling of multiple drop zones on the same page (unique ids and smart handling of pasting)

Summary

This post is about discovering what’s possible to do with client side rendering and using today’s technologies like html5 and new javascript apis. I hope you’ve got some inspiration how normal sharepoint fields combined with Client Side Rendering (CSR) api can create more value in your project, in Office 365 and in SharePoint On Premises. Please leave feedback in comments.

Fulll source code

And finally, here comes the most up-to-date full source code for this custom Drag And Drop Image field:

(function () {
    'use strict';
    var additionalStyle = [
        '&lt;style&gt;',
        '#drop_zone { height: 100px; width:100px; background: #efe}',
        '#drop_zone.highlight {background:#fee;}',
        '&lt;/style&gt;'
    ].join('');
    document.write(additionalStyle);


    var processFiles = function (event) {
        var element = event.target;
        event.stopPropagation();
        event.preventDefault();
        removeDropZoneClass(event);

        // FileList object of File objects
        var files = event.dataTransfer.files;
        for (var i = 0, f; f = files[i]; i++) {
            var reader = new FileReader();

            // closure to capture file info
            reader.onload = (function (file, index) {
                return function (e) {
                    var dataUri = e.target.result;
                    var img = renderImage(dataUri);
                    element.innerHTML = img;
                };
            })(f, i);

            // read file as data URI
            reader.readAsDataURL(f);
        }

    };

    var highlightDropZone = function (e) {
        e.stopPropagation();
        e.preventDefault();
        document.getElementById('drop_zone').classList.add('highlight');
    }

    var removeDropZoneClass = function (e) {
        document.getElementById('drop_zone').classList.remove('highlight');
    }

    function prepareDropZone(ctx) {
        if (ctx.inGridMode) {
            return;
        }
        // add event listeners if File API is supported
        var dropZone = document.getElementById('drop_zone');
        if (window.File &amp;amp;&amp;amp; window.FileReader &amp;amp;&amp;amp; window.FileList &amp;amp;&amp;amp; window.Blob) {
            dropZone.addEventListener('drop', processFiles, false);
            dropZone.addEventListener('dragover', highlightDropZone, false);
            dropZone.addEventListener('dragenter', highlightDropZone, false);
            dropZone.addEventListener('dragleave', removeDropZoneClass, false);
        } else {
            dropZone.innerHTML = 'The File APIs are not fully supported in this browser.';
            dropZone.className = 'highlight';
        }

        document.onpaste = function (event) {
            var items = (event.clipboardData 
                 || event.originalEvent.clipboardData).items;
            console.log(JSON.stringify(items)); // will give you the mime types
            var blob = items[0].getAsFile();
            var reader = new FileReader();
            reader.onload = function (e) {
                var dataUri = e.target.result;
                var img = renderImage(dataUri);
                dropZone.innerHTML = img;
            }; // data url!
            reader.readAsDataURL(blob);
        }
       
    };

    //http://stackoverflow.com/a/822486/632117
    //in display form we have 
    //to strip the html elements that are pasted in by SharePoint
    function strip(html) {
        var tmp = document.createElement(&amp;quot;DIV&amp;quot;);
        tmp.innerHTML = html;
        return tmp.textContent || tmp.innerText || &amp;quot;&amp;quot;;
    }
    function renderImage(fieldValue) {
        if (fieldValue) {
            return ['&lt;img style=&amp;quot;max-width:100px;&amp;quot; src=&amp;quot;',
                strip(fieldValue), '&amp;quot;/&gt;'].join('');
        }
        return &amp;quot;&amp;quot;;
    }
    
    function view(ctx, field) {
        //disable editing in Quick Edit mode
        if (ctx.inGridMode) {
            field.AllowGridEditing = false;
        }
        var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
        return renderImage(fieldValue);
    }
    
    function renderDropZone(fieldValue) {
        var img = renderImage(fieldValue);
        return ['Drop files here&lt;div id=&quot;drop_zone&quot;&gt;', img, '&lt;/div&gt;'].join('');
    }

    function edit(ctx, field) {
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        formCtx.registerGetValueCallback(formCtx.fieldName, function () {
            var dropZone = document.getElementById('drop_zone');
            var img = dropZone.getElementsByTagName('img');
            return img.length ? img[0].src : &amp;quot;&amp;quot;;
        });
        var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
        return renderDropZone(fieldValue);
    }

    var overrideContext = {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.Fields = {
        'DragAndDropImage': {
            'View': view,
            'DisplayForm': view,
            'EditForm': edit,
            'NewForm': edit
        }
    };

    overrideContext.Templates.OnPostRender = prepareDropZone;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

(function () {

'use strict';

var additionalStyle = [

'<style>',

'#drop_zone { height: 100px; width:100px; background: #efe}',

'#drop_zone.highlight {background:#fee;}',

'</style>'

].join('');

document.write(additionalStyle);

var processFiles = function (event) {

var element = event.target;

event.stopPropagation();

event.preventDefault();

removeDropZoneClass(event);

// FileList object of File objects

var files = event.dataTransfer.files;

for (var i = 0, f; f = files[i]; i++) {

var reader = new FileReader();

// closure to capture file info

reader.onload = (function (file, index) {

return function (e) {

var dataUri = e.target.result;

var img = renderImage(dataUri);

element.innerHTML = img;

};

})(f, i);

// read file as data URI

reader.readAsDataURL(f);

}

};

var highlightDropZone = function (e) {

e.stopPropagation();

e.preventDefault();

document.getElementById('drop_zone').classList.add('highlight');

}

var removeDropZoneClass = function (e) {

document.getElementById('drop_zone').classList.remove('highlight');

}

function prepareDropZone(ctx) {

if (ctx.inGridMode) {

return;

}

// add event listeners if File API is supported

var dropZone = document.getElementById('drop_zone');

if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {

dropZone.addEventListener('drop', processFiles, false);

dropZone.addEventListener('dragover', highlightDropZone, false);

dropZone.addEventListener('dragenter', highlightDropZone, false);

dropZone.addEventListener('dragleave', removeDropZoneClass, false);

} else {

dropZone.innerHTML = 'The File APIs are not fully supported in this browser.';

dropZone.className = 'highlight';

}

document.onpaste = function (event) {

var items = (event.clipboardData

|| event.originalEvent.clipboardData).items;

console.log(JSON.stringify(items)); // will give you the mime types

var blob = items[0].getAsFile();

var reader = new FileReader();

reader.onload = function (e) {

var dataUri = e.target.result;

var img = renderImage(dataUri);

dropZone.innerHTML = img;

}; // data url!

reader.readAsDataURL(blob);

}

};

//http://stackoverflow.com/a/822486/632117

//in display form we have

//to strip the html elements that are pasted in by SharePoint

function strip(html) {

var tmp = document.createElement(&quot;DIV&quot;);

tmp.innerHTML = html;

return tmp.textContent || tmp.innerText || &quot;&quot;;

}

function renderImage(fieldValue) {

if (fieldValue) {

return ['<img style=&quot;max-width:100px;&quot; src=&quot;',

strip(fieldValue), '&quot;/>'].join('');

}

return &quot;&quot;;

}

function view(ctx, field) {

//disable editing in Quick Edit mode

if (ctx.inGridMode) {

field.AllowGridEditing = false;

}

var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

return renderImage(fieldValue);

}

function renderDropZone(fieldValue) {

var img = renderImage(fieldValue);

return ['Drop files here<div id="drop_zone">', img, '</div>'].join('');

}

function edit(ctx, field) {

var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

formCtx.registerGetValueCallback(formCtx.fieldName, function () {

var dropZone = document.getElementById('drop_zone');

var img = dropZone.getElementsByTagName('img');

return img.length ? img[0].src : &quot;&quot;;

});

var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

return renderDropZone(fieldValue);

}

var overrideContext = {};

overrideContext.Templates = overrideContext.Templates || {};

overrideContext.Templates.Fields = {

'DragAndDropImage': {

'View': view,

'DisplayForm': view,

'EditForm': edit,

'NewForm': edit

}

};

overrideContext.Templates.OnPostRender = prepareDropZone;

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

})();

Kategoriarkiv: image

Drag and Drop Image using Client Side Rendering

Step 1 Create a field with a custom jslink

Step 2. Ensure base64 works in the field

Step 3. Implement drag and drop

Step 4 Support pasting images

Step 5 Error handling (Not done yet)

Step 6 Support Quick Edit (Not done yet)

Summary

Fulll source code