Click ok or cancel of file download in JavaScript - 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.

Related

Upload image from frontend and display it on user’s profile page

On my website I let registered members create multiple profiles, each of these with their own avatar picture.
On the Create Profile page, I have this input to submit the avatar...
... and get it displayed on the Profile page:
How can I recreate the same, uploading one more picture from Create Profile and display it on Profile page?
I know where the source files for each page are located, but unfortunately I’m unable to recreate it..
Thanks.
You need a 3 step process to upload the image file, store it and send it to the front-end users.
If your app is an SPA and you don't want to reload the page in the user's browser, you'll need a JS process to read the file from a file button and send it to your server (through AJAX as a FormData object for example)
Then your server should be able to handle the formdata object request and read file content from it. Once done, you have to save it in a secure server-side location.
Finally (again in case of an SPA) your server should be able to answer the picture data when the client asks it
The server should be able to give the avatar's URL when asked by the client (with a Restful API for example)
The server should be able to give access to the image when the client uses the image's url

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)

How do I handle local file uploads in electron?

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.

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.

Initiate a 'save as' dialog for files which reside on a remote server

I'm writing a web page (using spring mvc) which displays a list of files that the user can download. I would like the 'save as' dialog to open when user choose a file and clicks the download button. To my best understanding, i can use href with the path to the file (or use window.location), however the files that should be downloaded are located in a different server and need to be fetched from there first.
There are two options that i have thought of, both have big flaws:
1. use window.location with a link to a spring mvc controller. in the controller make a call to fetch the file and set its content on the response (with content-disposition header).
The problem is that for large files, it will take some time for the save as dialog to open (As the file needs to be fetched from the remote server first) and i have no way of 'telling' the user that the download has started.
2. make an http call that will retrieve the file from the second server (and have some kind of indication while the http promise has not yet resolved), save it on my server, return the path to the file in the response and than call window.location with the returned path.
In this case, the downloaded files will need to somehow get deleted at the end of the download.
Any ideas and thoughts?
Thanks a lot!

Categories

Resources