Description

When uploading a media file a non-descriptive error similar to the following might be shown:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

 

The error is displayed if the size of the media file exceeds the configured file size limit, set by the Media.MaxSizeInDatabase setting.

The expected message format is:

The file {filename} is too big to be uploaded.
The maximum size of a file that can be uploaded is 5 MB.

 

Solution

To resolve the issue, consider the following steps:

1. Back up the Uploader.js file located under the <website_root>\sitecore\shell\client\Business Component Library\Layouts\Renderings\Forms\Uploader folder.
2. Find the upload method in the original file. Make sure it is identical to the following:

   upload: function () {
     var that = this;      
     this.startUploadTimer(this.datas);      
     this.updateUploadInfo(true, true);
   
         //for each files - do the upload
         _.each(this.datas, function (data) {
           data.submit().error(function (jqXHR, textStatus, errorThrown) {
             if (jqXHR.status === 401) {
               _sc.Helpers.session.unauthorized();
               return;
             }
             // Triggers error on each model that had an abort
             if (errorThrown === "abort") {
               that.app.trigger("upload-error", { id: data.__id });
             } else {
               var errors = [{ Message: errorThrown }];
               that.app.trigger("sc-error", errors);
               that.app.trigger("upload-error", { id: data.__id, errors: errors });
             } 
           });
         });
       },

3. Change the implementation of the upload method as follows:
   

   upload: function () {
     var that = this;      
     this.startUploadTimer(this.datas);      
     this.updateUploadInfo(true, true);
   
         //for each files - do the upload
         _.each(this.datas, function (data) {
           data.submit().error(function (jqXHR, textStatus, errorThrown) {
             if (jqXHR.status === 401) {
               _sc.Helpers.session.unauthorized();
               return;
             }
             // Triggers error on each model that had an abort
             if (jqXHR.responseText.indexOf('errorItems') != -1) {
               var errordata = jqXHR.responseText.split('');
               var parsedJson = JSON.parse(errordata[1]);
               _.each(parsedJson.errorItems[1].Message, function (error) {
                 error.id = data.__id;
               });
               var errors = [{ Message: parsedJson.errorItems[1].Message }];
               that.app.trigger("sc-error", errors);
               that.app.trigger("upload-error", { id: data.__id, errors: parsedJson.errorItems[1].Message });
   
               return undefined;
             }
             else{
               if (errorThrown === "abort") {
                 that.app.trigger("upload-error", { id: data.__id });
               } else {
                 var errors = [{ Message: errorThrown }];
                 that.app.trigger("sc-error", errors);
                 that.app.trigger("upload-error", { id: data.__id, errors: errors });
               }
             } 
           });
         });
     },

4. Clear the browser cache to ensure the updated Uploader.js file is loaded by the browser.