I'm trying to find a way by which a remote file, represented by an HTML element on the page, can be dragged to a drag-and-drop file upload box. The default functionality of a drag-and-drop file upload is to accept input from outside the browser using the browse dialog or dragging the file inside the area, but I'm not certain if there's an implementation that allows input from an element representing a file inside the browser page.
I'm using plupload but if another plugin supports that feature, I'd love to hear about it. Edited to add: insight as to whether plupload can support this or not would be very helpful, as it is part of the specification for the project. Not very knowledgeable in JS here. I hope this description comes across clearly, been trying to search for this but nothing seems to turn up. :)
https://github.com/blueimp/jQuery-File-Upload/wiki
In addition to drag/drop/browse it will allow you to add files "manually" to the upload queue (so you can set attribute data-file in some html element then access those & add them to the queue) but you'll need to get your hands dirty with javascript, it's great plugin but indeed require some JS fluency to have it do what you want it to do
NB: imo start by not using the ui/template system it offers with it, start with the basics : https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
From the API page :
Blockquote
Programmatic file upload
Usually, file uploads are invoked by selecting files via file input button or by dropping files on the drop zone.
However it is also possible to upload files programmatically for browsers with support for XHR file uploads (see Browser support):
$('#fileupload').fileupload('add', {files: filesList});
The second argument must be an object with an array (or array-like list) of File or Blob objects as files property.
Other properties allow to override options for the file upload, e.g. the upload url:
$('#fileupload').fileupload('add', {files: filesList, url: '/path/to/upload/handler.json'});
more : https://github.com/blueimp/jQuery-File-Upload/wiki/API
Related
As the title suggests I'm trying to understand how to link a FileAttachment annotation with the actual file in javasacript. There are no properties that do this while I'm performing the addAnnot function. So after I've used addAnnot to create the annotation how would I link it to open an actual file?
Appreciate the help
Something like this but with a few caveats. First, you need to use a device independent path to the PDF, you can find out more in the Acrobat JS reference. Also, if you want to attach the file without user interaction, the script must be in a privileged context. Again, more on that in the JS reference. If you want the user to be able to select the file, leave cAttachmentPath empty and they'll get a file selection dialog. Note: Many file types like executables, .js, etc. can be attached but then not extracted by Acrobat or Reader for security reasons.
var annot = this.addAnnot({
page: 0,
type: "FileAttachment",
point: [0,0],
cAttachmentPath: "/c/temp/foo.pdf"
});
Lets say, I have a simple HTML page with
<input id="input-file" type="file" />
this input field is NOT part of any form. User chooses a file from file system for this input.
How can I load contents of file chosen by user to a JavaScript variable (e.g. as a string or somehow compressed) when some BUTTON is pressed?
I can use only pure javascript or dojo/dojox.
If this is impossible or hard to do, the input can be part of a form. Nevertheless the goal still is to save the contents of a file to a javascript variable.
The solution should be well supported even by the browsers that are not the newest (2014).
You could use the File API which is getting support in some of the newer browsers. Read more about it on this SO-thread which deals with the same problem you are describing: https://stackoverflow.com/a/754398/844932.
EDIT:
According to this link, http://caniuse.com/#feat=filereader, the FileReader API is fairly well supported today (IE10+ and all other relevant browsers), so I think you'll probably be well off using it.
What I need to do is:
Let user choose txt file from his disc
Get the text from it to let's say a variable
Send it (the variable value) via AJAX
For the first point I want to know if I should use normal input type (like if I would like to send file via POST) <input type="file">
For the second point I need to know how to get the name of the file user selected and then read text from it. Also I'm not good with javascript so I don't really know how long can a string be there (file will have about 15k lines on average)
For the third I need nothing to know if I can have the data stored in a variable or an array.
Thanks in advance.
P.S. I guess javascript is not a fast language, but (depending on the editor) it sometimes opens on my computer the way that I have all the needed data in first 5 or 6 lines. Is it possible to read only first few lines from the file?
It is possible to get what you want using the File API as #dandavis and other commentors have mentioned (and linked), but there are some things to consider about that solution, namely browser support. Bottom line is the File API is currently a working draft of the w3c. And bottom line is even w3c recommended things aren't always fully supported by all browsers.
What solution is "best" for you really boils down to what browser/versions you want to support. If it were my own personal project or for a "modern" site/audience, I would use the File API. But if this is for something that requires maximum browser support (for older browsers), I would not currently recommend using the File API.
So having said all that, here is a suggested solution that does NOT involve using the FIle API.
supply an input type file in a form for the user to specify file. User will have to select the file (javascript cannot do this)
use form.submit() or set the target attribute to submit the form. There is an iframe trick for submitting a form without refreshing the page.
use server-side language of choice to respond with the file info (name, contents, etc.). For example in php you'd access the posted file with $_FILES
then you can use javascript to parse the response. Normally you'd send it as a json encoded response. Then you can do whatever you want with the file info in javascript.
With Chrome and Firefox you can read the contents of a text file like this:
HTML:
<input type="file" id="in-file" />
JavaScript with jQuery:
var fileInput = $('#in-file');
fileInput.change(function(e) {
var reader = new FileReader();
reader.onload = function(e) {
console.log(reader.result);
}
reader.readAsText(fileInput[0].files[0]);
});
IE doesn't support the FileReader object.
How to validate the content-type of a file before uploading using JavaScript? I'm not asking the extension validation. I want to validate pdf,plain text and MS word files.
I'm using a django forms.ModelForm to pass file upload widget to html. I couldn't achieve this either on server side. Here is that question,
Django - Uploaded file type validation
Maybe but it won't give you any form of security because an attacker could use other means to upload files thus circumventing your validation.
To check the file type using the extension (which is very insecure since it's dead easy to manipulate it), you can use JavaScript. See this question: How do I Validate the File Type of a File Upload?
[EDIT] After some googling, I found that the input element has an attribute accept which takes a list of mime type patterns. Unfortunately, most browsers ignore it (or only use it to tweak the file selection dialog). See this question: File input 'accept' attribute - is it useful?
[EDIT 2] Right now, it seems that the File API (see "Using files from web applications") is your only way it you really don't want to use file extensions. Each File instance has a type property which contains the mime type.
But this API is work in progress, so it's not available everywhere. And there is no guarantee that you'll get a MIME type (the property can be "").
So I suggest this approach: Try the File API. If it's not available or the type property is empty, use the file extension.
In theory you could use the File API to read the files.
You would then need to write parsers in JavaScript for the file formats you cared about to check if they matched.
I would like to save a csv file from a web page. However, the link on the page
does not lead directly to the file, but it calls some kind of javascript, which leads
to the opening of the file. In other words, there is no explicit url address for the
file i want to download or at least I don't know what it should be.
I found a way to download a file by activating Internet Explorer,going to the web page
and pressing the link button and then saving the file through the dialog box.
This is pretty ugly, and I am wondering if there is a more elegant (and fast) method to retrieve a file without using internet explorer(e.g. by using urllib.retrieve method)
The javascript is of the following form (see the comment, it does not let publish the source code...):
"CSV"
Any ideas?
Sasha
You can look at what the javascript function is doing, and it should tell you exactly where it's downloading from.
I had exactly this sort of problem a year or two back; I ended up installing the rhino javascript engine; grepping the javascript out of the target document and evaluating the url within rhino, and then fetching the result.