I have an React/Electron app that shows remote files that are stored on the cloud. I would like to allow users to drag and drop these files from my app into other applications, such as Dropping into the Windows Desktop, or into Outlook Draft Email or paste into Slack. I have been following the Electron tutorial for native file drag and drop, which works if the file is stored on disk. Now, a really quick workaround exists in the tutorial, I can create a temporary file on disk and have a WriteStream write to the disk using an http request, something like:
const file = path.join(__dirname, 'picture.jpg');
const fileStream = fs.createWriteStream(file);
https.get('https://website.com/picture.jpg', (response) => {
response.pipe(fileStream);
});
...
document.getElementById('remote_file').ondragstart = (event) => {
event.preventDefault()
window.electron.startDrag('picture.jpg')
}
which is all fine and dandy, except that there might be hundreds of files being rendered on screen, I don't want to write all of these to disk. In addition, what do I do if the file is pretty large and can't be downloaded in that time? I would like the functionality to basically begin downloading the file from disk when the dragStart event handler is called and make sure that the drop operation happens once the file is downloaded from the cloud.
I also tried using JS's drag and drop on the React component:
onDragStart={(e) => {
e.dataTransfer.setData("DownloadURL", [
"application/octet-stream:picture.jpg:https:website.com/image.jpg",
]);
}
which at least allows me to drag and drop the file into the windows desktop and file explorer. However, this doesn't work when trying to drag it into something like google drive, slack, or an outlook draft email.
Link to Electron Native Drag and Drop tutorial: https://www.electronjs.org/docs/latest/tutorial/native-file-drag-drop#native-file-drag--drop
Related
I have a C++ app that uses WebView2 as UI component. Native-side code and web-side code communicate via a host object. That works great, but:
I want to let the user (for example) drag and drop files to a drop box on the UI, hand the path names over to the client C++ app, which should read and process the files. Butfor this I would need the full path names (on the host).
I have currently no example for the other way round, but I could imagine to hand a path name to JavaScript which should the read and process this file.
I couldn't find any documentation neither on WebView2, nor in the File Aystem Access API on the Browser side (Java Script).
I know that there are security issues for real web apps, but - hey - this is a native component anyway!
So here is my code in JavaScript:
butOpenFile.addEventListener('click', async () => {
// Destructure the one-element array.
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
How can I use *fileHandle *to retrieve the full path of the selected file, that the hostObject can use to open and process the file? (Note: fileHandle.name only has the name.ext-part of the path)
I'm working with an extremely old database system containing people and associated PDFs. I can access most data over a webbrowser, however PDFs cannot be requested via web-api - I do however have the liberty of loading any javascript library, and use chrome webdev console.
I want to get a proof of principle working, where I can load a person's PDFs. But I'm not quite sure what the best approach is.
Idea to upload a file to the website's local storage in my browser (since it's viewed several times). However I seem to be lacking a good library to save/load files from the cache directory. This library wasn't updated since 2016 and Filesaver.js doens't seem to be keen on loading the files after saving. Using a fully-fledged database implementation seems overkill (most files will be <= 5-10MB)
Loading a file from local storage (even if dir is added to workspace in chrome) seems completely impossible, that would've been an alternative
adding the local file path to a <a href=""> element did not work in chrome
Is there a feasible approach to manage/associate PDF files on my local drive with the website I'm working with (and have full client-side control, i.e. can load any library)?
Note: Access is restricted, no chrome addons can be used and chrome cannot be started using custom flags
I don't exactly know what you are asking for, but this code will get all the pdfs in a selected directory and display them and also makes a list of all the file objects. This will only work in a "secure context" and on chrome
(it also wont run in a sandbox like a stackoverflow code snippet)
js
let files = [];
async function r() {
for await (const [_, h] of (await window.showDirectoryPicker()).entries()) files.push(await h.getFile());
files = files.filter(f => f.type === "application/pdf");
for (const f of files) {
let e = document.createElement("embed");
e.src = URL.createObjectURL(f), e.type = f.type;
document.body.appendChild(e);
}
}
html
<button onclick="r()">read PDFs</button>
also you can probably use this if you need to send the local PDF somewhere
not sure this answers the question but i hope it helps
Since ActiveX controls are no longer available browsers can display a PDF or a user can download the pdf.
For any more control over that I suspect you could try render the pdf using a JavaScript library like https://mozilla.github.io/pdf.js/
For full control you wont be in a position to control the PDF version, you could alternatively render the PDFs to images on the server and display image versions of the pages.
I am trying to create a simple folder uploader (client side). The minimum required functionality is to be able to select a folder/file(s) and show on the browser the information of all files. I have used a simple input element:
const ReadFolder = () => {
const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => console.log(event.target.files);
return (
<input
type='file'
directory
webkitdirectory
multiple
onChange={onFileChange}
/>
);
}
The onFileChange function just shows the info of received file list.
It works fine for small folders, but when I try to upload a git repository from my computer (which has a large nested folder hierarchy), the browser window becomes unresponsive for around 2 minutes before the onChange event is reported. Is there a way I can avoid this unresponsiveness? Can I push this processing to background (or to a web worker)?
This processing may not even be done by the browser's process, but rather by the OS directly, which is building a list of metadata for all the files in the directory and its sub-directories. That is a lot of I/O.
You are not the first one to report such an issue with some configurations (OS or file system, it's still unclear to me) having trouble to generate files' metadata when being asked by the browser through the <input type="file">.
So moving whatever to a Worker would most probably not help at all. My educated guess would be that your HDD is the bottleneck, not the CPU.
What you can try in supporting browsers, is to request a handle over the directory rather than requesting all the files in a single call.
The new File System API has a showDirectoryPicker method which would allow you to gain access to the directory, and to read only the files you need, and if you need them all, to do this in a streaming manner, allowing your page to render part of what has already been parsed while it is being parsed.
You can see a live demo here, which will currently only work in Chrome.
Note that directories gotten from a drag&drop event should not be read entirely either, and that you should also be able to navigate them by batches, with better browser support, so if you can, try to make your UI force your users to use this method instead.
I've converted an existing web application (HTML5, JS, CSS, etc.) into a Windows UWP app so that (hopefully) I can distribute it via the Windows Store to Surface Hubs so it can run offline. Everything is working fine, except PDF viewing. If I open a PDF in a new window, the Edge-based browser window simply crashes. If I open an IFRAME and load PDFJS into it, that also crashes. What I'd really like to do is just hand off the PDF to the operating system so the user can view it in whatever PDF viewer they have installed.
I've found some windows-specific Javascript APIs that seem promising, but I cannot get them to work. For example:
Windows.System.Launcher.launchUriAsync(
new Windows.Foundation.Uri(
"file:///"+
Windows.ApplicationModel.Package.current.installedLocation.path
.replace(/\//g,"/")+"/app/"+url)).then(function(success) {
if (!success) {
That generates a file:// URL that I can copy into Edge and it shows the PDF, so I know the URL stuff is right. However, in the application it does nothing.
If I pass an https:// URL into that launchUriAsync function, that works. So it appears that function just doesn't like file:// URLs.
I also tried this:
Windows.ApplicationModel.Package.current.installedLocation.getFileAsync(url).then(
function(file) { Windows.System.Launcher.launchFileAsync(file) })
That didn't work either. Again, no error. It just didn't do anything.
Any ideas of other things I could try?
-- Update --
See the accepted answer. Here is the code I ended up using. (Note that all my files are in a subfolder called "app"):
if (location.href.match(/^ms-appx:/)) {
url = url.replace(/\?.+/, "");
Windows.ApplicationModel.Package.current.installedLocation.getFileAsync(("app/" + url).replace(/\//g,"\\")).then(
function (file) {
var fn = performance.now()+url.replace(/^.+\./, ".");
file.copyAsync(Windows.Storage.ApplicationData.current.temporaryFolder,
fn).then(
function (file2) {
Windows.System.Launcher.launchFileAsync(file2)
})
});
return;
}
Turns out you have to turn the / into \ or it won't find the file. And copyAsync refuses to overwrite, so I just use performance.now to ensure I always use a new file name. (In my application, the source file names of the PDFs are auto-generated anyway.) If you wanted to keep the filename, you'd have to add a bunch of code to check whether it's already there, etc.
LaunchFileAsync is the right API to use here. You can't launch a file directly from the install directory because it is protected. You need to copy it first to a location that is accessible for the other app (e.g. your PDF viewer). Use StorageFile.CopyAsync to make a copy in the desired location.
Official SDK sample: https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/AssociationLaunching
I just thought I'd add a variation on this answer, which combines some details from above with this info about saving a blob as a file in a JavaScript app. My case is that I have a BLOB that represents the data for an epub file, and because of the UWP content security policy, it's not possible simply to force a click on a URL created from the BLOB (that "simple" method is explicitly blocked in UWP, even though it works in Edge). Here is the code that worked for me:
// Copy BLOB to downloads folder and launch from there in Edge
// First create an empty file in the folder
Windows.Storage.DownloadsFolder.createFileAsync(filename,
Windows.Storage.CreationCollisionOption.generateUniqueName).then(
function (file) {
// Open the returned dummy file in order to copy the data to it
file.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (output) {
// Get the InputStream stream from the blob object
var input = blob.msDetachStream();
// Copy the stream from the blob to the File stream
Windows.Storage.Streams.RandomAccessStream.copyAsync(input, output).then(
function () {
output.flushAsync().done(function () {
input.close();
output.close();
Windows.System.Launcher.launchFileAsync(file);
});
});
});
});
Note that CreationCollisionOption.generateUniqueName handles the file renaming automatically, so I don't need to fiddle with performance.now() as in the answer above.
Just to add that one of the things that's so difficult about UWP app development, especially in JavaScript, is how hard it is to find coherent information. It took me hours and hours to put the above together from snippets and post replies, following false paths and incomplete MS documentation.
You will want to use the PDF APIs https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/PdfDocument/js
https://github.com/Microsoft/Windows-universal-samples/blob/master/Samples/PdfDocument/js/js/scenario1-render.js
Are you simply just trying to render a PDF file?
by using
dataTransfer.setData("DownloadURL", "application/octet-stream:fileName.bin:data:application/octet-stream;base64,eNcoDEdFiLEStuFf");
we can download file (written in uri format) to desktop (or any other folder).
but how to use uri format to drag into other apps.
e.g. drag pdf content in uri format from html page to adobe reader, so that it can render the content.
data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nGWSQW4DIQxF95zCJ6BgwDDH6BGqkZIsJou295cKxjaMqkSZ/wX+9vPk2wUYn58nfHwFeP46qj4eB9Tm09HgDZhVX4DoKUf1GD0FhFp9Koc5glO0A8m6IKJvIW4++pzNx8B5 RD6SmcwVp3gHSUvnefQta0zgq9IjSF0hkReUOSFbB6WtANEz+7Qj7EU6G+vmS2FNB1PG5EM6nNnMdaf6voTL9GwuEbK6+5JPBy9XEl8v/PuGWPjGtJdaQnkTctv8y8nCIvHjbSykS2j7XpfnpcuG5lhu7E4m7O+S9okv9TXJZBJo/v8kD5dnTRpgiKqv8T/paxwaAyTeKStd59DFV0K52f8FM1RDSF62NlDYXLlKfG78kKjp3Oqix7O/liKsqc9OtTMYUR/QiLo2oq7HdxlcRJhuRJh3Isx3Isx3IvEyskQpkXXR47gT9dZr6o2IGYwo50XUtRF1PQKKEsl1JtIGQqTdJaTdicQbkXh91BuRddHjshP1mdbUGxEzPNyn+wPIlfKYCmVuZHN0cmVhbQplbmRvYmoKNCAwIG9iagogICAzOTEKZW5kb2JqCjIgMCBvYmoKPDwKICAgL0V4dEdTdGF0ZSA8PAogICAgICAvYTAgPDwgL0NBIDEgL2NhIDEgPj4KICAgPj4KPj4KZW5kb2JqCjUgMCBvYmoKPDwgL1R5cGUgL1BhZ2UKICAgL1BhcmVudCAxIDAgUgogICAvTWVkaWFCb3ggWyAwIDAgODAgODAgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9JIHRydWUKICAgICAgL0NTIC9EZXZpY2VSR0IKICAgPj4KICAgL1Jlc291cmNlcyAyIDAgUgo+PgplbmRvYmoKMSAwIG9iago8PCAvVHlwZSAvUGFnZXMKICAgL0tpZHMgWyA1IDAgUiBdCiAgIC9Db3VudCAxCj4+CmVuZG9iago2IDAgb2JqCjw8IC9DcmVhdG9yIChjYWlybyAxLjE0LjEgKGh0dHA6Ly9jYWlyb2dyYXBoaWNzLm9yZykpCiAgIC9Qcm9kdWNlciAoY2Fpcm8gMS4xNC4xIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQo+PgplbmRvYmoKNyAwIG9iago8PCAvVHlwZSAvQ2F0YWxvZwogICAvUGFnZXMgMSAwIFIKPj4KZW5kb2JqCnhyZWYKMCA4CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDc4OSAwMDAwMCBuIAowMDAwMDAwNTA1IDAwMDAwIG4gCjAwMDAwMDAwMTUgMDAwMDAgbiAKMDAwMDAwMDQ4MyAwMDAwMCBuIAowMDAwMDAwNTc3IDAwMDAwIG4gCjAwMDAwMDA4NTQgMDAwMDAgbiAKMDAwMDAwMDk4MSAwMDAwMCBuIAp0cmFpbGVyCjw8IC9TaXplIDgKICAgL1Jvb3QgNyAwIFIKICAgL0luZm8gNiAwIFIKPj4Kc3RhcnR4cmVmCjEwMzMKJSVFT0YK
if it is possible, how to implement ?
dataTransfer.setData("application/pdf","content here ");
To achive that:
You must be sure that client has the application you want to use. Many user use different application to open a pdf file.
The application that you want to use must registered itself to Operating System for incoming request. (For example on MacOS, App Store application registered itself and you can open an application page by clicking the html link)
if Adobe Reader is the application you want to use, you can search about if it has some future like this.
if you want to hide pdf files from search robots you can create them in your server temp folder and create a random link to them. After client use it, you can simply delete.
check out the Electron API documentation for Dragging files out of a windows (replicated here for archiving):
In web page:
item
<script type="text/javascript" charset="utf-8">
document.getElementById('drag').ondragstart = (event) => {
event.preventDefault()
ipcRenderer.send('ondragstart', '/path/to/item')
}
</script>
In the main process:
const {ipcMain} = require('electron')
ipcMain.on('ondragstart', (event, filePath) => {
event.sender.startDrag({
file: filePath,
icon: '/path/to/icon.png'
})
})