Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Programmatic file upload with chunking: Only the first file is sent

When doing a programmatic file upload using the jQuery-File-Upload plugin with chunking enabled I can not get more than one file to be sent.

I am making the call as follows:

fileUploadWidget.fileupload('send',
{
    files: filesList
})

filesList is a list of File objects.

Also I have set maxChunkSize and set singleFileUploads to true (I also tried false) as indicated on the Options wiki page.

Has anyone had any success getting this to work?

Update:

I'd made an issue on GitHub for this problem and here's the response from the author:

[...] Chunked uploads only support one file per request. That is, you can still simultaneously upload multiple files in chunks, but you'll have to send mutliple requests for that.


Our Solution:

As has been already commented, and what we ended up doing, was to send the files in a loop where widget was initialized with sequentialUploads set to true (you'll want this depending on how your backend is configured):

// for illustration only
// does not do anything with the returned jqXHR objects
for (i = 0; i < files.length; i++) {
    widget.fileupload('send', { files: files[i] });
}
like image 296
mrobb Avatar asked Aug 21 '13 22:08

mrobb


People also ask

What is chunked uploading?

The Chunked Upload API provides a way to reliably upload large files to Box by chunking them into a sequence of parts that can be uploaded individually. By using this API the application uploads a file in part, allowing it to recover from a failed request more reliably.

How do you upload a file as chunks in react JS?

To enable the chunk upload, set the size to chunkSize option of the upload and it receives the value in bytes . import { UploaderComponent } from '@syncfusion/ej2-react-inputs'; import * as React from 'react'; import * as ReactDOM from "react-dom"; export default class App extends React.

How are large files uploaded?

Upload your files to a cloud storage space, and share them or email them to others. Using a cloud storage space like Google Drive, Dropbox, or OneDrive is one of the easiest and most popular methods for sending large files.


1 Answers

If you use C# as back-end, you can try this (Client-Side, JQuery):

 $("#btnUpload").click(function () { // btnUpload is the ID of any button for upload
            var formdata = new FormData(); //FormData object
            var fileInput = document.getElementById('fileInput');
            //Iterating through each files selected in fileInput
            for (i = 0; i < fileInput.files.length; i++) {
                //Appending each file to FormData object
                formdata.append(fileInput.files[i].name, fileInput.files[i]);
            }
            //Creating an XMLHttpRequest and sending
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/UploadMethod'); // UploadMethod is your back-end code
            xhr.send(formdata);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // alert("uploaded");
                    }
            }

        });

and then in you UploadMethod do something like this: (ServerSide , C#)

public void Upload()
        {
            for (int i = 0; i < Request.Files.Count; i++)
            {
                HttpPostedFileBase file = Request.Files[i]; //Uploaded file
                //Use the following properties to get file's name, size and MIMEType
                int fileSize = file.ContentLength;
                string fileName = file.FileName;
                string mimeType = file.ContentType;
                System.IO.Stream fileContent = file.InputStream;
                //To save file, use SaveAs method
                var appPath = HostingEnvironment.ApplicationPhysicalPath + "Documents/" + "_" +  DateTime.Now+ fileName;

                file.SaveAs(appPath); //File will be saved in Documents folder
              }
        }
like image 60
Amir978 Avatar answered Nov 08 '22 22:11

Amir978