1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. FileManager large file upload limitation

FileManager large file upload limitation

Hi,

We have encountered an issue with uploading large files (<500MB) using the FileManager component.  We get the following message (Keep both and Replace options return the user to the same dialog).

SyncfusionUpload.png

We also have an Uploader control in another area of the software which doesn't exhibit the same functionality.  I have inserted the code that defines these 2 components below.

FileManager definition:

fileObject = new ej.filemanager.FileManager({

        ajaxSettings: {

            url: getApiAddress('FileOperations', versioning),

            uploadUrl: getApiAddress('Upload', versioning),

            downloadUrl: getApiAddress('Download', versioning)

        },

        allowDragAndDrop: true,

        view: 'Details',

        height: '800px',

        navigationPaneSettings: {

            minWidth: '250px',

            visible: true

        },

        contextMenuSettings: {

            file: ["Cut", "|", "Download", "|", "Delete"],

            folder: ["Open", "|", "Cut", "|", "Download",  "|", "Delete"],

            layout: ["SortBy", "View", "Refresh", "|", "NewFolder", "Upload", "|", "SelectAll"],

            visible: true

        },

        toolbarSettings: {

            items: ['Dashboard', 'NewFolder', "|", 'Upload', '|', 'Cut', 'Paste', 'Delete', 'Download', 'SortBy', 'Refresh', 'Selection', 'View', '|', 'Open in Counsel']

        },

        searchSettings: {

            allowSearchOnTyping: false

        },

        uploadSettings: {

            maxFileSize: 107374182400,

            chunkSize: 327680,

            allowedExtensions: allowedExtensions

        },

        beforeSend: onBeforeSend,

        beforeDownload: onBeforeDownload,

        toolbarClick: onToolbarClick,

        toolbarCreate: onToolbarCreate,

        menuOpen: onMenuOpen,

        fileSelection: onFileSelection,

        success: onSuccess,

        failure: onFailure,

        created: onCreated,

        fileDropped: onFileDropped,

        fileDragStop: onFileDragStopped,

        fileLoad: onFileLoad

    });

function onBeforeSend(args) {

    switch (args.action.toUpperCase()) {

        case "UPLOAD":

            var data = JSON.parse(args.ajaxSettings.data);


            var dataObject = JSON.parse(data[2].data);


            if (data[0].path == '__home/') {

                showMessagePopup("Upload File(s)", "Unable to drag files into the 'Home' directory.  Use the 'Upload' toolbar option.");

                args.cancel = true;

                break;

            }


            // Allow custom data for upload operations 

            var dataObject = JSON.parse(data[2].data);

            dataObject['projectid'] = currentProjectId;

            dataObject['folderid'] = dataObject.id;

            dataObject['token'] = publicId;

            dataObject['counselBaseAddress'] = counselBaseAddress;

            dataObject['rejectDuplicate'] = true;


            // Add custom parameter in ajax settings

            data[2].data = JSON.stringify(dataObject);


            args.ajaxSettings.data = JSON.stringify(data);


            break;


        default:

            var data = JSON.parse(args.ajaxSettings.data);


            // Add custom parameter column

            data['projectid'] = currentProjectId;

            data['token'] = publicId;

            data['counselBaseAddress'] = counselBaseAddress;


            // Add custom parameter in ajax settings

            args.ajaxSettings.data = JSON.stringify(data);

    }

}


Uploader definition:

counselUploadObject = new ej.inputs.Uploader({

        autoUpload: false,

        asyncSettings: {

            saveUrl: getApiAddress('UploadToCounsel', versioning),

            removeUrl: ' '

        },

        success: refresh ? onUploadSuccessToCounselRefresh : onUploadSuccessToCounsel,

        failure: onUploadFailureToCounsel,

        uploading: function (args) {

            onUploading(args, folderId);

        },

        chunkSize: 327680,

        maxFileSize: 107374182400,

        allowedExtensions: allowedExtensions

    });



Is this a known issue and is there a work around or could this be looked at to see if we have missed some options in the way we have defined the FileManager component?

If there is any other information that you require to investigate this issue please contact me.

Regards

James Cullis (Opus 2)


7 Replies
JA Jafar Ali Shahulhameed Syncfusion Team June 6, 2024 05:01 PM UTC

Hi James,


Greetings from Syncfusion,


We have prepared a sample to meet your requirement by making necessary changes in the service provider. Refer the code changes below,



[Startup.cs]

 

public void ConfigureServices(IServiceCollection services)

