kgadropzone v0.1.0

KgaDropZone

KgadropZone is a non react component for SharePoint spfx that allow custom display of files

sample code

(Documents are in a Shp Library and have a property BaseListId for filtering)

initDropZone

protected initDropZone(): void {



    DocLib_Documents_DropZone = new kgadropzone("DocLib_Documents", "Documents");

    $("#DocLib_Documents").on("click", ".DeleteCurrentDocument", function (event) {
        const c = confirm("Do you want to delete this document?");
        if (c === true) {
            const docId = $(this).data("docid");
            const tag = "#DocLib_Documents_doc" + docId;
            $(tag).remove();
            $(this).parent(".fileGlobalConteneur3Uploaded").remove();
            this.deleteDocument(docId);
            event.preventDefault();
            event.stopPropagation();
        }
    }
}

loading doc from library and adding them to the KgaDropZone

  protected loadDocs(_Id: number): void {
    sp.web.lists
      .getByTitle(documentLibrary)
      .items.select("File, ID")
      .expand("File")
      .filter("BaseListId eq " + _Id)()
      .then((data) => {
        data.forEach((f) => {
          const doc = {
            docName: "",
            docType: -1,
            url: "",
            id: -1,
          };
          doc.docName = f.File.Name;
          doc.url = f.File.ServerRelativeUrl;
          doc.id = f.ID;
          DocLib_Documents_DropZone.addDocToZone(doc);
        });
        ... continue
      });
  }

saveDocs

protected saveDocs(Id: number | null): void {
    if (Id) {
        sp.web.getFolderByServerRelativePath(documentLibrary)
        .addSubFolderUsingPath(Id.toString()).then(function (data) {
            nbfiles = DocLib_Documents_DropZone.getNumberOfFiles();
            const _files = DocLib_Documents_DropZone.getFiles();
            if (_files.length === 0) {
              ... //do your after process here
            } else {
              for (let f = 0; f < _files.length; f++) {
                this.workonfile(_files[f], Id);
              }
            }
        });
    }
}

deleteDocument

protected deleteDocument(id: number): void {
    sp.web.lists.getByTitle(documentLibrary).items.getById(id).delete();
}

workonfile

  protected workonfile(file: File, id: number): void {
      const fixedName = that.getValidFileName(file.name);
      const promise: Array<Promise<IFileInfo>> =[];
      const libpath = that.context.pageContext.web.absoluteUrl + documentLibrary + "/" + id.toString() + "/";
      promise.push(sp.web.getFolderByServerRelativePath(libpath).files.addChunked(fixedName, file, { Overwrite: true }));
      Promise.all(promise).then((f) => {
          sp.web.getFolderByServerRelativePath(libpath + "/" + fixedName).getItem()
          .then((item) => {
              const test: any = <any>item;
              sp.web.lists.getByTitle(documentLibrary).items.getById(test.Id)
              .update({
                  BaseListIdId: id,
              })
              .then((r) => {
                  nbfiles--;
                  if (nbfiles === 0) {
                      this...
                  }
              });
          });
      });
  }

getValidFileName

  protected getValidFileName(filename: string): string {
      let outname = filename;
      for (let i = 0; i < specialsChar.length; i++) {
          const regex = new RegExp(specialsChar[i].label, "g");
          outname = outname.replace(regex, specialsChar[i].value);
      }
      return outname;
  }