Attaching Files to SharePoint ListItem using JSOM - Undefined or moveTo fails

Question

See code example below, when I run this code as is, it fails on the 'moveTo' call with error {Object doesn't support property or method 'moveTo'}...

    function ensureAttachmentFolder(listTitle,itemId, success,error) {
          var ctx = SP.ClientContext.get_current();
          var web = ctx.get_web();
          var list = web.get_lists().getByTitle(listTitle);

          ctx.load(list,'RootFolder');
          var item = list.getItemById(itemId);
          ctx.load(item);

          ctx.executeQueryAsync(
            function() {
                var attachmentsFolder;
                if(!item.get_fieldValues()['Attachments']) {
                   var attachmentRootFolderUrl = String.format('{0}/Attachments',list.get_rootFolder().get_serverRelativeUrl()); 
                   var attachmentsRootFolder = ctx.get_web().getFolderByServerRelativeUrl(attachmentRootFolderUrl);
                   attachmentsFolder = attachmentsRootFolder.get_folders().add('_' + itemId);
                   attachmentsFolder.moveTo(attachmentRootFolderUrl + '/' + itemId);
    //^ISSUE HAPPENS ON LINE ABOVE^.................
                   ctx.load(attachmentsFolder);
                }
                else {
                   var attachmentFolderUrl = String.format('{0}/Attachments/{1}',list.get_rootFolder().get_serverRelativeUrl(),itemId); 
                   attachmentsFolder = ctx.get_web().getFolderByServerRelativeUrl(attachmentFolderUrl);
                   ctx.load(attachmentsFolder);
                }         
                ctx.executeQueryAsync(
                     function() {
                         success(attachmentsFolder); 
                     },
                     error);
            },
            error);
    }

IF I comment out the 'moveTo' line of code, the code runs and works (sort of)... It creates the folder and adds the attachment in it:

i.e. ...Requests\Attachments\_100\DummiDoc.pdf

BUT it is not recognized on the out of box forms, b/c it is expecting:

i.e. ...Requests\Attachments\100\DummiDoc.pdf 

I verified folder '_100' is created in attachments folder and attachment is there using SPDesigner. I can rename it manually to '100' using SPDesigner as well so I don't figure it is a permissions issue. I need to 'rename' the folder in JSOM (AKA make the moveTo line of code work) so that it shows up in the out of box forms as well...

IF, I Change the code to:

    attachmentsFolder = attachmentsRootFolder.get_folders().add(itemId);//.add('_' + itemId);
    //attachmentsFolder.moveTo(attachmentRootFolderUrl + '/' + itemId, SP.MoveOperations.overwrite);

Then it will works, BUT ONLY if the folder already exists (I used an out of the box form and uploaded an item manaully and re-ran the code and attachments then worked)...

IF, you remove the _ and try to straight create the folder as the item SP id i.e. '.add(itemId)' instead of '.add('_' + itemId)' it fails (returns undefined).

I can only assuming that this is b/c SharePoint is blocking folders being created that begin with numbers so as there out of the box stuff doesn't get broken.

I would to like to fix and make the 'moveTo()' line of code work, not understanding why its giving error saying:

    {Object doesn't support property or method 'moveTo'}...

I am using a button click event, then creating the item, then once item is created attaching the item. As previously mentioned, it works if I comment out the 'moveTo() line of code...

I got original attachment code from here

And have looked at this page a number of times as well, with similar code!

Any help would be appreciated. Just a little bit more facts, I am using a SharePoint Web Part Page, with a content editor in it, I am then pointing my content editor to an HTML file, this file has the references to the JQuery JS and JQuery UI CSS files and supporting stuff! As well as pointing to my own JS file where all this code is running from. I had to add the following references in the HTML file as well to make the people pickers work on my HTML form:

<!--Your Custom CSS reference-->
<link rel="stylesheet" type="text/css" href="/Apps/PIF/SiteAssets/CSS/CSS_File.css">
<link rel="stylesheet" type="text/css" href="/Apps/PIF/SiteAssets/CSS/jquery.ui.css">

<!--JQuery reference-->
<script type="text/javascript" src="/Apps/PIF/SiteAssets/JQuery/jquery.min.js"></script>
<script type="text/javascript" src="/Apps/PIF/SiteAssets/JQuery/jquery.ui.js"></script>

<!--SharePoint CSOM references-->
<script type="text/javascript" src="/_layouts/15/clienttemplates.js"></script>
<script type="text/javascript" src="/_layouts/15/clientforms.js"></script>
<script type="text/JavaScript" src="/_layouts/15/clientpeoplepicker.js"></script>
<script type="text/JavaScript" src="/_layouts/15/autofill.js"></script>

<!--Your Custom JS reference-->
<script type="text/javascript" src="/Apps/PIF/SiteAssets/JS/New-Requests.js"></script>
<script type="text/javascript" src="/Apps/PIF/SiteAssets/JS/bowser.min.js"></script>

Answer 1

I had the same issue. I looked into the JavaScript Libraries SP.debug.js, and it seems the moveTo method isn't available in SP2013. It is in Office 365.

I tried a bunch of ways to create / rename the folder for the attachments with no luck.

The best way I found to upload files (including large files) as attachments, is to use the Lists.asmx service. Fortunately SPServices has a nice wrapper around the Web Service that makes it simple.

I wrote a post on how I used it.