I have a form which includes an input type="file" to upload an image, and I want to be able to manipulate that image before submission.
(I may want to crop or resize it using an existing jQuery library, for example. I'm posting to WordPress and am tied to gravity forms, which means I can't use a plug-in such as jQuery-file-upload which includes server-side handling too, so my question is more generic.)
I'm trying to understand what happens on submit and how the browser constructs the post to be handled by the server.
If a user has selected a file, can I take that file and do something with it in javascript, and then on the form submit have the browser take my amended version from memory rather than the original version linked to in the input field?
[EDIT]
So, I've discovered some useful insights. Anyone looking at this, here is a useful thread here on SO.
When a user selects an image on a file input field, I can use html5 canvas to manipulate it. I need to then convert it back to a binary file to upload (via canvas.toBlob() in the most modern browsers, or using the technique mentioned in the above link for older browsers).
Then what do I do with it? I can POST it via Ajax as per this Mozilla developers article and for most people this will be fine.
My problem is that I am tied to using Gravity Forms and I need to let it handle the form submission.
Which means I need to manipulate my existing form and let the user hit the submit button as normal.
Where my form has
<input type="file" name="input_3" id="input_3_3">
I have tried in JavaScript:
document.getElementbyId('input_3_3').value = myBlob;
but it appears that I can't assign the blob to the input field.
Reading around, the solutions which involve Ajax make use of FormData objects, and I thought I might be able to append the field but that doesn't seem to work (the form on the page in the DOM and the FormData object are not the same thing?).
So, that's where I'm stuck.
In theory you can use blob , but practically it is not good solution because it is not supported in all browsers , and there is no current javascripts library to process images , so the best bet is to send it so server and let the server process it .
Related
There are various image compression libraries, that can simply read the file attached to a form's <input>, but I'm lacking the skill to 'return' the new compressed image back to that <input>, so it's attached to the form/application and can be processed.
Whatever library I try, and often in the console can see the old/new size values, and press 'submit' on the form to send the image to the server, always the original image is sent over, not the new compressed one.
How would I replace the image that the user selects for the <input type="file"> with the new DataURL that is created with Javascript? I think I just need a line of code or two to replace the value/data, but which?
Providing code is a little difficult, because I haven't set on a specific compression library. Let's just assume we've got a form with an <input>, an OnChange Event handler and a function that reads the data and returns a new DataUrl.
As far I remember due to security reasons browsers won't allow you to modify the FileList.
Anyway, you can solve your task by appending a hidden field to your form and setting the data URI as Base64 value for the hidden field. On form submit clear the original file field (if you do not need it) while on the server side you have to decode Base64 value of the hidden field.
If ajax requests are ok for you, another option is to use FormData and XMLHttpRequest (for some good examples check Using FormData Objects).
In out website, we wish to present the users with a form that would allow them to upload picture galleries. The form consists of a <textarea> for a description, a <select> with sharing options and the multiple file upload field.
We're using jQuery-file-upload's jquery-ui version, as seen in here: link and our javascript code is pretty much identical. The only significant difference is that we also added a simple submit button, that sends out a POST request to the form's action.
The problem is that we need to reference ALL the files in a GalleryPost object, and the POST request that we get from the form only contains the values of <textarea> and <select>. Which makes sense, since the uploading is done asynchronously via separate requests.
Since we're using OneUpUploaderBundle to handle the actual uploads, we've tried enabling the orphanage feature described here, which kinda helps doing what we want, but as stated in the "known limitations" section, if the user does not submit the form, but starts over with a new one, the previously uploaded files will be submitted, together with the new ones, unless the session id is changed.
Simply put, we need a way to attach a list of files (names would suffice), that have been successfully uploaded, to the form's POST request, so that we could reference them in our GalleryPost object. Or maybe there is some other way to achieve the functionality we need?
I have created a JSP with various fields. I want to provide an option to export the page to a PDF before submit but after the user fills in the form.
How can this be achieved? I am struggling with this problem past many days and not able to get solution.
You might want to look into the FlyingSaucer project. It's a mechanism for producing PDF files from XML documents, and in particular from a fairly strict XHTML doctype. It really works quite well, and it supports some CSS3 features for doing things like page headings, intra-document bookmarks (like links), and is generally pretty well-behaved about CSS rules. I don't think it does forms, but you could probably fake that if it's going to end up as a non-interactive document anyway.
Link: http://code.google.com/p/flying-saucer//
(If it's not clear, this'd be a server-side solution. The form would have to be posted, and your server would build the PDF and ship it back to the client.)
Or just use AJAX to submit the form. The use clicks "Generate PDF" or whatever and an AJAX post is made to send the form data to the server and return a generated PDF. That submit can go somewhere else than the service/servlet which is processing the form data.
Just use the Print option in Firefox 3.5. It has an option to print to PDF file. Alternatively, you can use PDFCreator or some other virtual printer software that writes to PDF file instead of printing on paper.
I want to provide an option to export the page to a PDF before submit but after the user fills in the form.
This is not possible at the server side as the information isn't submitted to the server side yet. Your only resort is the browser capabilities and the knowledge of the user how to use them.
If you can live with changing the flow to submitting into some result page and providing an link to export the current result page to a PDF file, then combine this answer with iText.
If you are trying to output a report you can look at display table: http://displaytag.sourceforge.net/1.2/. It comes with a simple servlet filter that will allow you to click a simple link and export to pdf, excel , etc.
All I want is:
select a file
small progress bar (unless it is not simple)
fail/success confirmation on client side
trigger action on server side.
all that without page reloading
Except that, the simpler the better.
Snippet would be most welcome.
There are plenty of scripts and tutorials around. Check for example http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html
Apparently that's not as trivial as one might think, since you can't just take the body of a form, containing an <input type='file'/> tag, and submit that.
But you can submit the form with a target of another <iframe/> and then poll the server with a XMLHttpRequest object for status updates, that however, requires that your sever-side script, that handles the upload, does so in a asynchronous manner, otherwise you will only get a status update once the file has been fully uploaded, not the kind of progress status updates you want. I think this is a challenge for most web frameworks to date, but I have never actually had any reason to dig into it. Sounds fun though...
If you just want to submit the file, independently of the actual form, you'll do the same, but you don't have to worry about the progress status updates.
What you can do, is to replaces the <input type='file'/> once the upload completes, with a <input type='hidden'/> containing the server-side ID of the recently uploaded file. That way you'll know when the user hits save, what files you'll want to actually save.
That hidden thing can also be a checkbox, which would let you undo a file upload, by simply unchecking that checkbox before hitting save.
File uploads using the XMLHttpRequest object is not possible in all browsers (only Firefox and Safari/Chrome support it), so for a cross-browser implementation use the <iframe> trick.
If you want a real XHR file upload, I have written an extended article on how to do it in Firefox 3. It's so low level that you actually have to build the actual HTTP request from JavaScript strings.
Maybe GearsUploader will fit.
in a web application I am building I need to upload photos without using a form, otherwise it will come up with form embedded in an outer from which is not permitted in XHTML.
I think uploading files is what jQuery.post should be able to do, but I currently can't figure out how to do this using jQuery.
take a look at swfupload, it's a pretty nifty little app that should accomplish what you want. otherwise, you could separate out the forms, and just use css/javascript to reposition them if necessary.
With jQuery.post you will be only able to send key/value pairs to the server in a POST Request, However you can use plugins like jQuery Multiple File Upload Plugin.
Have you check out the fieldset element? Why not wrap your input elements in that, then use jQuery to dynamically assign 'submit' functionality, as opposed to trying to attach it to the overall form element?
I can confirm that jquery.fileupload does not need a form to upload an image, in fact the file upload fields (which fileupload wants) can be in a form, you have to use the manual aspects such as defining you url: for where the file will be sent, and probably the add: event.
Just a note, and I'm quite sure that my use is probably a little wrong, but the other form elements along with all the file upload data will be sent, but it's trivial to simply get the file data and ignore the rest. And yes my form submission for all the other non-file-upload fields work fine with my submit action. Hope this helps.