FileManager integrated with React File Upload

[David Obregon]

Hi Syncfusion Team,

I was reading some forums such as this https://www.syncfusion.com/feedback/10089/upload-folder-support-in-file-manager-component where you responded that currently is not in your priorities to include upload folder in the syncfusion file manager. We'd like to have that feature in the file manager, however my thinking and wondering is if you have a way to integrate the file manager with the react file upload component https://www.syncfusion.com/react-ui-components/react-file-upload . That would be wonderful as the react file upload component provides a better upload experience than the default uploader in the file manager, and also, it includes upload folder (directory).

Look forward to receiving your response.

Thanks,

David

[Indhumathy Loganathan]

Hi David, 

 

Greetings from Syncfusion support. 

 

As mentioned in the feedback, we have considered to include folder upload support as a feature in File Manager component and it will be included in any of our upcoming releases. We understand that you want Uploader component instead of our default File Manager Upload. You can remove our upload button from toolbar items and you can add the custom button to perform upload operation. We have prepared a sample, where we added a custom upload button in File Manager toolbar items. While clicking that button we open the Uploader component dialog, where you can browse the folder you want to upload and you can upload making below customization in the controller. 

 

// uploads the file(s) into a specified path 

[Route("Upload")] 

public IActionResult Upload(IList<IFormFile> UploadFiles, string action, IFormCollection form) 

{ 

var data = Request.Form["path"]; 

var path = data.ToString().Replace("/", "\\"); 

long size = 0; 

try 

{ 

    foreach (var file in UploadFiles) 

    { 

        var filename = ContentDispositionHeaderValue 

            .Parse(file.ContentDisposition) 

            .FileName 

            .Trim('"'); 

        var folders = filename.Split('/'); 

        var uploaderFilePath = this.basePath + "\\" + this.root + path; 

        // for Directory upload 

        if (folders.Length > 1) 

        { 

            for (var i = 0; i < folders.Length - 1; i++) 

            { 

                var newFolder = uploaderFilePath + $@"\{folders[i]}"; 

                Directory.CreateDirectory(newFolder); 

                uploaderFilePath = newFolder; 

                filename = folders[i + 1]; 

            } 

        } 

        filename = uploaderFilePath + $@"\{filename}"; 

        size += file.Length; 

        if (!System.IO.File.Exists(filename)) 

        { 

            using (FileStream fs = System.IO.File.Create(filename)) 

            { 

                file.CopyTo(fs); 

                fs.Flush(); 

            } 

… 

} 

 

By using toolbarSettings property, we added custom button to perform upload operation and removed the default ‘Upload’ button from toolbar. While clicking the custom button, we have performed upload operation of Uploader component. 

 

  toolbarClick(args) { 

    if (args.item.text === 'Custom') { 

      const wrapperEle = select('.e-file-select-wrap button', document); 

      wrapperEle.click(); 

    } 

  } 

  onUploadBegin(args) { 

    var p = document.getElementById('overview_file').ej2_instances[0].path; 

    // add addition data as key-value pair. 

    args.customFormData = [{ path: p }]; 

  } 

  success() { 

    this.fileObj.refreshFiles(); 

  } 

 

  render() { 

    return ( 

      <div> 

        <div className="control-section"> 

          <UploaderComponent 

            id="UploadFiles" 

            ref={upload => { 

              this.uploadObj = upload; 

            }} 

            asyncSettings={this.path} 

            directoryUpload={true} 

            uploading={(this.onUploadBegin = this.onUploadBegin.bind(this))} 

            success={(this.success = this.success.bind(this))} 

          /> 

 

          <div id="container"> 

            <FileManagerComponent 

              id="overview_file" 

              ref={fileObj => { 

                this.fileObj = fileObj; 

              }} 

              toolbarClick={this.toolbarClick} 

              … 

              toolbarSettings={{ 

                items: [ 

                  'NewFolder', 

                  'Custom', 

                  'Delete', 

                  'Download', 

                  'Rename', 

                  'SortBy', 

                  'Refresh', 

                  'Selection', 

                  'View', 

                  'Details' 

                ] 

     … 

 } 

 

Please find the sample from below link. 

 

Sample: https://stackblitz.com/edit/react-pvxtg1?file=index.js 

 

Service Provider: https://www.syncfusion.com/downloads/support/forum/167850/ze/ej2-aspcore-file-provider915607358 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L