در یکی از پروژههای SharePoint OnPremises، ما این نیاز را داشتیم که تصویر نمایه کاربر را در کتابخانه SharePoint Image (PublishingImages) آپلود کنیم. بنابراین، ما این ویژگی را با استفاده از جاوا اسکریپت پیاده سازی کردیم و تصویر را در کتابخانه تصویر شیرپوینت با استفاده از REST API آپلود کردیم.
این یک جزء عمومی می شود و هر کسی می تواند از آن در هر پروژه شیرپوینت استفاده کند. ما از این کنترل در دو بخش وب ویژوال خود استفاده کرده ایم.
در این مقاله، گام به گام جزئیات نحوه پیادهسازی و نحوه عملکرد این مؤلفه را به اشتراک میگذارم.
Environment
SharePoint on premises 2013، شیرپوینت را به صورت آنلاین آزمایش نکرد، اما معتقدم که باید برای شیرپوینت آنلاین نیز کار کند.
جزئیات
ما کنترل OOB FileUpload را در دات نت در دسترس داریم، اما این کنترل باعث پسگردانی صفحه میشود، بنابراین تصمیم گرفتیم که کنترل سمت کلاینت را اجرا کنیم.
مرحله 1
از عنصر <input> با نوع "file" استفاده کنید. این به کاربر امکان می دهد یک یا چند فایل را انتخاب کند. ورودی فایل دکمه "انتخاب فایل" را نمایش می دهد. با کلیک بر روی این دکمه، گفتگوی انتخابگر فایل با برچسبی باز می شود که نام فایل را نشان می دهد.
- <input type="file" draggable="true" id="fileupload" class="form-control" />
شکل 1: عنصر ورودی فایل
با کلیک بر روی دکمه "انتخاب فایل"، کادر محاوره ای "فایل باز" باز می شود و می توانیم یک یا چند فایل را از آن انتخاب کنیم. در اینجا، در این مورد، ما فقط به یک فایل نیاز داریم و بنابراین هر بار فقط یک فایل انتخاب می شود.
شکل 2: کادر محاوره ای باز کردن فایل، با کلیک روی دکمه "انتخاب فایل" باز می شود
مرحله 2
ما یک دکمه دیگر "آپلود نمایه" را اضافه کرده ایم. با کلیک روی این دکمه، تصویر را در کتابخانه SharePoint Images آپلود می کنیم.
شکل 3: دکمه "آپلود پروفایل" با کنترل ورودی فایل
مرحله 3
با کلیک بر روی دکمه "آپلود نمایه"، فایل انتخابی را با استفاده از API های REST آپلود می کنیم. ما روش جاوا اسکریپت را "UploadFile" می نامیم.
- <input type="button" value="Upload Profile" id="btnUploadProfile" onclick="UploadFile()" />
در اینجا نیز، کادر محاوره ای انتظار OOB را نشان می دهد تا زمانی که تصویر در شیرپوینت آپلود شود.
در زیر مراحل دقیق آپلود فایل با استفاده از rest API از جاوا اسکریپت آمده است
- عنصر فایل را دریافت کنید.
- var fileElement = <%=fileupload.ClientID%>;
- بررسی کنید که آیا فایل انتخاب شده است یا نه، اگر نه، پیام هشدار نشان داده می شود.
- if (fileElement.files.length === 0) {
- alert('No file was selected');
- return;
- }//if (fileElement.files.length === 0)
- از آنجایی که ما از REST API استفاده میکنیم، تماس مجدد اتفاق میافتد، کادر محاورهای انتظار OOB شیرپوینت را تا زمانی که فایل در کتابخانه SharePoint Images آپلود شود را نشان میدهیم.
- var waitDialog_FileUpload = SP.UI.ModalDialog.showWaitScreenWithNoClose("Profile Image upload in progress", '', 80, 560);
- نام فایل را دریافت کنید.
- var parts = fileElement.value.split("\\");
- var filename = parts[parts.length - 1];
- فایل را بخوانید و پس از اتمام، با REST API تماس بگیرید. ما از شی FileReader استفاده می کنیم که به ما امکان می دهد محتوای فایل را به صورت ناهمزمان بخوانیم. یک ویژگی FileReader.readyState وجود دارد که مقادیر احتمالی حالت را دارد:
خالی 0 هنوز هیچ داده ای بارگیری نشده است بارگذاری 1 داده ها در حال بارگیری هستند انجام شده 2 درخواست خواندن انجام شد - var fileReader = new FileReader();
- //File loaded
- fileReader.onloadend = function (event) {
- if (event.target.readyState == FileReader.DONE) {
- var filecontent = event.target.result;
- //Code to upload image in Images Library
- }
- تصویر را با استفاده از REST API در کتابخانه تصاویر آپلود کنید.
- //SharePoint images library path
- var imagelibraryURL = _spPageContextInfo.siteServerRelativeUrl +
- "PublishingImages";
- //Complete REST API
- var completeImageLibraryUrl = _spPageContextInfo.webAbsoluteUrl
- + "/_api/web/GetFolderByServerRelativeUrl('" + imagelibraryURL +
- "')/Files/add(url='" + filename + "',overwrite=true)";
- $.ajax({
- url: completeImageLibraryUrl,
- type: "POST",
- data: filecontent,
- async: false,
- processData: false,
- headers: {
- "accept": "application/json;odata=verbose",
- "X-RequestDigest": $("#__REQUESTDIGEST").val(),
- },
- complete: function (data) {
- var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
- var web = clientContext.get_web();
- var fileurl = imagelibraryURL + "/"+filename;
- var imagetopublish = web.getFileByServerRelativeUrl(fileurl);
- imagetopublish.checkIn();
- imagetopublish.publish();
- clientContext.executeQueryAsync();
- //close the wait dialog
- if (waitDialog_FileUpload != null) {
- waitDialog_FileUpload.close();
- }
- alert("Your profile image uploaded successfully");
- }, //complete
- error: function (err) {
- if (waitDialog_FileUpload != null) {
- waitDialog_FileUpload.close();
- }
- alert(err + err.message + err.stacktrace);
- }//error
- });//$.ajax
- fileReader.readAsArrayBuffer(fileElement.files[0]);
کد
HTML را کامل کنید
- <input type="file" draggable="true" id="fileupload" class="form-control" />
- <input type="button" value="Upload Profile" id="btnUploadProfile" onclick="UploadFile()" />
JS
- function UploadFile() {
- var fileElement = <%=fileupload.ClientID%>;
- if (fileElement.files.length === 0) {
- alert('No file was selected');
- return;
- }//if (fileElement.files.length === 0)
- else {
- var waitDialog_FileUpload = SP.UI.ModalDialog.showWaitScreenWithNoClose("Profile Image upload in progress", '', 80, 560);
- var parts = fileElement.value.split("\\");
- var filename = parts[parts.length - 1];
- var fileReader = new FileReader();
- //File loaded
- fileReader.onloadend = function (event) {
- if (event.target.readyState == FileReader.DONE) {
- var filecontent = event.target.result;
- //Code to upload image in Images Library
- var imagelibraryURL = _spPageContextInfo.siteServerRelativeUrl +
- "PublishingImages";
- //Complete REST API
- var completeImageLibraryUrl = _spPageContextInfo.webAbsoluteUrl
- + "/_api/web/GetFolderByServerRelativeUrl('" + imagelibraryURL +
- "')/Files/add(url='" + filename + "',overwrite=true)";
- $.ajax({
- url: completeImageLibraryUrl,
- type: "POST",
- data: filecontent,
- async: false,
- processData: false,
- headers: {
- "accept": "application/json;odata=verbose",
- "X-RequestDigest": $("#__REQUESTDIGEST").val(),
- },
- complete: function (data) {
- var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
- var web = clientContext.get_web();
- var fileurl = imagelibraryURL + "/"+filename;
- var imagetopublish = web.getFileByServerRelativeUrl(fileurl);
- imagetopublish.checkIn();
- imagetopublish.publish();
- clientContext.executeQueryAsync();
- //close the wait dialog
- if (waitDialog_FileUpload != null) {
- waitDialog_FileUpload.close();
- }
- alert("Your profile image uploaded successfully");
- }, //complete
- error: function (err) {
- if (waitDialog_FileUpload != null) {
- waitDialog_FileUpload.close();
- }
- alert(err + err.message + err.stacktrace);
- }//error
- });//$.ajax
- }// if (event.target.readyState == FileReader.DONE)
- fileReader.readAsArrayBuffer(fileElement.files[0]);
- }//else
- }//UploadFile
منابع