We Keep Coding

How can I prompt user to upload file from within a PrimeNG menuItem in angular

I have a menu item like this
items = [{
label: 'Upload', icon: 'pi pi-plus', command: (event) => { //get the event.target.file and pass it into a service that will manage the rest},
...
}]
So in the Html I am using the <p-menu> like this
<p-menu [model]="items"></p-menu>
And all the labels and icons are being displayed correctly. But how do I get the upload to open a prompt for file upload like a <input type='file'> so that I can get the event.target.file to pass to the service being called in the command?

As far as my research goes there is no feature in PrimeNg that makes this easier.
Inorder to prompt the user for a file upload I had to create an input file type and then get the files after calling the click() event on it
So in the menuItem I call the prompt which then calls the service.
items = [{label: 'Upload', icon: 'pi pi-plus', command: () => {upload_prompt( )}]
upload_prompt( ): void {
const input = document.createElement( 'input' );
input.type = 'file';
input.multiple = true;
input.onchange = () => {
let file = input.files as FileList;
file_upload_service( file )
}
input.click()
}
Hope this helps someone.

Is there any way to change the title and save type of file dialog on electron?

I've created a button for downloading and saving a file returned from an api endpoint.
In common browser, after clicking the button, a save file dialog appears with title Save As and Save as type displayed by file's extension. But in electron, the title seems to be a file url (in my case it shows blob://https:... cause mine is created with URL.createObjectURl).
So is that any options I need to set to a tag to make the dialog title is Save As and correct the save type of file (without using native dialog of electron)?
...
<a hidden href='/' ref={downloadRef}>download</a>
<button onClick={handleSaveFile}>download</button>
...
const handleSaveFiles = (file: Blob, fileName: string): void => {
const fileDownloadUrl = window.URL.createObjectURL(file);
if (downloadRef.current) {
downloadRef.current.href = fileDownloadUrl;
downloadRef.current.download = fileName;
downloadRef.current.click();
}
};

Actually, the dialog opened when clicking that button already is electron's dialog, then I could edit the title and filters by will-download event.
...
this.browserWindow = new BrowserWindow(option);
...
this.browserWindow.webContents.session.on('will-download', (event, item) => {
let filters = [];
switch (item.getMimeType()) {
case 'text/csv':
filters = [{ name: 'Microsoft Excel Comma Separated Values File', extensions: ['csv'] }];
break;
case 'application/octet-stream':
filters = [{ name: 'Zip archive', extensions: ['zip'] }];
break;
default:
break;
}
item.setSaveDialogOptions({
title: 'Save As',
filters: [...filters, { name: 'All Files', extensions: ['*'] }],
});
});
Refer to https://www.electronjs.org/docs/latest/api/download-item#downloaditemsetsavedialogoptionsoptions

React SPFx - Adding files to SharePoint list field using PnPjs

I'm building an application using SPFx Webpart with React. On one of my components I have a form that the user can fill out. I'm using PnPjs to push the user's responses into my list field. Everything works as expected.
I was looking at how to add a file or attachment field type to a list. I saw I can do it in the powerapps. So now in my "Product" list I have a field called attachments. When I attach files to that field from SharePoint's backend and then make a call to the list using PnPjs the attachment field does not return information about the files. But rather a boolean with a true or false.
pnp.sp.web.lists.getByTitle("Products").items.filter("Id eq '" + this.props.match.params.id + "'").top(1).get().then((items: any[]) => {
console.log(items);
}
So this works perfect and returns back the item which should have had the attachments from the code below. Now in my items console I get back Attachments: true or Attachments: false
I'm using react-dropzone to allow users to upload files. Using PnPjs how do I upload the files to that item?
Here is how I'm creating the item:
pnp.sp.web.lists.getByTitle("Requests").items.add({
Title: this.state.SuggestedVendor,
Client_x0020_Email: this.state.getEmail,
Created: this.state.startDate,
Attachments: //need help here
}
Here is my code for the dropdown files:
onDrop = (acceptedFiles) => {
console.log(acceptedFiles);
//Assuming this is where I do the logic
}
<Dropzone
onDrop={this.onDrop}
multiple
>
{({getRootProps, getInputProps, isDragActive}) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
{isDragActive ? "Drop it like it's hot!" : 'Click me or drag a file to upload!'}
</div>
)}
</Dropzone>
And here is the response I get back from console.log(acceptedFiles);:
[File]
0: File {path: "John-Hancock-signature.png", name: "John-Hancock-signature.png", lastModified: 1590783703732, lastModifiedDate: Fri May 29 2020 13:21:43 GMT-0700 (Pacific Daylight Time), webkitRelativePath: "", …}
length: 1
I found this documentation here on how to push the files : https://pnp.github.io/pnpjs/sp/files/

You have to create the item, and then add an attachment to it.
You can add an attachment to a list item using the add method. This method takes either a string, Blob, or ArrayBuffer. pnp documentation
onDrop = (acceptedFiles) => {
acceptedFiles.forEach(file => {
const reader = new FileReader()
reader.onabort = () => console.log('file reading was aborted')
reader.onerror = () => console.log('file reading has failed')
reader.onload = async () => {
// get file content
const binaryStr = reader.result
// assume we have itemId
let itemId = 1;
let request = await sp.web.lists.getByTitle("Requests").items.getById(itemId)();
await request.attachmentFiles.add("file2.txt", "Here is my content");
}
reader.readAsArrayBuffer(file)
})
}

Download document on the same page when using antd upload

I am using antd's upload component to allow a user to upload a document. Now after the user has uploaded it, I also want to allow him to download the attachment just uploaded. I know the documentation explains this to do in the following way:
import { Upload, Button, Icon } from 'antd';
const props = {
action: '//jsonplaceholder.typicode.com/posts/',
onChange({ file, fileList }) {
if (file.status !== 'uploading') {
console.log(file, fileList);
}
},
defaultFileList: [{
uid: '1',
name: 'xxx.png',
status: 'done',
response: 'Server Error 500', // custom error message to show
url: 'http://www.baidu.com/xxx.png',
}],
};
ReactDOM.render(
<Upload {...props}>
<Button>
<Icon type="upload" /> Upload
</Button>
</Upload>,
mountNode
);
But I want to allow the download on the same page and don't want to open a new window on click. How could I do this? Is there a better way to approach this?

The default behavior is to open the file in a new window.
You can override this behavior by providing an onPreview prop for Upload:
onPreview: A callback function, will be executed when file link or preview icon is clicked.
<Upload
//...
onPreview={handlePreview}
>
Now write your own logic to download the file in handlePreview. You can find many examples online on how to achieve that.
const handlePreview = (file) => {
console.log(file);
// write how you want to download
}

How I can test uploading files into `input[type="file"]` Vue.js?

I've wrote a custom input[type="file"] component.
And I'd like to write a unit test for the next situation:
Upload file to input
Read the file's name and write him to the tag span or another.
I wrote below test. But I think this is a wrong way to mock file in input.
it("check download file to input", () => {
const files = [
{
name: "test.png",
size: 50000,
type: "image/png"
}
];
const wrapper = mount(InputCropper);
const input = wrapper.find('input[type="file"]');
input.files = files;
input.trigger("change");
expect(input.files.length).to.equal(1);
});