Home > Sharepoint > Utilizing standard Sharepoint dialog and application pages, case: add capability to upload picture from computer in List form

Utilizing standard Sharepoint dialog and application pages, case: add capability to upload picture from computer in List form

Standard Sharepoint dialog and application pages can be useful for making Sharepoint customization easier.

Here, I want to customize add and edit List forms to add capability to upload picture from computer to picture library and put the uploaded picture in picture field in the add or edit List form.

There are two standard Sharepoint application pages for uploading picture that I can use, i.e., Upload.aspx and RteUploadDialog.aspx, different is RteUploadDialog.aspx have upload destination option.

Lets get started:

1). I’ve List with picture field called ‘Foto’. The add and edit forms were built using Infopath. To add upload picture from computer capability, I add button called ‘Upload Foto’ to load Sharepoint upload file dialog. I also add two ‘Foto’ field controls with different type, i.e., picture and text type.

image

2). Then write javascript to load Sharepoint upload dialog and put the uploaded picture  in picture field. As usual, put the javascript code in content editor webpart or script editor webpart (in Sharepoint 2013). Cause I want to put the picture in the specified picture library, i use Upload.aspx. Here’s the code (don’t forget to put JQuery reference) :


$(‘document’).ready(function () {
$(‘input[value=”Upload Foto”]’).on(‘click’, function () {
var  picturesLibraryGuid =  ‘{2F2F4107-D023-419F-8290-ECF7F1374A2F}’;
var  options =
{
url: L_Menu_BaseUrl + “/_layouts/RteUploadDialog.aspx?LCID=1033&Dialog=UploadImage&UseDivDialog=true”,
title: “Upload a picture”,
dialogReturnValueCallback: function (result, value) {
if (result == SP.UI.DialogResult.OK) {
var srcval= window.location.protocol + “//” + window.location.host+$(value).attr(‘src’);
$(‘input[originalid=”V1_I1_T3″]’).val(srcval);
$(‘input[originalid=”V1_I1_T3″]’).trigger( “blur” ); // to trigger refresh as happened in manual action
}
}
};
SP.UI.ModalDialog.showModalDialog (options);
});
});

If you want to use RteUploadDialog.aspx instead, just change the options like this :

        var  options =
{
url: L_Menu_BaseUrl + “/_layouts/RteUploadDialog.aspx?LCID=1033&Dialog=UploadImage&UseDivDialog=true”,
title: “Upload a picture”,
dialogReturnValueCallback: function (result, value) {
if (result == SP.UI.DialogResult.OK) {
var srcval= window.location.protocol + “//” + window.location.host+$(value).attr(‘src’);
$(‘input[originalid=”V1_I1_T3″]’).val(srcval);
$(‘input[originalid=”V1_I1_T3″]’).trigger( “blur” ); // to trigger refresh as happened in manual action
}
}
};

3). And here the result:

image

image

 

References: http://omlin.blogspot.co.id/2011/07/spuimodaldialog-sharepoint.html and http://jeffywang.blogspot.co.id/2013/10/upload-images-to-sharepoint-library.html

Categories: Sharepoint Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: