Asp.net MVC Ajax File Upload in Sitecore Programmatically using API calls

here I’m going to explain about uploading the file directly into Sitecore media library programmatically. below is the list of steps will be following to Upload the file to Sitecore

  • Coding cshtml & Ajax API calls
  • Coding to Create the Month & Year Wise Folders to store the uploading images
  • code to publish the created folders.

Code cshtml & Ajax API calls

Create a cshtml and add the following list of Code

<input type=”file” id=”FileUpload1″ />
<input type=”button” id=”btnUpload” value=”Upload Files” />

and then create a separate javascript file and add the following ajax API call functionality, it will help to pass the attached file to the form and it can also send the other input data

$(document).ready(function () {
$(‘#btnUpload’).click(function () {

// Checking whether FormData is available in browser
if (window.FormData !== undefined) {

var fileUpload = $(“#FileUpload1”).get(0);
var files = fileUpload.files;

// Create FormData object
var fileData = new FormData();

// Looping over all files and add it to FormData object
for (var i = 0; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}

// Adding one more key to FormData object
fileData.append(‘username’, ‘Manas’);

$.ajax({
url: ‘/Home/UploadImage’,
type: “POST”,
contentType: false, // Not to set any content header
processData: false, // Not to process data
data: fileData,
success: function (result) {
alert(result);
},
error: function (err) {
alert(err.statusText);
}
});
} else {
alert(“FormData is not supported.”);
}
});
});

Create the Action Result and add the below code to Upload an Image,

1

Code to create Sitecore Folder programmatically

2.1

Code to attach the File to Sitecore Media Library

2

3

Code to Publish the newly Inserted media items 

4

Final View of the uploaded Images 

5

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

Powered by WordPress.com.

Up ↑