i want to show file upload dialog on click of a button thats not the part of input[type="file"] how can i do this?
Basically i want to stylize the file upload control of html.
Alternate way to style file inputs using JavaScript but no Flash:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
I'm pretty sure there is no way to do this for security reasons.
You may be able to do it using a Flash-based uploader like SWFUpload. It obviously needs Flash installed and functions in a slightly different way than normal file uploads.
two days ago i was dealing with the same thing. I spotted uploadify
it allows you to have custom button for upload and ability to style your progress bar. it makes an ajax call to a php script. it also has loads of options from restricting file types/sizes/etc.
pretty happy i found it. same as pekka said this one also uses a flash gateway to do this.
document.formname.file.click() works but not in Opera i am still searching the net to solve.
Related
Is there any way to programmatically create (client or server side (PHP)) a image from a specific DIV or a complete (web) page? I'm currently creating a web-site for free coupons and the idea is when the end-user clicks on the "Print" button, the app opens a new tab/window with all the selected coupons as a single image (JPG, PNG or etc..) in A4 format ready for printing. Each coupons has it's own data (Article name, price, description etc..) so I need it to be done programmatically over a coupon-template I designed.
I do not ask you to write code for me, just to suggest a solution I could use/develop. If not already exist, I will upload/publish it for free :)
Update: I did it with the PHP GD library :) Still not satisfied with the idea to use Images instead of PDF, because each printing results with different Coupon sizes (images) on different PC's. That's why PDF may would be a better solution. You can see/test it on demo.svikuponi.ba - Just select a few Coupons and click the PRINTAJ button above.
You cannot create image from div for sure but yes you can create dynamic images in php using its gd library.
Following links will help:
http://php.net/manual/en/function.imagecreate.php
http://phptutorial.info/learn/create_images/
Here is a great way for you to create images on the client side: http://smus.com/screen-capture-for-chrome-os
You can take this and create a web app that will work nicely on webkit (for other browsers - I'll look at JS polyfills).
Did anyone mention html2canvas and/or jsfeedback ?
It create a page screenshot completely in javascript, then you can send to the server via ajax..
Obviously, CSS support lack some things.
In php, there is many image related functions like imagettftext() in GD library
for details, check this out http://php.net/manual/en/book.image.php
if GD is not enough, you can try imagick as well
for the template, you can try creating a true color handle in php from your file(image) and add the text part or something else with all kinds of effects and bar codes etc.
but in your case, i would suggest dynamic PDF creation since it would better with formatting instead of plain image, the pdf lib :
http://www.fpdf.org/
you could easily have a background image of your token/voucher and overlay the text using some php variables.
i believe it is possible to create a unique bar-code with php imaging too.
It is possible to get a screenshot from a webpage, but this is quite a hassle. You need to start a webbrowser to render the page and get a screenshot from that.
You are probably better of by parsing some specification and feeding it to a couple of GD or Imagick functions. This is less versatile, but easier to manage.
I need a super-simple file manager (preferably in classic asp but not a deal breaker) that I can add to Tiny MCE v3.
It doesn't need to upload, show images or other media, just documents such as .pdf, .doc, etc.
I just need to allow the user to click a browse button beside a the link input box which will open the file browser window to the specified folder (always the same one), click the required file, the details of which will populate the input box.
I've seen a few as recommended elsewhere on Stack but these are either image/media only or I'm not bright enough to make them work properly.
Thanks in advance.
I forgot to update this question.
I found a TinyMCE/CKEditor plugin that really did the trick. It's called (surprisingly) PDW File Browser for TinyMCE and CKEditor and can be found at http://sourceforge.net/projects/pdwfilebrowser/.
It has a good range of different features and is really easy to modify (it has to be because it's me doing the modifications).
Definitely worth checking out.
I am using the OpenWebkitSharp browser in a VB.NET project. What I am trying to do is use WebkitBrowser1.Navigate to display some HTML in the browser "on the fly". This works great for basic HTML, but Javascript does not appear to work at all in this scenario. For example, I have...
WebKitBrowser1.DocumentText = "<!DOCTYPE html><html><head><script>alert('This is an alert'); </script></head><body><p>This is some text</p></body></html>"
The body text appears just fine, but there is never a Javascript alert. I made sure that Javascript is enabled in the Webkit browser, so that's not the issue.
If I use the Navigate method to display a local page that contains Javascript (ie WebkitBrowser1.Navigate("path/to/local/file"), then the Javascript works perfectly. But it doesn't work at all when setting the HTML using WebKitBrowser1.DocumentText.
For this particular project, I need to generate the HTML code and display it "on the fly", so I can't use WebKitBrowser1.Navigate. I have to use WebkitBrowser1.DocumentText instead (or something similar).
Any ideas?
Or might there be a better way to accomplish this?
Thanks!
I ran into a similar situation recently, and while I'm still looking for that solution that allows what you're describing, here's what I decided to do as a workaround:
-Save HTML to temporary file
-Load temp file into WebKit control on form.
I'm considering making my own modifications to OpenWebKitSharp however, to see if I can make this happen. Basically, it seems like HTML loaded through DocumentText follows a different render path than loaded through Navigate.
i am currently trying to add a uploading/scanning screen to my file upload site, (just to be clear i need the 'design' part of it, like actually displaying the box not anything to do with the scanners, or implementing the scanners, just a box that says scanning with a scanning gif next to it). Pretty much my site allows people to upload files which scans them and then displays the result. All the scanners are up and working but i am trying to add this scanning page. I want it to look a bit like this when you upload a file - www.virustotal.com
How would I be able to do this? You don't have to be very specific just like what programming languages, or any examples of code, to help me, i don't really know where to start.
Sounds like you are looking for a modal overlay or dialog.
There are tons of libraries out there that can do this, including YUI and JQuery UI/Plugins.
See my question.
Instead of using the <input type="file"> tag I'd like to have a button that launches a file browser dialog.
My first thought was to have a hidden file input tag and a button. I'd use the button click on the button to fire the onclick of the hidden file input, but I haven't been able to get this working properly.
So the question is, is this even possible? And second is there a nicer way to do this and still be able to send the information back in a form?
This will be the bottom layer of degrading functionality (from Flash to JavaScript (our site doesn't work without JS)) so it has to work with just basic JS and HTML.
Yes, it's possible (in most browsers) via opacity. Here's a tutorial.
I've done this (see ceejayoz' answer) in the past, but now recommend against it. It is a security issue and can't be relied upon for the future. A much better solution is to progressively enhance your upload form so that the file input is replaced with a Flash- or Java-based uploader with more features (or use better features in HTML 5 if they become available).
Instead of trying to hack the browser's file input control, I'd suggest using a flash based file uploader like SWFUpload. I've started using this in one of my projects and have been VERY pleased with it.
You get javascript callbacks and you can do anything you want for a UI (the flash is just the uploading functionality).
I'd rather avoid transparency tricks.
This worked for me (uses jQuery):
$("#upload-box").change(function(){
$("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
$("#upload-box").click();
});
And the HTML:
<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />
It creates a text input, and a hidden upload input, and patches (=routes) the click on the text input to the hidden file input.
When a file is selected, it will write back the name of the file in the text input, in line with what most users would expect from the interface.
Should work on FF, Chrome, IE9 and +. I didn't test it on IE8.
Here's a jsfiddle. Thank you for upvoting my answer if you like it.
You can do it without any security issues.
Just code that on onmouseenter will promote the zindex of the real upload button (you can use opacity on it or make it transparent) and then you will not need to trigger a click but just use the click from the user.