AnsweredAssumed Answered

Upload multiple files to Alfresco using ajax from client browser?

Question asked by johnswan on Oct 1, 2014
I am developing a .NET MVC 5 Application which is utilizing Alfresco for ECM.  I have a requirement that a User should be able to upload multiple files at once. 

I am attempting to upload multiple files to my Alfresco ECM from client using CMIS API (I am using CMIS 1.1 Browser Bindings). As there is no cmis action for createDocuments I am wondering how can I iterate over each document I want to upload in order to upload them from client browser - I don't want to hit a server side method for this.

I am going to use Kendo UI Upload for the UI portion - like http://demos.telerik.com/kendo-ui/upload/templates

Uploading a single document works fine from client browser - the code for uploading a sinlge document is shown below - cshtml:

@model MyProj.Models.DocUploadViewModel

<form enctype="multipart/form-data">
     <h4> Upload Single File </h4>
        <div>File Name</div>
        <div class="form-group">
            @Html.EditorFor(model => model.Name)
        </div>

        <div class="form-group">
            <input type="file" name="target" id="target" />
        </div>
        <input type="submit" value="Upload File" class="btn btn-default" />

    @Html.EditorFor(model => model.cmisaction)
    @for (int i = 0; i < Model.propertyId.Count(); ++i)
    {
        @Html.HiddenFor(model => model.propertyId)
        @Html.HiddenFor(model => model.propertyValue)
    }

</form>
My DocUpload view model is as - so cmis action is set to cretae document:

    public string Name { get; set; }

    [HiddenInput(DisplayValue = false)]
    public string cmisaction
    {
        get { return "createDocument"; }
    }

    [HiddenInput(DisplayValue = false)]
    public string[] propertyId
    {
        get
        {
            return new []
            {
                "cmis:name",
                "cmis:objectTypeId"
            };
        }
    }

    [HiddenInput(DisplayValue = false)]
    public string[] propertyValue
    {
        get
        {
            return new[]
            {
                "My Doc",
                "cmis:document"
            };
        }
    }

    [DataType(DataType.Upload)]
    public HttpPostedFileBase target { get; set; }

My Ajax script then for doing the upload is as below which is run when the Upload File button to submit the form is clicked is as below - this successfully uploads a single file to Alfresco and no server side method is hit. Can anyway advise best way to iterate over the multiple documents uploaded using Kendo UI uploader and get them to upload similar?

// this line sets the property value to the name of the document the user typed in…I would like to use //the Name of the document in the mupltiple file uploader Kendo can extract the name to set
$('#propertyValue_0_').val($('#Name').val());

    $.ajax({
        url: http://localhost:8080/alfresco/api/-default-/public/cmis/versions/1.1/browser/root/Sites/mysite/documentLibrary/,
        type: 'POST',
        data: new FormData($('form')[0]),
        processData: false,
        contentType: false,
        beforeSend: function (xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa('admin' + ":" + 'admin')); },
        success: function () { alert('Success'); location.reload(); },
        error: function (xhr, ajaxOptions, thrownError) { alert('Failed');  alert(xhr.status + " " + thrownError); },
        xhrFields: {
            withCredentials: true
        }
    });

Outcomes