Multiple files upload in onedrive (skydrive)?

Question

It is possible to upload multiple files in onedrive(skydrive) using WL.upload ? I tried something but I always get an error like "element must be an html input element" or something like this. I use onedrive sdk 5.6 and the application is build in ASP.NET MVC 5. The problem is that I created an input of type="file" with the attribute multiple set so I can select multiple files from my computer but the upload method from WL api ask for an element property that is actual an id to an input element of type="file". Because my input is set on multiple I tried to iterate through the files that contains and to create an input element to pass to the method, but it's doesn't work because due to security reasons I can set a value of an input element.

So, does anybody knows how I can do this ? Thanks

This is what I have tried:

 <div id="save-to-skydrive-dialog-content-multiple">
        <p>select a file</p>
        <form enctype='multipart/form-data' method='POST'>
            <input id="save-to-skydrive-file-input-multiple" type="file" name="files[]" multiple />
        </form>
        <p>upload file</p>
        <button id="save-to-skydrive-upload-multiple-button">upload multiple</button>
 </div>

function saveMultipleToSkyDrive() {
        WL.fileDialog({
            mode: 'save'
        }).then(function (response) {
            var folder = response.data.folders[0];

            var elements = document.getElementById("save-to-skydrive-file-input-multiple").files;

            for (var i = 0; i < elements.length; i++) {

                var htmlInPutElement = document.createElement('input');
                htmlInPutElement.setAttribute('type', 'file');
                htmlInPutElement.value = elements.item(i);

                WL.api({

                })

                WL.upload({
                    path: folder.id,
                    element: htmlInPutElement,
                    overwrite: 'rename'
                }).then(function (response) {
                    log("You save to" + response.source + ". " + "Below is the result of the upload");
                    log("");
                    log(JSON.stringify(response));
                },
                    function (errorResponse) {
                        log("WL.upload errorResponse = " + JSON.stringify(errorResponse));
                    },
                    function (progress) {
                    });
            }
        }, function (errorResponse) {
            log("WL.upload errorResponse = " + JSON.stringify(errorResponse));
        }
        );

Thanks.

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

From what I remember of messing with the input[file] element, you can't set the value of an input[file] like that, for security reasons.

            var htmlInPutElement = document.createElement('input');
            htmlInPutElement.setAttribute('type', 'file');
            htmlInPutElement.value = elements.item(i);

A solution would be to post the files to an interim action on your controller, and then do the OneDrive API stuff in that action method instead. You can iterate through Request.Files (although it can be tricky with the multiple property, I learned the hard way - see this post for more info

edited May 23 '17 at 12:23

Community

1
1

answered Dec 12 '14 at 12:02

roryok

9,325
17
71
138

I know that because of security reasons I can't set a value of an input[file] and also I thought to make the logic in controller but the problem is that I want to do all the stuff in javascript, I don't want to work with any action method from controller. – cozmin-calin Dec 12 '14 at 12:17
well, that's the only way I know how to do it. the only other way would be to have separate file inputs to start with and not use a multiple attribute – roryok Dec 12 '14 at 12:42
thanks for your answer. I also think there maybe it could be a way to send a parameter to method from the api that Microsoft offer. until now I find only the method with an input[file] (I just started to learn OneDrive sdk). – cozmin-calin Dec 12 '14 at 13:04
I found a way to do this, after a little search work. Unfortunatelly, I couldn't find a way to upload multiple files from javascript, only from c# code. I post here the solution, maybe it helps somebody. – cozmin-calin Dec 17 '14 at 08:11

score 0 · Answer 2 · answered Dec 17 '14 at 08:13

I find the answer, but not in javascript, in c# code.

Html input:

 <p>Upload Files</p>
<div id="save-to-skydrive-dialog-content">
    @using (Html.BeginForm("UploadFiles", "Auth", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="file" name="file" multiple />
        <input type="submit" value="Upload File"/>
    }
</div>

C# method:

[HttpPost]
    public async Task<ActionResult> UploadFiles()
    {
        var files = Request.Files;

        if (Request.Files.Count > 0)
        {
            LiveLoginResult loginStatus = await authClient.InitializeWebSessionAsync(HttpContext);
            if (loginStatus.Status == LiveConnectSessionStatus.Connected)
            {
                connectedClient = new LiveConnectClient(this.authClient.Session);
                LiveOperationResult result = await connectedClient.GetAsync("me/skydrive");
                string folderId = (string)result.Result["id"];

                for (var i = 0; i < Request.Files.Count; i++)
                {
                    var fileName = Request.Files[i].FileName;
                    var fileStream = Request.Files[i].InputStream;

                    LiveOperationResult uploadResult = await connectedClient.UploadAsync(folderId, fileName, fileStream, OverwriteOption.Overwrite);
                }
            }
        }
        return View("~/Views/Home/Index.cshtml");
    }

you welcome! in the future maybe I will find a way in javascript only! — cozmin-calin, Dec 18 '14 at 08:05

Multiple files upload in onedrive (skydrive)?

2 Answers2