JavaScript Drag drop documents/files - javascript

Is it possible to drag and drop files (not images and not links to files) from one browser window into a droppable file uploader?
I.E. I know you can drag from your desktop to the browser, but how about between browser windows or even between tabs?
My website's backend generates PDF documents, and it'd be great if they could be dragged straight into gmail attachment drop box from the icon in my backend instead of downloading them then uploading them, lol.
Just not sure how to do it or if its possible... Any ideas?

I don't think you can drag files that haven't been downloaded to the client. Files are usually stored on a server and linked to from the browser...images however are downloaded so the client machine has the file at hand to use.
Your file uploader could "on drop" do a web request for the file?

Related

FineUpload - deleting local copy of uploaded image

I'm using fineupload S3 in an angular mobile web application to handle the capture and upload of images from the device camera.
I have a requirement to make sure that the captured images are not displayed in the device gallery and not stored on the device. (image and video)
The deleteFile function of fineupload doesn't appear to handle this task and it instead looks like its designed to delete the uploaded file from the server.
So i'm looking for a solution to either prevent the device from storing the captured images in the first place or to delete the files once they've been uploaded.
As far as I know the browser (either mobile or desktop) does not have the privileges to manipulate the file system. If your using cordova/phonegap you should try removing the photo with the file system API provided by them.

Hope to create gmail attachment preview like functionality using angularjs

I have a requirement where I want to show the file preview to the users.
There are various file types which are supported like; .pdf, .xlsx, .doc, .rar, .jpeg, .png and many more.
When user clicks on the preview it should open the file in popup where preview of the file is shown to him. User can Zoom-in, Zoom-out, Download the file. Just as you can see into gmail for attachment preview.
Please, can anyone guide me to any relevant library or helpful resource for the same.
Thanks in advance
There are two main ways you can do this.
1) Server-side: Render previews once server-side (on file upload) into jpg/png images, and store the previews on the server. This is the easiest to implement on the client side, but requires extra storage on the server.
2) Client-side: Render the previews 'live' with javascript in browser, this reduces the amount the server has to do/store, but does require the client to fully download the file in-memory before it can render the preview, which for large files could be an issue. Also, you would need javascript libraries included for likely each individual file type, since most libraries will target one specific file format.
Server-Side is probably the recommended way to go. What are you using for your web server?
You are looking at creating document viewer.
Belive me its big work as browser does not understand these formats. Browser can render images directly on canvas but it does not know how to render the other files. So, any file other than image formats, one need to save them temporarily on server and then stream on the browser and show them using the respective file viewer.
You can convert doc and xlsx files to pdf and show these files using pdf viewer (http://ngmodules.org/modules/ng-pdfviewer). There are plenty of document converters available on internet (however you will need to check the licensing terms as most of them are GPL licensed, hense can not be used in commercial projects).
If you want to save this work then go for third party server those take all paint to convert documents in html5 such as https://crocodoc.com/why-crocodoc/
You can also try using google doc viewer google doc veiwer
This question is fairly broad. I'm not going through all the steps of how to implement an attachment viewer directive, but here are some pointers you might find useful.
To allow the user to download the file, you simply put a download link somewhere. If you are hosting the attachment on Amazon S3, Google Cloud Storage or some other cloud storage service, check their documentation. If you're downloading the files from your own server, make sure to set the Content-Disposition HTTP response header to attachment; filename="ORIGINAL_FILENAME", where ORIGINAL_FILENAME is the file name you want to user to see in the save dialog that appears when they click the download link.
Now on to the viewer.
For PDF files, I'd use pdfJS. There's an angular directive for it here.
You could look at something like CloudConvert for other files, to convert ehm to a PDF, and then displaying them in pdfJS, but then you probably want to store the PDF on your server as well, in addition to the original files, which requires extra storage. You might also be able to use the Google Docs viewer, or Office 365 viewer, as described in this answer.

How can I upload files, given their paths, using Javascript?

So I want to be able to upload a file, parse the file, and then upload some more files that are listed in the first file. Is this possible?
Say I upload 'animals.csv' which contains a list of animals and some information about them, including the paths to their images. Can I parse this file and get the images listed?
I know how to upload a file using an but is it possible to automatically upload some more files given their paths?
I'm afraid not. Here's a similar question:
upload file from client to server without openFile dialog
The main issue is security. The browsers don't want to be a vector for viruses that would steal files from people's machines.
Your choices are limited to having users drag and drop files or select them from a dialog. Chrome also has a feature which will let users drag and drop folders not just files (upload file from client to server without openFile dialog), but i think still only Chrome supports that and the user still has to at least choose or drag the folder.

Browse local image folder from an HTML page

I'm writing an esay live blogging app.
I have a form in the backend and I can upload to the server text messages or images.
At this moment everything is working with a simple file upload field, but I want to speed up the process so:
1) reflex camera attached via USB that save images in a local folder on my mac
2) a "preview" of the folder in the backend, updating live while I shoot picture
3) when I select a shot I will upload to the server (this is not difficult).
I cannot find the right plugin to "watch" and interact a local directory. Any idea?

HTML5 Synchronization Between User and Server

I am trying to create a HTML5 app that will allow an user to automatically upload files from a user's computer to my server (similar to Dropbox for Windows where file transfers are updated between computer and server in the background).
The user will have around 100+ .csv files in a single folder. The HTML5 app will ask the user to select the folder. Afterwards, the files will be uploaded to the server in the background.
Is this possible in HTML5 using WebSockets or FileStream? Any advice will be appreciated! Thanks.
You can achieve this by using JWebSocket framework.Visit https://jwebsocket.org/. it has got lot of plug-ins and one such plug-in is FileUpload plug-in.http://enapso.org/jwsForum219/posts/list/59.page.Hope this will help you.

Categories

Resources