3

In a speak application I am trying to get a csv file that I will send to a controller when a button is clicked. The content editor should be able to select the csv file from their local instance so I am currently trying to use the uploader rendering to do this (/sitecore/client/Business Component Library/version 1/Layouts/Renderings/Forms/Uploader). Here are my dialog's renderings.

In my javascript when the submit button is clicked I cannot seem to get the file a user uploads. This is what I see in the console.

This is the js associated with my speak dialog:

define(["sitecore"], function (Sitecore) {
    var extendedPage = Sitecore.Definitions.App.extend({
        initialized: function () {

        },
        initialize: function () {

        },
        //button click
        generateItems: function () {
            var self;

            self = this;

            var attributes = self.Uploader.attributes;

        }
    });

    return extendedPage;
});

I would also like to know if the uploader can be restricted to allowing a single file to be uploaded.

3

You can easily achieve this by using Sitecore Powershell. If Sitecore Powershell is an option, you can easily create a dialog with SPE and also perform an upload of files. The below script will allow you to specify the folder you want to store the csv file and also whether the user can overwrite existing file.

$props = @{
    Parameters = @(
        @{ Name = "fileSystem"; Title = "Destination Folder"; Tab = "General" },
        @{ Name = "overwriteFile"; Value=$false; Title = "Overwrite existing file"; Tooltip="Check this if you want to overwrite existing file"; Tab = "General" }
    )
    Title = "File Uploader"
    Description = "Fills in the required fields below"
    OkButtonName = "Proceed"
    CancelButtonName = "Abort"
    Width = 500
    Height = 500
}

$result = Read-Variable @props 

if ($result -ne "ok") {
    Exit
}

$uploadPath = $AppPath + $fileSystem

if($overwriteFile -eq 1){
    Receive-File -Title "CSV Uploader" $uploadPath -Overwrite
} else{
    Receive-File -Title "CSV Uploader" $uploadPath
}

Below is a screenshot of the flow

enter image description here

You only require to create a button which will perform the powershell script call to trigger the script above.

2

I was able to get this off the ground as a speak application but I had to use FormData to pass it off to a controller. Here are the steps I took:

I added a UploaderInfo rendering to my speak application. Then in my js instead of using the Uploader control I got the file by using my upload info field. I created a FormData object and appended it to that. Here's what my sample js ended up looking like:

define(["sitecore"], function (Sitecore) {
    var extendedPage = Sitecore.Definitions.App.extend({
        initialized: function () {

        },
        initialize: function () {

        },
        generateItems: function () {
            var self = this;

            var files = self.UploaderInfo.viewModel.files();
            var file = files != null && files.length === 1 ? files[0].data() : null;

            if (file != null) {

                var formData = new FormData();
                formData.append("csv", file);

                jQuery.ajax({
                    processData: false,
                    contentType: false,
                    type: "POST",
                    url: "/api/sitecore/Generator/GenerateItems",
                    data: formData,
                    success: function(data) {
                        //close our dialog
                        window.top.dialogClose();
                    },
                    error: function(e) {

                    },
                    complete: function(e) {

                    }
                });
            }
        }
    });

    return extendedPage;
});

Controller's method:

    [System.Web.Http.AcceptVerbs("POST")]
    [RequireAuthentication]
    public object BatchGenerate()
    {
        //get file by key added to FormData
        var csv = Request.Files["csv"];

        //do logic here
    }

If you are against adding the UploaderInfo rendering another option would be to call MyUploaderId.viewModel.upload() and then find the file that was just uploaded. If you were to use that approach this post looks like the way to get the media item that gets uploaded.

Because this is something that I'm going to need to run once to import some items I'm going to use Hishaam's solution. If someone needs a way for a content editor in a speak application to upload a file this is a possible solution provided their browser supports FormData.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.