How do I handle local file uploads in electron? - javascript

I'm having a hard time figuring out how to approach file uploads in atom electron. I would post code but I don't even know where to begin with this one.
In a standard web app I would post from the client to the server, either via a standard postback or using an ajax request. I have some pretty cool solutions for that. But in the case of electron, I'm not sure where or how to "post" the file back. I guess I just want to access the contents of my <input type='file' /> from node.js. How do I do this?
I could post to the browser process, but I don't know what the "address" would be. Or do I need to create a separate "page" in my app just to accept form posts? My background in web-dev is probably blinding me to some obvious answer, can someone help?
EDIT
Just to add a little more context, I have a .csv file which I'd like to allow the user to upload. I will then process this using node-csv and insert each returned row into the app's nedb datastore.

If you're going to process the file on the user's machine then there is no need to upload the file anywhere, it's already exactly where you need it. All you need to do is popup a dialog to allow the user to browse their file system and select the file they want your app to process. You can create a button and call dialog.showOpenDialog when the user presses it, that will get you a filename and you can then use Node's fs.readFile to read it from disk, then you can go ahead and process the contents in whichever way you want.

Related

Editing local file after hitting button

I'm trying to make a comment section for a locally hosted site, basically I am trying to make it so when you hit the submit button, it checks for a existing file, if it exists, then it will edit it, and put the comment into it, if it doesn't exist, then it'll create the file, and save the data, I'm trying to save it as JSON if possible, any ideas?
The only things I can find are to let the visitor save to the computer, which isn't what I'm trying to do, I want the site to only be able to access it. And I'm trying to not set up a server if possible.
You will definitely need some kind of backend server to do that since JavaScript runs on the client side. I can only recommend taking a look at a NodeJS http server that changes the files according to GET or POST requests or using said GET and POST requests in combination with a server-side PHP script.

Is it possible to capture downloaded file from url?

Couldn't really make a descriptive title, so what I'm after is this:
Our users would need to log in to a service they use (it's something like facebook, so they are logged in nearly all of the time), go to a page, select a menu, click on an item, download a file, and upload it back to our site.
What I've tried is to provide a direct link to the equivalent of the export button in the other service, but they have done their job properly, so cross domain requests, etc are not an option - therefore this returns a 400 BAD REQUEST. What I can do is to set up an <a href="link-to-file" download></a> on this element, I trigger a click from our client side javascript, and the users is now able to save nearly all the steps, and just has to reupload the file that has been downloaded.
Now the question: Is it possible that instead of triggering a download for the client's machine, to save the file in memory, to directly upload it to our server?
Or if anyone has any alternatives, that'd be appreciated.
Just for reference, http requests didn't work, as they are signed in to the other app with cookie based authentication, and I don't want to touch that stuff, as It'd possibly give our app permission to act in the name of anyone who clicks a button, and that's not what we're after.
Disclaimer: This might sound shady at first, but we are really just trying to save steps for the less tech-savvy users, so they could import their already existing data easier.
What I can do is to set up an <a href="link-to-file" download></a>
ok so this is what i understood.
you are trying to put a download button or something like that.
i think you can do it this way:
since you have the link to the file_to_download_link (link_to_file)
when the user clicks the download button or link, send the link_to_file to the server with ajax. and in server you can download the file or do what ever you want with the link. (you don need to upload it again. just download)

Upload blob to dropbox from client-side javascript

I have an app that runs in the client browser and doesn't have any server side (http/js is served, but nothing posts to the server). the app is redeployed on many servers (iis, apache, nginx, sometimes localhost, sometimes on an intranet) and are served using http (not https). My app generates files such as zip files and pdf's in the clients browser as blobs BEFORE I want to save, so having them navigate away on the same page then back to the app defeats the purpose; and I can't post the generated data to dropbox anymore, since they have to start over... I want to be able to send these blobs directly to files in the end users dropbox (and later google drive).
https://www.dropbox.com/developers-v1/dropins/saver performs exactly as I would like. It pops up. It lets the user authenticate in the popup. It lets the user choose where they want to put my file. But I can't send it a data uri, or base64-encoded data, or a bytearray, or whatever. It only works with files previously saved somewhere accessible on the net. So it does not work for me.
https://www.newfangled.com/direct-javascript-dropbox-api-usage/ shows how I could embed the oauth data, which I don't have.
https://blogs.dropbox.com/developers/2013/12/writing-a-file-with-the-dropbox-javascript-sdk/ seems like it should work, except that it's trying to perform an oauth session and it uses the same window as my app (which is undesired).
My current tabs I'm looking at (includes entries from a few years ago, so things might have since changed). Some articles indicate that it isn't possible. Other articles incidate that it IS possible - i mean this particular comment https://github.com/dropbox/dropbox-js/issues/144# doesn't help me much. Neither does "I'll be sure to pass this along as feedback" - was it passed along? To whom?
https://github.com/dropbox/dropbox-js/issues/144
https://stackoverflow.com/questions/30094403/save-input-text-to-dropbox
https://blogs.dropbox.com/developers/2015/06/programmatically-saving-a-url-to-dropbox/
How can I upload files to dropbox using JavaScript?
upload file to dropBox using /files_put javascript
https://github.com/morrishopkins/DropBox-Uploader/blob/master/js/reader.js
https://www.dropbox.com/developers/saver
https://www.dropboxforum.com/hc/en-us/community/posts/202339309-Can-I-save-a-JSON-stream-object-to-Dropbox-file-with-Dropbox-Post-Rest-API-
https://github.com/smarx/othw
Can Dropbox Saver accept data from createObjectURL()?
It sounds like the code from https://blogs.dropbox.com/developers/2013/12/writing-a-file-with-the-dropbox-javascript-sdk/ works fine for you, but you want to do the auth in a separate browser window/tab.
If so, I'd suggest just changing that code to use the Popup auth driver instead.

Save text file on client machine using javascript

I want to create text file on client machine and then want to write in that file.
And while saving that file i want to ask user where he want to save file i.e. want to ask by save dialog box....
Thank in advance....
That is not possible with JavaScript for security reasons. You cannot create files on the client machine, since JavaScript doesn't have write permission in that environment.
What you could do as a work around is to send the text that you want to store through an Ajax-request to the web server, which in turn can generate a the text-file for the user to download to a desired location. Not as smooth, but at least it is a work around.
You cannot write back using JavaScript alone. You would have to perform a GET or POST call to be able to prompt a save.
Related question Read/write to file using jQuery
You can do it through flash "proxy" that uses FileReference class and communicating with flash using ExternalInterface
The data I wanted to write is already available at the client side (queried from server) and stored in Javascript arrays.
I have done this using 'Data Tables' which is a plug-in for the jQuery Javascript library. You can store the data in .csv, excel or also .pdf. You can access this nice plug-in at http://datatables.net/

Click ok or cancel of file download in JavaScript

Is there any way to detect if a user has selected ok or cancel to download a file in JavaScript? For instance if I have a link that points to a file and a user clicks on it download that will automatically start the download of the file, but how do I know if the user has been prompted to do download or not?
If they've clicked on it you can be pretty sure they'll be prompted to download it. To find out if they've downloaded it though, you'd need to implement that on the backend. There is no way the webpage itself will be able to know.
On the backend you'd have to monitor the communication with the client via the web server and see how much data has been transferred to the client and compare that with the total size of the file.
You could then make this data available on the server and using some sort of XMLHttpRequest or websocket, the page could update with a progress bar if that's what you're looking for.

Categories

Resources