MultipleFileUploadEditor and Download All

[Zahar661]

Good day. Can't create a new editor based on MultipleFileUploadEditor ((
How can I add a button to download everything in the archive?

@Serenity.Decorators.registerEditor()
export class MultipleFileUploadDownLoadAllEditor extends Serenity.MultipleImageUploadEditor {

    constructor(div: JQuery, opt: Serenity.ImageUploadEditorOptions) {
        super(div, opt);

    }
    protected getToolButtons(): Serenity.ToolButton[] {
        var buttons = super.getToolButtons();
        buttons.push({
            title: "download all",
            cssClass: 'download-all-file-button',
            onClick: function () {
            }
        });
        return buttons;
    }
}

I will describe the archiving and downloading logic. I can't add a button to the editor.

[minhhungit]

Yes, me too, I am going to ask this question

[minhhungit]

latest serenity

[VictorTomaili]

Use MultipleFileUploadEditor instead. It's same editor but just different name. But question why MultipleImageUploadEditor doesn't work with same way. I will check it later.

    @Serenity.Decorators.registerEditor()
    export class MultipleFileUploadDownLoadAllEditor extends Serenity.MultipleFileUploadEditor {

        constructor(div: JQuery, opt: Serenity.FileUploadEditorOptions) {
            super(div, opt);

        }
        protected getToolButtons(): Serenity.ToolButton[] {
            var buttons = super.getToolButtons();
            buttons.push({
                title: "download all",
                cssClass: 'download-all-file-button',
                onClick: function () {
                }
            });
            return buttons;
        }
    }

[minhhungit]

not work with MultipleFileUploadEditor too, the problem is when we use custom editor attribute on c# code, we can not re-used old properties, like AllowNoneImage, FilenameFormat, DisableDefaultBehavior...

Generated editor attribute will be inherited from CustomEditorAttribute

This problem also happened on .net 3.1 version

[VictorTomaili]

Also there is some cases more. If you want to extend from upload editor, upload behavior will not work. @Zahar661 try to find original MultipleFileUploadEditor from your dialog. and add this button externally.

[Zahar661]

@VictorTomaili I have already done so, but I would like to do so for all entities.

[minhhungit]

Workaround for Reusing the FileNameFormat Property in a Custom MultipleFileUploadEditor

Step 1: Create a Custom Editor in TypeScript

Create a new file, e.g., customMultipleImageUploadEditor.ts, and add the following code:

import { 
  Decorators, 
  FileUploadEditorOptions, 
  MultipleImageUploadEditor, 
  notifyWarning, 
  PropertyItem 
} from "@serenity-is/corelib";

@Decorators.registerEditor("YourProject.YourCustomMultipleImageUploadEditor")
@Decorators.element('<div />')
export class CustomMultipleImageUploadEditor extends MultipleImageUploadEditor {
  constructor(props: { element?: any } & FileUploadEditorOptions) {
    super(props);
    this.jsonEncodeValue = true;
  }

  // You can add a button here
  getToolButtons() {
    let buttons = super.getToolButtons();

    buttons.push({
        title: "Test",
        icon: "fa fa-blender-phone",
        onClick: () => {
            notifyWarning("test");
        }
    })
    return buttons;         
  }

  getEditValue(property: PropertyItem, target: any) {
    if (this.jsonEncodeValue) {
      target[property.name] = JSON.stringify(this.get_value());
    } else {
      target[property.name] = this.get_value();
    }
  }
}

Step 2: Build the Project and Generate the C# Attribute

After building your project, a new C# attribute will be generated: CustomMultipleImageUploadEditorAttribute. However, we won't use this attribute directly.

Step 3: Create a New Attribute that Reuses the Editor Key

Create a new C# file, e.g., AnotherCustomMultipleImageUploadEditorAttribute.cs, and add the following code:

public partial class AnotherCustomMultipleImageUploadEditorAttribute : BaseUploadEditorAttribute
{
  public const string Key = "YourProject.YourCustomMultipleImageUploadEditor";

  public AnotherCustomMultipleImageUploadEditorAttribute()
    : base(Key)
  {
  }

  public override bool IsMultiple => true;
}

By using this new attribute, you can reuse the FileNameFormat property while still utilizing the custom editor's functionality.

Example Use Case

To use this custom editor in your Row or Form, simply apply the new attribute:

[AnotherCustomMultipleImageUploadEditor(FilenameFormat = "Jin/~")]
public String AttachmentImagePath
{
    get { return Fields.AttachmentImagePath[this]; }
    set { Fields.AttachmentImagePath[this] = value; }
}

This will render the custom image upload editor with the ability to reuse the FileNameFormat property.

[Zahar661]

If done without an editor

abcEndpoint.cs

    using ICSharpCode.SharpZipLib.Core;
    using ICSharpCode.SharpZipLib.Zip;

public FilePathResponse DownloadAll (IUnitOfWork uow, SaveRequest<MyRow> request)
        {
            var att_json = uow.Connection.ById<MyRow>(request.EntityId, q => q.Select(MyRow.Fields.Attachment)).Attachment;
           var att = JSON.Parse<List<UploadedFile>>(att_json);

            if (!Directory.Exists(Server.MapPath("~/App_Data/upload/temporary")))
                Directory.CreateDirectory(Server.MapPath("~/App_Data/upload/temporary"));

            string filename = Guid.NewGuid().ToString() + ".zip";
            string fullZipPath = Server.MapPath("~/App_Data/upload/temporary/" + filename);

            FileStream fsOut = System.IO.File.Create(fullZipPath);
            ZipOutputStream zipStream = new ZipOutputStream(fsOut);


            foreach (var file in att)
            {
                FileInfo fi = new FileInfo(Server.MapPath("~/App_Data/upload/" + file.Filename));
                string entryName = ZipEntry.CleanName(file.OriginalName);
                ZipEntry newEntry = new ZipEntry(entryName);
                newEntry.DateTime = fi.LastWriteTime;
                newEntry.Size = fi.Length;
                zipStream.PutNextEntry(newEntry);

                byte[] buffer = new byte[4096];
                using (FileStream streamReader = System.IO.File.OpenRead(fi.FullName))
                {
                    StreamUtils.Copy(streamReader, zipStream, buffer);
                }
                zipStream.CloseEntry();
            }
            zipStream.IsStreamOwner = true;
            zipStream.Close();

            string file_type = "application/zip";
            var rez = File(fullZipPath, file_type, filename);
            return new FilePathResponse() { Path = "/upload/temporary/"+rez.FileDownloadName };
        }

  public class FilePathResponse : ServiceResponse
    {
        public string Path { get; set; }
    }

abcDialog.ts

 getToolbarButtons() {
            var buttons = super.getToolbarButtons();
  
            buttons.push({
                title: 'Скачать все файлы',
                cssClass: 'box-button',
                onClick: () => {
                    this.downAll();
                }
            });
            return buttons;
        }

        protected downAll() {
           abcService.DownloadAll(
                {
                    EntityId: this.get_entityId()
                },
                response => {
                    var link = document.createElement('a');
                    link.setAttribute('href', response.Path);
                    link.click();
                });
        }

// or add button to form

        protected updateInterface() {
            super.updateInterface();
            var buttons = this.form.Attachment.element.find(".s-Toolbar .buttons-inner");

            var boxbutton = buttons[0].insertAdjacentHTML('beforeend', "<div class='tool-button box-button'><div class='button-outer'><span class='button-inner'>Скачать все файлы</span></div></div>");
            this.form.Attachment.element.find(".s-Toolbar .buttons-inner .box-button").click(e => {
                this.downAll();
            });
        }