I was trying to do something like this: http://www.element-it.com/Examples/MultiPowUpload/AdvancedHTMLinterface.html
But in my search for information I found that is not possible to perform multiple file selection with simple HTML and JavaScript (and JSP in the server side). There is a way to do this without using Flash? A third party component you could recommend?
Thanks.
Actually according to the specification, normal HTML file upload fields are supposed to be multiple-file-upload fields. Opera supported it for a bit, allowing you to ctrl-click to select multiple files from a file picker. But it almost always broke the webapp since many web frameworks didn't know about it and would fall over.
In the meantime, it usually suffices to use JavaScript to add an extra file upload field to the form when the previous one has been filled in. This can be made gracefully-degrading for non-JS UAs, whilst sprucing up the management of multiple files with script and pretty icons.
If you go with a Flash uploader, it's a good idea to back it up with a simple HTML file upload field for compatibility there too.
It is still works via flash, but the YUI Uploader component allows you to add multiple file selection with minimal knowledge of flash - the API to interact with it is purely javascript.
HTML 5 will support multiple file upload, but that is not currently well supported in a large number of browsers
Related
I am working on a web application and there is a need to preview PDF in Firefox.
Obviously I have embedded the PDF in the HTML code. The problem is that these PDFs contain forms and I know that the built-in Firefox viewer cannot display forms. Except the forms (which contain digital signatures) the rest of the document is displayed properly and in Chrome everything works fine (displaying the signatures too).
I want to ask which is the best approach to support the view of the whole document in Firefox. The current version I am working on is 52.7.3 but I want to do the system scalable for future versions.
I was thinking of transforming the PDF into a Base64 String and embed like that but trying this with some online demos did not work either (maybe the document is quite big?).
The other posibility I was thinking of, is transforming the PDF in JPEG (or similar format) and preview like that. What do you think about that?
Is there any library to handle PDF files from Java/Javascript code that does not use embedded viewers? I tried PDF.js but I realised that it is using the built in viewers. Correct me on this If I am wrong.
You could do something that is called "flattening". This involves taking the form field appearance (graphics) and moving them directly into the page, and then removing the form fields themselves. Is also often done on annotations too.
This ensures that the fields are visible (rendered) by every PDF reader, but also that users cannot possibly edit the fields (since the field is removed).
This would of course invalidate any e-signature, since you are modifying the PDF, but if you kept the original PDF, that should not be an issue.
Once the fields are flattened, then Firefox/Pdf.js will show everything fine.
Is mandatory to open file specifically with Firefox? If not, you can use Desktop.open(File) to open a file with the default application for PDF files. (https://docs.oracle.com/javase/7/docs/api/java/awt/Desktop.html)
Desktop.open(File)
You can use this to open the PDF file if the file does not have to be opened with Firefox.
I would like to generate a PDF portfolio using JS from an HTML/CSS page on a local machine. I would use a PDF template file which includes a PDF portfolio Navigator in SWF form. I have successfully accomplished this using C# and a command line program, but can not identify the proper Javascipt components to do this browser-side or pseuo-server with Node.js. Basically, I am looking for something which will allow me to append a PDF to a new or existing PDF via configuration choices and an 'assemble' action using a JS or HTML button. iTextSharp provides the required PDF interaction functionality, but I can not figure out to run this inside an HTML to allow configuration via the HTML/CSS DOM (i.e. checkboxes, text field desciptors, etc...). Does a library with this type of functionality exist?
So you want to create a PDF using JavaScript?
On a quick google search, I found what appears to be a javascript library for creating and manipulating PDFs call jsPDF
If you want information on how to upload files with JavaScript alone, here is an article on how to do that. It also shows you how to use the file element.
For style, I recommend using a CSS Framework is you don't know much about CSS. I personally use Twitter Bootstrap for quickly prototyping things. It's quick and easy, and has good documentation. You can also use this to see how to make a form in HTML. I haven't got any good starter tutorials for HTML off the top of my list, sorry.
If you don't know much about JavaScript, when it comes to getting the options from the form, so that you can use them as configuration options, I'd suggest using the jQuery framework. It'll help you get up and running quickly enough
Note, all of this shouldn't replace basic training in JavaScript and HTML/CSS. Frameworks make things simpler, but if you don't know how to do something without a framework, you're going to have a hard time with a lot of the more complicated things. This goes for every language
I have a script already for uploading pictures, but I want the ability to select more pictures at once on upload,by holding down ctrl,I know I can use uploadify but I don't want to start over, mabe you guys know a script or something for jquery, that will work without to remove the current code, or you guys could give me a snippet.
The ability to slect multiple files in entirely the browsers features. Which cannot be changed by using a Javascript or css or html. Using uploadify or similar as you mentioned in your question is the right way to go.
You know uploadify also uses the swfobject.js, to overcome this limitation by using an actionscript instead.
You could write your own upload system in javascript with ajax. See http://www.html5rocks.com/en/tutorials/file/dndfiles/
Basic workflow
get local file contents
push to server via ajax
With this you could do a multi-file select and/or drag and drop upload system. Best and maybe only solution if you want to stay in javascript.
I need to make new own file upload field using HTML and Javascript since Built-In file upload not showing full path of the file
I need to make it similar to file upload by using button and textbox
please help to solve this problem
You can't.
There are security considerations browsers must adhere to and there is now way around that.
FYI this is also why Firefox doesn't allow drag and drop into a file field.
Just fyi, I think the path display depends on your browser.
If you're willing to/can do so, java (not javascript) might be able to help you with your original problem. Java brings it's own problems, though.
The file upload is a specific input type, which you can't easily replace, but in some browsers you may be able to style it.
You should be able to access the filename from javascript, and display this in a different part of the page (possibly hiding the file input at the same time) so the user can see what will be selected.
Another option is to use Flash for a fancier front-end (see http://www.flickr.com/photos/upload/ (assuming you have a flickr account) as an example), but I've never used one of these as a developer
I need an easy way to allow users to upload multiple files at once (ie I need to allow a user to upload a folder). I do not wish to put the burden of zipping on the user.
I would prefer to avoid Flash or variants if possible. I'm looking for a straight javascript / HTML solution if it is possible. Please note, this rules out the answers at: What is the best client side browser library to upload multiple files over http?.
You won't be able to do it with just HTML and Javascript. I'd recommend trying Fancy Upload, a MooTools plugin for multiple file uploads. It uses a mixture of JavaScript and Flash, but degrades gracefully. It works with all major browsers including IE6 and there is also a Flash 10 compatible release available for download (though the demo hasn't been updated yet).
Update (2012-11-26):
Multiple file uploads are possible with valums or blueimp file uploaders.
For recursive directory uploads, your best solution is using Chrome 11's new folder upload API. It also seems to work on Firefox if you use a vendor prefix.
With Firefox 42 and Edge having implemented the new directory upload proposal we'll finally able to do cross-browser directory uploads. The APIs are nasty enough that you may want to check out my wrapper, uppie.
If you're avoiding Flash (and presumably Java?) the JS/HTML-only solution still requires single-file inputs, but essentially you attach an onchange event to your input, adding a new input to the DOM whenever a file is selected.
Multiple file uploads are possible with valums or blueimp file uploaders.
For recursive directory uploads, your options are more limited:
Your best solution is using Chrome 11's new folder upload API. It also seems to work on Firefox if you use a vendor prefix.
This is also possible cross-browser with a Java applet. However the % of folks with a JRE installed has gotten pretty low these days (< 70%)
This isn't a pure js/html solution. As EndangeredMassa has pointed out, it's not possible. In fact, this idea is an IE/Windows only solution. I don't recommend it, but it can work.
So, all disclaimers aside ...
Many years and several employers ago, we used to do some client side stuff that instantiated the FileSystemObject. It would iterate through each of the files and pass them through to the server one at a time. Can't remember the details of how we did that :o(
Anyway, this usually meant that the client box would need to have to add the site to the list of trusted sites and give trusted sites a bunch of permissions that are turned off (for very good reasons). Stuff like the ability to Initialize and script ActiveX controls not marked as safe. That kind of thing.
I know that this isn't a perfect answer, but it could point you in the right direction.
FTP? And if necs, wrap in Java Applet, ActiveX or whatever you want.
If not, although you don't want flash, SWFUpload is quite cool, you may want to reconsider it as a decent option.
Here is pure JS solution using ExtJS library