PnP JS to attach files to list item from SharePoint framework issue - cannot pass file content

%3CLINGO-SUB%20id%3D%22lingo-sub-311168%22%20slang%3D%22en-US%22%3EPnP%20JS%20to%20attach%20files%20to%20list%20item%20from%20SharePoint%20framework%20issue%20-%20cannot%20pass%20file%20content%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-311168%22%20slang%3D%22en-US%22%3E%3CP%3EI%20try%20to%20use%26nbsp%3BPnP%20JS%20to%20attach%20files%20to%20list%20item%20from%20SharePoint%20framework%20and%20have%20issue%20to%20pass%20file%20content.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E0.%20I'm%20not%20using%20any%20javascript%20framework%20to%20simplify%20the%20demo%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E1.%20Here%20is%20the%20HTML%26nbsp%3Bin%20the%20render()%26nbsp%3B%3C%2FP%3E%3CP%3E...%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%3CINPUT%20id%3D%22%26quot%3Binputfile%26quot%3B%22%20type%3D%22%26quot%3Bfile%26quot%3B%22%20multiple%3D%22%22%20%2F%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%2F%2F%20Files%20to%20attach%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%3CINPUT%20id%3D%22%26quot%3BEmployeeId%26quot%3B%22%20placeholder%3D%22%26quot%3BEmployeeId%26quot%3B%22%20%2F%3E%26nbsp%3B%20%2F%2F%20Item%20ID%20for%20file%20attachment%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E...%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%3CBUTTON%20id%3D%22%26quot%3BAttacheFiles%26quot%3B%22%20type%3D%22%26quot%3Bsubmit%26quot%3B%22%3EAttache%20Files%3C%2FBUTTON%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E2.%20Added%20event%26nbsp%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3EAddEventListeners%3C%2FSPAN%3E%3CSPAN%3E()%20%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Evoid%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetElementById%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'AttacheFiles'%3C%2FSPAN%3E%3CSPAN%3E).%3C%2FSPAN%3E%3CSPAN%3EaddEventListener%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'click'%3C%2FSPAN%3E%3CSPAN%3E%2C()%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EAttachFiles%3C%2FSPAN%3E%3CSPAN%3E())%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E3.%20Handle%20event%20code.%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3EAttachFiles%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7B%20%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3Efiles%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetElementById%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'inputfile'%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3Eattachments%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EAttachmentFileInfo%3C%2FSPAN%3E%3CSPAN%3E%5B%5D%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20%5B%5D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3EfileCount%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20(%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EHTMLInputElement%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetElementById%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'inputfile'%3C%2FSPAN%3E%3CSPAN%3E)).%3C%2FSPAN%3E%3CSPAN%3Efiles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elength%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Efor%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3Ei%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E0%3C%2FSPAN%3E%3CSPAN%3E%3B%20%3C%2FSPAN%3E%3CSPAN%3Ei%3C%2FSPAN%3E%20%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%20%3CSPAN%3EfileCount%3C%2FSPAN%3E%3CSPAN%3E%3B%20%3C%2FSPAN%3E%3CSPAN%3Ei%3C%2FSPAN%3E%3CSPAN%3E%2B%2B%3C%2FSPAN%3E%3CSPAN%3E)%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Elet%3C%2FSPAN%3E%20%3CSPAN%3EfirstInput%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20(%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EHTMLInputElement%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetElementById%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'inputfile'%3C%2FSPAN%3E%3CSPAN%3E)).%3C%2FSPAN%3E%3CSPAN%3Efiles%3C%2FSPAN%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3Ei%3C%2FSPAN%3E%3CSPAN%3E%5D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3Ereader%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Enew%3C%2FSPAN%3E%20%3CSPAN%3EFileReader%3C%2FSPAN%3E%3CSPAN%3E()%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3ErawData%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereader%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eonload%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Efunction%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Ee%3C%2FSPAN%3E%3CSPAN%3E)%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3ErawData%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Ereader%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eresult%3C%2FSPAN%3E%3CSPAN%3E%3B%26nbsp%3B%20%26nbsp%3B%2F%2FThis%20should%20be%20updated%20after%26nbsp%3Breader.readAsBinaryString(firstInput)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3B%20%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereader%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EreadAsBinaryString%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3EfirstInput%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3ErawData%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Ereader%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eresult%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ealert%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22Total%20File%20name%20%22%3C%2FSPAN%3E%20%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3EfirstInput%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ename%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ealert%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22File%20content%20%22%3C%2FSPAN%3E%20%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3ErawData%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E)%3B%26nbsp%3B%20%26nbsp%3B%2F%2F%20This%20is%20always%20empty!!!%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eattachments%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Epush%3C%2FSPAN%3E%3CSPAN%3E(%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ename%3A%3C%2FSPAN%3E%20%3CSPAN%3EfirstInput%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ename%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Econtent%3A%20rawData%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%2F%2F%26nbsp%3BrawData%26nbsp%3Bis%20empty.%20If%20I%20hard%20coded%20content%20like%20%22My%20test%22.%20The%20code%20is%20working%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%2F%2F%20Question%20%231%20%3A%20How%20to%20set%20the%20content%3F%3F%3F%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Esp%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eweb%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elists%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetByTitle%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22EmployeeList1%22%3C%2FSPAN%3E%3CSPAN%3E).%3C%2FSPAN%3E%3CSPAN%3Eitems%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetById%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetElementById%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'EmployeeId'%3C%2FSPAN%3E%3CSPAN%3E)%5B%3C%2FSPAN%3E%3CSPAN%3E%22value%22%3C%2FSPAN%3E%3CSPAN%3E%5D).%3C%2FSPAN%3E%3CSPAN%3EattachmentFiles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EaddMultiple%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Eattachments%3C%2FSPAN%3E%3CSPAN%3E).%3C%2FSPAN%3E%3CSPAN%3Ethen%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Ev%3C%2FSPAN%3E%20%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3CDIV%3E%2F%2FQuestion%20%232%3A%20How%20to%20display%20exceptions%3F%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Ealert%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Ev%3C%2FSPAN%3E%3CSPAN%3E)%3B%26nbsp%3B%20%26nbsp%3B%2F%2F%20Never%20invoked.%26nbsp%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ealert%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22Record%20with%20Employee%20ID%20%3A%20%22%3C%2FSPAN%3E%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetElementById%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'EmployeeId'%3C%2FSPAN%3E%3CSPAN%3E)%5B%3C%2FSPAN%3E%3CSPAN%3E%22value%22%3C%2FSPAN%3E%3CSPAN%3E%5D%20%3C%2FSPAN%3E%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3E%22%20File%20Attached%20!%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3EI've%20included%20the%20two%20questions%20inline.%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EQuestion%20%231%20%3A%20How%20to%20set%20the%20content%3F%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EQuestion%20%232%3A%20How%20to%20display%20exceptions%20for%20PnP%20JS%3F%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EThanks%20in%20advance.%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-315308%22%20slang%3D%22en-US%22%3ERe%3A%20PnP%20JS%20to%20attach%20files%20to%20list%20item%20from%20SharePoint%20framework%20issue%20-%20cannot%20pass%20file%20content%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-315308%22%20slang%3D%22en-US%22%3E%3CP%3EIssue%20resolved%20after%20I%20changed%20the%20code%20to%20process%20files%20in%20input%20file%20element%20change%20event.%20All%20thse%20code%20will%20be%20outside%20default%20class.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20code%20looks%20like%20below.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3EfileInfos%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20%5B%5D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%24%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E).%3C%2FSPAN%3E%3CSPAN%3Eready%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Efunction%3C%2FSPAN%3E%3CSPAN%3E()%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%24%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'%23inputfile'%3C%2FSPAN%3E%3CSPAN%3E).%3C%2FSPAN%3E%3CSPAN%3Eon%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'change'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Efunction%3C%2FSPAN%3E%3CSPAN%3E()%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EprocessFile%3C%2FSPAN%3E%3CSPAN%3E()%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%3B%20%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%3B%20%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%2F%2F%20Try%20this%20later%20%3CA%20href%3D%22https%3A%2F%2Fwww.javascripture.com%2FFileReader%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.javascripture.com%2FFileReader%3C%2FA%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Efunction%3C%2FSPAN%3E%20%3CSPAN%3EprocessFile%3C%2FSPAN%3E%3CSPAN%3E()%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3Einput%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20(%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EHTMLInputElement%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CSPAN%3Edocument%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetElementById%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'inputfile'%3C%2FSPAN%3E%3CSPAN%3E))%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3EfileCount%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Einput%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Efiles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elength%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Econsole%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elog%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3EfileCount%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Efor%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3Ei%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E0%3C%2FSPAN%3E%3CSPAN%3E%3B%20%3C%2FSPAN%3E%3CSPAN%3Ei%3C%2FSPAN%3E%20%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%20%3CSPAN%3EfileCount%3C%2FSPAN%3E%3CSPAN%3E%3B%20%3C%2FSPAN%3E%3CSPAN%3Ei%3C%2FSPAN%3E%3CSPAN%3E%2B%2B%3C%2FSPAN%3E%3CSPAN%3E)%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3EfileName%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Einput%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Efiles%3C%2FSPAN%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3Ei%3C%2FSPAN%3E%3CSPAN%3E%5D.%3C%2FSPAN%3E%3CSPAN%3Ename%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Econsole%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elog%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3EfileName%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3Efile%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Einput%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Efiles%3C%2FSPAN%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3Ei%3C%2FSPAN%3E%3CSPAN%3E%5D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Evar%3C%2FSPAN%3E%20%3CSPAN%3Ereader%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Enew%3C%2FSPAN%3E%20%3CSPAN%3EFileReader%3C%2FSPAN%3E%3CSPAN%3E()%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereader%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eonload%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CSPAN%3Efunction%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Efile%3C%2FSPAN%3E%3CSPAN%3E)%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%20%3CSPAN%3Efunction%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Ee%3C%2FSPAN%3E%3CSPAN%3E)%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Econsole%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elog%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Efile%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ename%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EfileInfos%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Epush%3C%2FSPAN%3E%3CSPAN%3E(%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22name%22%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Efile%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ename%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%2F%2F%22content%22%3A%20reader.result%20%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%22content%22%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Ee%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Etarget%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eresult%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%3B%20%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Econsole%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elog%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3EfileInfos%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%20(%3C%2FSPAN%3E%3CSPAN%3Efile%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Ereader%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EreadAsArrayBuffer%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Efile%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%20%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

I try to use PnP JS to attach files to list item from SharePoint framework and have issue to pass file content.

 

0. I'm not using any javascript framework to simplify the demo

 

1. Here is the HTML in the render() 

...

<input id="inputfile" type="file" multiple />                    // Files to attach
<input id="EmployeeId" placeholder="EmployeeId" />  // Item ID for file attachment
...
<button id="AttacheFiles" type="submit" >Attache Files</button>
 
2. Added event 
private AddEventListeners() : void{
 
document.getElementById('AttacheFiles').addEventListener('click',()=>this.AttachFiles());
}
 
3. Handle event code.
 
private AttachFiles()
{
var files = document.getElementById('inputfile');
 
var attachments: AttachmentFileInfo[] = [];
var fileCount = (<HTMLInputElement>document.getElementById('inputfile')).files.length;
 
for (var i = 0; i < fileCount; i++) {
let firstInput = (<HTMLInputElement>document.getElementById('inputfile')).files[i];

var reader = new FileReader();
var rawData;
reader.onload = function(e) {
rawData = reader.result;   //This should be updated after reader.readAsBinaryString(firstInput);
};
reader.readAsBinaryString(firstInput);

rawData  = reader.result;
alert("Total File name " + firstInput.name);
alert("File content " + rawData );   // This is always empty!!!
 
attachments.push({
name: firstInput.name,
content: rawData     // rawData is empty. If I hard coded content like "My test". The code is working
 
// Question #1 : How to set the content???
});
 
}

 
sp.web.lists.getByTitle("EmployeeList1").items.getById(document.getElementById('EmployeeId')["value"]).attachmentFiles.addMultiple(attachments).then(v => {
//Question #2: How to display exceptions?
alert(v);   // Never invoked. 
});
 
alert("Record with Employee ID : "+ document.getElementById('EmployeeId')["value"] + " File Attached !");
}
 
 
I've included the two questions inline.
Question #1 : How to set the content?
Question #2: How to display exceptions for PnP JS?
 
Thanks in advance.
1 Reply

Issue resolved after I changed the code to process files in input file element change event. All thse code will be outside default class.

 

The code looks like below.

 

var fileInfos = [];
$(document).ready(function() {
$('#inputfile').on('change', function() {
processFile();
});
});
function processFile() {
var input = (<HTMLInputElement>document.getElementById('inputfile'));

var fileCount = input.files.length;
console.log(fileCount);
for (var i = 0; i < fileCount; i++) {
var fileName = input.files[i].name;
console.log(fileName);
var file = input.files[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
console.log(file.name);
fileInfos.push({
"name": file.name,
//"content": reader.result
"content": e.target.result
});
console.log(fileInfos);
};
}) (file);

reader.readAsArrayBuffer(file);
}