Multiple Uploader elements on one page

[Patrik Volka]

Hi guys,

I can't solve one problem.

On the page, I will encounter several Uploader elements, each located in a different Form element, and each has a different handler for saving the file.

The problem is that all Uploader elements call the Uploader method that is located in the Razor page layout.

How do I make each Uploader element call the method it is associated with?

I apologize for my bad English.

Thank you for any advice.

Attachment: UploaderProblem_6b91a389.zip

[Sevvandhi Nagulan]

Hi Patrik, 

Greetings from Syncfusion support. 

We have checked the shared  code snippet. We would like to inform you that, when you place the uploader inside the form then saveUrl and removeUrl must be null. So, you can get the file in form post and can save in server side. We have prepared the sample with uploader inside the form & without the form and handled the unique save and remove action. Kindly refer the below code, 

[index.cshtml] 

@{ 

    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://localhost:44362/Home/Save/", RemoveUrl = "https://localhost:44362/Home/Remove" }; 

 } 

 

<ejs-uploader id="UploadFiles" asyncSettings="@asyncSettings"> 

</ejs-uploader> 

 

<form action="https://localhost:44362/Home/BlogSave" method="post"> 

    <ejs-uploader id="UploadFiles1"></ejs-uploader> 

    <input type="submit" value="Upload" class="e-btn" /> 

</form> 

Please find the sample below, 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1997201951 

Regards, 

Sevvandhi N 

[Albert Karam]

Hello,

I have a related inquiry. I'm trying to add a couple of file uploaders in the same page as follows:

Upload Your Logo Here

Use PNG transparent logo file.

@{

    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "/SystemSetting/UploadCustomerLogo", RemoveUrl = "/SystemSetting/Remove" };

}

Upload eLogin Background Here

Use JPG image file.

@{

    var asyncBackgroundSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "/SystemSetting/UploadBackground", RemoveUrl = "/SystemSetting/Remove" };

}

Each of the file uploaders direct to different POST request to save the file in a different location.

My problem is that with the second uploader (uploadFiles2) i don't receive the uploaded file in the post request.

[Sevvandhi Nagulan]

Hi Albert, 

Greetings from Syncfusion support. 

We would like to inform you that, by using the name attribute in the Uploader component, we can get the file on the server side. We can give any name to the component Id but you can get the file on the server side by using the same Id name. Also, we suggest to use the unique Save and Remove handler when you use multiple uploader in the same page.  And, receive the file by using the corresponding Id name provided in the code. Refer to the code below, 

 

[index.cshtml] 

 

@{ 

    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://localhost:44362/Home/Save/", RemoveUrl = "https://localhost:44362/Home/Remove" }; 

} 

@{ 

    var asyncSettings1 = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://localhost:44362/Home/BlogSave/", RemoveUrl = "https://localhost:44362/Home/BlogRemove" }; 

} 

<ejs-uploader id="UploadFiles" asyncSettings="@asyncSettings"> 

</ejs-uploader> 

 

<ejs-uploader id="uploadFiles2" asyncSettings="@asyncSettings1"> 

</ejs-uploader> 

 

[HomeController.cs] 

 

