I'm trying to find how to create a file upload feature for an spfx webpart that uploads to the attachments on a SharePoint list item. I can successfully upload, but the user should be able to click on the SP list item (it then brings up the modal showing the attached files) and then allow them to delete an attachment, then finally click an update button which adds the new file and/or removes the unwanted file.
At the moment I'm using this to add files:
private _addFile = (event) => {
let resultFile = event.target.files;
console.log(resultFile, 'resultFile');
let fileInfos = [];
for (var i = 0; i < resultFile.length; i++) {
var resfile = resultFile[i];
console.log(resfile, 'resfile');
var reader = new FileReader();
reader.onload = ((file) => {
return (e) => {
//Push the converted file into array
fileInfos.push({
"name": file.name,
"content": e.target.result
});
this.setState({
addedFiles: [...this.state.addedFiles, ...[file.name]]
},() => {
if(this.state.addedFiles[0]){
this.setState({
FileAttachment1: fileInfos[0].name
});
}
if(this.state.addedFiles[1]){
this.setState({
FileAttachment2: fileInfos[1].name
});
}
if(this.state.addedFiles[2]){
this.setState({
FileAttachment3: fileInfos[2].name
});
}
});
};
})(resfile);
reader.readAsArrayBuffer(resfile);
// @ts-ignore
const fileListToArr = Array.from(resultFile);
if(this.state.fileArray){
this.setState({
fileArray: fileListToArr
}, () => {
console.log(this.state.fileArray, 'this.state.fileArray');
});
}
this.setState({
fileInfos,
});
}
}
I'm using this to retrieve files (when the user clicks the SP item):
let attachmentName = sp.web.lists.getByTitle("MyList").items.getById(sid);
attachmentName.attachmentFiles.get().then((files)=>{
this.setState({
fileInfos: files
});
And I have a delete icon next to each file in the list which picks up the id of the deleted item, here's the JSX for one of the uploaded items:
<p>{this.state.FileAttachment1 ? this.state.FileAttachment1 : null}
{this.state.FileAttachment1 ? <div className={styles.editIcon}><Icon iconName="Delete" id={'att1'} onClick={this._removeFile}/></div> : null }
</p>
I've tried this to remove the files:
private _removeFile = (ev) => {
const cid = ev.target.id;
console.log(cid, 'cid'); //this gives the id for the selected file.
console.log(this.state.fileInfos);
let filteredArray = this.state.fileInfos.filter(item => );
this.setState({
fileInfos: filteredArray,
},() =>
{console.log(this.state.fileInfos, 'state.fileInfos');});
if(cid == 'att1'){
this.setState({
});
}
if(cid == 'att2'){
this.setState({
});
}
if(cid == 'att3'){
this.setState({
});
}
}
As you can see on that last function I've been trying to use a filter to remove the item from the array fileInfos, but whenever I click on delete to remove a file it's not removing it from the fileInfos array in state.
Has anyone got a better solution or better yet, a better file management system I could use? PS. I know it's frowned upon to use file attachments on list items.
