Hi ,
I am currently working on a project where I need to integrate a file upload feature within SuiteCRM. Here is a summary of what i have done so far and the assistance we need:
What I Have Implemented:
Drag-and-Drop Widget:
- We have successfully created a drag-and-drop widget in the sidebar using the
ngx-file-drop
library. - This widget allows users to drag files and drop them for upload.
- The drag-and-drop documents module helps CRM users to create new documents just by dropping the files into the Drag-and-Drop sidebar widget present in the Detail view. Users can upload multiple files at a time.
Where I Need Help:
- I’m unsure how to handle the actual file upload process within SuiteCRM.
- Should I use a separate endpoint or leverage the existing API for creating documents?
- How can I create a new document record with the uploaded file and link it to the current account ?
Code Snippets:
/var/www/html/SuiteCRM/extensions/defaultExt/app/src/containers/sidebar-widget/drag-drop/drag-drop-sidebar-widget.component.html
`<scrm-widget-panel [title]="'Drag and Drop Widget'">
<div class="drag-drop-sidebar-widget" widget-body>
<ngx-file-drop (onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
<div class="file-drop-content">
<button (click)="openFileSelector()">Select Files</button>
<p>Drag and drop files here or click to select files</p>
</div>
</ng-template>
</ngx-file-drop>
</div>
</scrm-widget-panel>
`
/var/www/html/SuiteCRM/extensions/defaultExt/app/src/containers/sidebar-widget/drag-drop/drag-drop-sidebar-widget.component.ts
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BaseWidgetComponent } from 'core';
import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';
@Component({
selector: 'scrm-drag-drop-sidebar-widget',
templateUrl: './drag-drop-sidebar-widget.component.html',
styles: []
})
export class DragDropSidebarWidgetComponent extends BaseWidgetComponent implements OnInit, OnDestroy {
@Input() accountId: string;
public files: NgxFileDropEntry[] = [];
private uploadUrl = 'http://localhost/SuiteCRM/public/legacy/Api/V8/module/Documents';
constructor(private http: HttpClient) {
super();
}
ngOnInit() {}
ngOnDestroy() {}
public dropped(files: NgxFileDropEntry[]) {
this.files = files;
for (const droppedFile of files) {
if (droppedFile.fileEntry.isFile) {
const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
fileEntry.file((file: File) => {
this.uploadFile(file, this.accountId);
});
} else {
const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
console.log(droppedFile.relativePath, fileEntry);
}
}
}
private uploadFile(file: File, accountId: string) {
const formData: FormData = new FormData();
formData.append('file', file, file.name);
formData.append('parent_type', 'Accounts');
formData.append('parent_id', accountId);
this.http.post(this.uploadUrl, formData).subscribe(response => {
console.log('File uploaded successfully', response);
}, error => {
console.error('File upload error', error);
});
}
public fileOver(event: any) {
console.log(event);
}
public fileLeave(event: any) {
console.log(event);
}
}
I’m using SuiteCRM version8.I’ve reviewed the API documentation but couldn’t find a clear approach for file uploads.`Any insights or suggestions on how to achieve file upload and document creation with the SuiteCRM API would be greatly appreciated. Thanks!