public IActionResult Save(IList<IFormFile> UploadFiles) 

        { 

            try 

            { 

 

… 

 

} 

 

public IActionResult BlogSave(IList<IFormFile> uploadFiles2) 

        { 

            Try 

 

 

… 

 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11826195451 

Regards, 

Sevvandhi N 

[Albert Karam]

Thanks @Sevvandhi N

Issue resolved

[Sevvandhi Nagulan]

Hi Albert, 

Thanks for the update. Please let us know if you need any other further assistance. 

Regards, 

Sevvandhi N 

[Megha Patel]

Hi,

I have two file uploaders on the same page and I am uploading files in chunk.

In Angular Side:

                            (success)="OnFileUploadSuccessorFailure($event)" maxFileSize='4294967295'

                            [asyncSettings]='path' [autoUpload]='autoUpload' (removing)='onFileRemove($event)'

                            (change)="onFilechange($event);" multiple='false'

                            (chunkUploading)='onFileChunkUploading($event)' (uploading)='onFileUploading($event)'>

                       

                                (failure)="OnPackageUploadSuccessorFailure($event)"

                                (success)="OnPackageUploadSuccessorFailure($event)" maxFileSize='4294967295'

                                [asyncSettings]='path' [autoUpload]='autoUpload'

                                (removing)='onPackageFileRemove($event)' (change)="onPackageFilechange($event);"

                                multiple='false' (chunkUploading)='onPackageFileChunkUploading($event)'

                                (uploading)='onPackageFileUploading($event)'>

                           

public path: Object = {

        saveUrl: 'https://localhost:44381/api/ReleaseManagement/UploadFile',

        chunkSize: 102400,

        RetryCount: 5,

        RetryAfterDelay: 3000, ChunkSize: 102400

    };

    public path1: Object = {

        saveUrl: 'https://localhost:44381/api/ReleaseManagement/UploadFile1',

        chunkSize: 102400,

        RetryCount: 5,

        RetryAfterDelay: 3000, ChunkSize: 102400

    };

In Asp.net core :

I want both files sequentially to upload in chunks on azure. How can I do that?

[Berly Christopher]

Hi Megha, 

  

Please find the controller section for save the file in azure storage in ASP.NET Core platform. You can make use of it for multiple Uploader component in the page.  

  

public static byte[] content = new byte[] { }; 

        public async Task Save(IList<IFormFile> chunkFile, IList<IFormFile> uploadFiles) 

        { 

            try 

 

            { 

 

                foreach (var file in chunkFile) 

 

                { 

 

                    var httpPostedChunkFile = HttpContext.Request.Form.Files["chunkFile"]; 

 

                    var chunkIndex = HttpContext.Request.Form["chunk-index"]; 

 

                    var totalChunk = HttpContext.Request.Form["total-chunk"]; 

 

                    using (var fileStream = file.OpenReadStream()) 

 

                    { 

 

                        if (Convert.ToInt32(chunkIndex) <= Convert.ToInt32(totalChunk)) 

 

                        { 

 

                            var streamReader = new MemoryStream(); 

 

                            fileStream.CopyTo(streamReader); 

 

                            var byteArr = streamReader.ToArray(); 

 

                            if (content.Length > 0) 

                            { 

                                content = content.Concat(byteArr).ToArray(); 

                            } 

                            else 

                            { 

                                content = byteArr; 

                            } 

 

                        } 

 

                        if (Convert.ToInt32(chunkIndex) == Convert.ToInt32(totalChunk) - 1) 

 

                        { 

                            const string accountName = "****"; // Provide the account name 

                            const string key = "****"; // Provide the account key 

 

                            var storageCredentials = new StorageCredentials(accountName, key); 

 

                            var cloudStorageAccount = new CloudStorageAccount(storageCredentials, true); 

 

                            var cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient(); 

 

                            var container = cloudBlobClient.GetContainerReference("filo"); 

 

                            CloudBlockBlob blockBlob = container.GetBlockBlobReference(httpPostedChunkFile.FileName); 

 

                            using (FileStream fileStreams = new FileStream(httpPostedChunkFile.FileName, FileMode.Create)) 

 

                            { 

 

                                for (int i = 0; i < content.Length; i++) 

 

                                { 

 

                                    fileStreams.WriteByte(content[i]); 

 

                                } 

 

                                fileStreams.Seek(0, SeekOrigin.Begin); 

 

                                content = new byte[] { }; 

 

                                await blockBlob.UploadFromStreamAsync(fileStreams); 

 

                            } 

 

                        } 

 

                    } 

 

                } 

 

            } 

 

            catch (Exception e) 

 

            { 

                content = new byte[] { }; 

                Response.Clear(); 

                Response.StatusCode = 204; 

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload"; 

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 

 

            } 

        } 

 

    } 

 

  

Regards, 

Berly B.C 

[Megha Patel]

Hi,

I want Multiple files at one request and I want to upload those files in chunks on azure.

Can you please provide me solution?

Front-End : Angular

BackEnd:asp.net core

[Sevvandhi Nagulan]

Hi Megha, 

We checked your query of “Sending multiple files at one request ”. Currently our uploader component sends request to the server for each file.  Hence, we have considered this as a feature request in our end and this will be available in any of our upcoming future releases. Meanwhile, you can now track the current status of this request, review the proposed resolution timeline, and contact us for any further inquiries through the below link from our feedback portal.   

   

Feedback: https://www.syncfusion.com/feedback/5328/ 

Regards, 

Sevvandhi N