Upload image to sharepoint library using FileReader

I am pretty much tired to get solution for uploading image to picture library. But finally achieved it.

I hope it will be useful to someone.

Idea behind implementation

  1. Your browser should support FileReader API.
  2.  Read the contents are buffer by using “readAsArrayBuffer” function which is belongs to “FileReader”.
  3. On load of file (image), just pass the file input control result to your REST query.

Upload image with in sharepoint site (not in app)


function uploadFileUsingRest() {
var fileInput = document.getElementById('myFile');
var reader = new FileReader();
reader.onload = function (e) {
performUploadAction(fileInput.files[0].name, e.target.result);
}
reader.readAsArrayBuffer(fileInput.files[0]);
}
function PerformUploadAction(filename, fileData) {
$.ajax({
url: _spPageContextInfo.webAbsoluteUr + "/_api/web/getfolderbyserverrelativeurl('ImagesLibrary')/files/add(url='" + filename + "', overwrite=true)",
method: "POST",
binaryStringRequestBody: true,
data:fileData,
contentLength:fileData.length,
headers: {
"accept": "application/json; odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-type":"application/json; odata=verbose"
},
async:true,
processData:false,
success: function (data) {
console.log("Success! Your Picture was uploaded to SharePoint.");
},
error: function onQueryErrorAQ(xhr, ajaxOptions, thrownError) {
console.log('Error:\n' + xhr.status + '\n' + thrownError + '\n' + xhr.responseText);
}
});
}
  • Don’t forget to add processData:false in your ajax parameters.
  • This code will not work in sharepoint apps (sharepoint hosted app).

Upload image using sharepoint app


function uploadFileUsingRest() {
var reader = new FileReader();
reader.onload = function (result) {
var fileData = '';
var byteArray = new Uint8Array(result.target.result);
for (var i = 0; i < byteArray.byteLength; i++) {
fileData = fileData + String.fromCharCode(byteArray[i]);
}
PerformUploadAction(fileInput.files[0].name, fileData, uploadToFolder);
}
reader.readAsArrayBuffer(fileInput.files[0]);
}
function PerformUploadAction(filename, fileData, uploadToFolder) {
executor = new SP.RequestExecutor(appweburl);
var targetUrl = appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getByTitle('" + libraryToSearch + "')/RootFolder/folders(@TargetFolderName)/Files/add(url=@TargetFileName,overwrite='true')?@target='" + mysiteUrl + "'&@TargetFileName='" + filename + "'&@TargetFolderName='" + uploadToFolder + "'";
executor.executeAsync({
url: targetUrl,
headers: { Accept: "application/json;odata=verbose", "content-type": "application/json;odata=verbose" },
method: "POST",
contentType: "application/json;odata=verbose",
binaryStringRequestBody: true,
body: fileData,
async: false,
success: function(){
console.log('Success');
},
error: function(){
console.log('Error');
}
});
}

Happy coding… 🙂

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 )

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