We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Multiple Uploader elements on one page

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

9 Replies

SN Sevvandhi Nagulan Syncfusion Team January 12, 2020 05:17 PM UTC

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, 


Regards, 
Sevvandhi N 



AK Albert Karam July 26, 2020 10:17 AM UTC

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.



SN Sevvandhi Nagulan Syncfusion Team July 27, 2020 06:16 AM UTC

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 
 
 
 
 
} 
 



Regards, 
Sevvandhi N 



AK Albert Karam July 27, 2020 12:49 PM UTC

Thanks @Sevvandhi N

Issue resolved


SN Sevvandhi Nagulan Syncfusion Team July 28, 2020 04:07 AM UTC

Hi Albert, 


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


Regards, 
Sevvandhi N 



MP Megha Patel May 17, 2021 09:06 AM UTC

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?












BC Berly Christopher Syncfusion Team May 18, 2021 03:48 PM UTC

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 



MP Megha Patel May 20, 2021 01:13 PM UTC

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



SN Sevvandhi Nagulan Syncfusion Team May 21, 2021 10:26 AM UTC

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.   
   


Regards, 
Sevvandhi N    


Loader.
Live Chat Icon For mobile
Up arrow icon