{

    services.AddMvc();

    services.AddCors(options =>

    {

        options.AddPolicy("AllowAllOrigins", builder =>

        {

            builder.AllowAnyOrigin()

            .AllowAnyMethod()

            .AllowAnyHeader();

        });

    });

    services.Configure<IISServerOptions>(options =>

    {

        options.MaxRequestBodySize = long.MaxValue; // you can customize the maximum file size as per your need

    });

    services.Configure<FormOptions>(x =>

    {

        x.ValueLengthLimit = int.MaxValue;

        x.MultipartBodyLengthLimit = long.MaxValue; // you can customize the maximum file size as per your need

    });

}



It is important to note that when you are trying to upload multiple files with same name the mentioned popup will appear. We kindly suggest you to check from your end once whether the files with same name exists.


We have attached the sample and service for your reference,


Sample: https://stackblitz.com/edit/heyxen-aibkph?file=index.js


Service: Attached as zip file.


Kindly try out the shared details and get back to us if you need further assistance.


Regards,

Jafar


Attachment: ej2aspcorefileprovider_b66de34c.zip

JC James Cullis replied to Jafar Ali Shahulhameed June 10, 2024 08:39 AM UTC

Dear Jafar,

There are a couple of issues:

  1. Our application is an ASP.NET Web Forms app so we don't have a Startup.cs.
  2. If it was a system wide restriction (which is what you seem to suggest) then why would the Uploader control still work?
  3. This was a single file upload and no other file of the same name exists in the target location so I'm not sure why the dialog is displayed.
Regards

James

JA Jafar Ali Shahulhameed Syncfusion Team June 12, 2024 09:06 AM UTC

Hi James,


We would like to inform you that in Uploader component we can be able to upload files without restrictions and it will upload multiple instances of the same file. However, in our File Manager component we have made a source level customization to display the popup when the same file name already exists, and we provided a support to the user to handle replace or keep both files or skip upload options.


If you are using a local or blob storage as backend for File Manager component, we kindly suggest you check whether that any file with same name exists in the local folder or blob location.


If you feel we have misunderstood your requirement and you are still facing an issue, we kindly suggest you provide some additional details regarding the service provider used at your end, video footage, issue replicating sample this will help us to provide you a prompt solution in a faster way.


We sincerely appreciate your patience and understanding in this matter. Kindly get back to us if you need further assistance.


Regards,

Jafar


JC James Cullis June 19, 2024 12:41 PM UTC

Hi Jafar

I can confirm that there is NOT a duplicate file in the target location. As I say the dialog only appears when a large file (greater than 500MB) is uploaded.

I have recorded video capture of it.   However I can't upload it here (mp4) because its too large.  Even when it's zipped it wont upload (don't know why).  Do you have anywhere I can upload it to?

Thanks in advance

James


SA SureshRajan Alagarsamy Syncfusion Team June 20, 2024 04:23 PM UTC

Hi James,


We have reviewed your query and understand that you are facing issues when uploading files larger than 500MB, and you are unable to implement our previous suggestion since you don’t have a startup.cs file in your project.


To address your concern, we recommend increasing the requestLimit in the server through the web.config file. This adjustment will allow you to upload larger files without any problems. For detailed instructions on how to make this change, we suggest referring to the following online resources.


https://docs.microsoft.com/en-us/iis/configuration/system.webserver/security/requestfiltering/requestlimits/#:~:text=The%20element%20specifies%20limits,length%20for%20a%20query%20string


https://www.talkingdotnet.com/how-to-increase-file-upload-size-asp-net-core/


Refer to the below code snippet for further reference.


Code Snippet :


[web.config]

 

<security>    

 

    <requestFiltering>    

 

      <!-- This will handle requests up to 50MB -->  

 

      <requestLimits maxAllowedContentLength="52428800" />  

 

    </requestFiltering>    

 

</security>    

 


Check out the shared details and get back to us if you need any further assistance.


Regards,
Suresh.


JC James Cullis replied to SureshRajan Alagarsamy June 21, 2024 09:26 AM UTC

Hi Suresh,

We already have the web.config set as follows:

    <security>

      <requestFiltering>
        <requestLimits maxAllowedContentLength="4000000000"/>
      </requestFiltering>
    </security>

Regards

James


SS Shereen Shajahan Syncfusion Team June 25, 2024 01:08 PM UTC

Hi James,

We have created a ticket under your mail ID. Please follow up the ticket for further assistance.

Regards,

Shereen


Loader.
Up arrow icon