How to upload an image with jquery in all browsers - forms

I am currently creating a form that involves a file uploader. Currently
my form is fine just using multipart and post but later on in future iterations
it will be necessary for the form to be posted with ajax in order to edit the
image before submitting the form.
I have seen a lot of things about multiple files like jquery-file-upload and swf
and php with uploadify and a whole host of non IE 7+ solutions. However those are
not going to work for this specific project and I am really just looking for the bare
bones nothing fancy to have to deal with just sends the image data to an endpoint.
What is the best way to do this in a way that can support all browsers.
=====EDIT=====
I havent tested this completely yet but this solution seems good to me
https://github.com/francois2metz/html5-formdata

Fine Uploader is a library that provides the ability to support cross-browser uploading. Ajax/xhr post requests are used for all browsers that support the file api. Otherwise, a form-based upload method is used. No flash is used or needed. This is all transparent to the user. Check out fineuploader.com for more details.

You can't send file through AJAX request this is just impossible. If you use HTML5 File API that would work but as you stated in your question you need to support old browsers. So I think you either have to use flash (uploadify uses flash as well) or you don't have any other option.
You can have a look at this question/answer:
jQuery Ajax File Upload

Related

How to get serverside file uploading progress in Perfect

I'm trying to create a web page using Perfect(perfect.org), Where users will browse and upload files. Can anyone tell me how can I get the progress of file upload?
perfect.org-fileUploads
Refer above link and Do as-usual concept following in HTML-JS-PHP or HTML-JS-JSP or other programming
In other words
you can receive response status in percentage from server-side and display it to client or put loder while uploading the file
Thank you
Before an official solution released from PerfectlySoft Inc. for this feature request, you could try splitting the file into small pieces and upload them one by one, then merge them back to the server - since there is no such an industrial standard to apply, all other web servers either provide different solutions or simply stay away from it.

How to initiate a file download using a crossrider request?

I'm storing custom images on our servers. I'd like to have the user download the images using our plugin. When I send the request to the server I can see that it is started correctly but the file save dialog never comes up.
Does anyone know how to do this or can point me to an example?
Thanks!
In general, for security reasons, extensions created on Crossrider or otherwise do not provide functionality to access/save to the local files system. There are various workaround suggestions on various Stack Overflow threads (e.g. Chrome extension: How to save a file on disk) that may work on certain browsers. Whilst Crossrider does not support or guarantee that they will work, you can of course try to make them work in your Crossrider extension.
[Disclosure: I am a Crossrider employee]

Unable to auomate SWF component using Selenium

I am automating test for a website using selenium, but selenium is not able to identify SWF components. Please let me know if there's a way to automate SWF components with Selenium & perl.
Here's the test link to check proof of concept:
http://demo.swfupload.org/v220/simpledemo/index.php
There is a Selenium-Flex API. I believe it requires instrumenting your swf files so that their controls are actually called by JavaScript, but includes a tool for doing that instrumentation.
I have not tried this, but might when I have some time...
EDIT:
Just noticed you referenced it not working for you in comments already. If you need to call it from perl it may indeed be impossible. I'd have to be a real user of it to know.
I encountered the same problem in automating a flash uploader widget in my own tests. Unfortunately, selenium cannot be used to automate run-of-the-mill flash SWF files.
If you want to upload something, then throw a script up on your server to which you can POST file data, and POST the data directly from your script (I am assuming that you are running selenium-rc). In any case, this is just working around the flash widget.

Web CMS That Outputs to Flat Static Pages (.html) via FTP to Remote Server?

I have a web app project that I will be starting to work on shortly. One of the features included is going to be a content management system where users can add content and then that content will be combined with a template and then output as a regular .html file. This .html file would then be FTPed to their own web host.
As I've always believed in not reinventing the wheel I figured I'd see if there are any quality customizable CMSes out there that do this already do this. For instance, Blogger.com allows you to post all of your content to your account there; but offers the option to let you use your own hosting. Any time you publish a new article then a new .html page is generated (as well as an updated index page with links to the new article) and then the updated content is FTPed to your own server.
What I would like is something like this that I can modify to more closely suit my needs.
Required Features:
Able to host on my own server
Written in PHP
Users add content through their account, then when posted it is FTPed as .html to their server
Any appropriate pages are also updated to link to the new content (like the index page or whatnot)
Templateable
Customizable
Optional (but very much desired) features:
Written in CodeIgniter or a similar PHP framework
While CodeIgniter isn't strictly required, I would very much prefer it. It speeds up development time and makes things much easier to implement.
So - any suggestions? I've stumbled across a few CMSes that push to remote servers as static pages, but the ones I've found all are hosted on the developers servers which means that I cannot modify it at all.
Adobe Contribute might work for your situation. A developer/designer creates a set of templates with Dreamweaver and publishes the templates. Authorized users can then create pages based on the templates and only make changes within the editable regions. It includes systems for drafts and reviews prior to publishing (via many options, including ftp) and incorporates automatic version control. It can work with static html pages or dynamic pages like php.
Sounds like you need a separate application that can do this for you.
For example, you should be able to write something that queries Drupal's menu router and saves the output (with curl) to a directory and then run's rsync to push your content where you want it to go.
Otherwise your requirements are likely to be outside the scope of a typical CMS. Separating this functionality will give you better options.
You'd need to write a filter for your URLs too. It's a bit of work...
Hope that helps!

GWT Toolkit: preprocessing files on client side

If there's a way for the client side GWT code to pre-process a file on the client computer?
For example, to calculate a checksum of it before submitting the file to the server.
No it is not possible. The manipulation of the file is done by the browser, not the HTML code.
Think about it, GWT is 100% javascript. And javascript has no access whatsoever of the file in your computer. That would be an pretty big security risk! GWT "wraps" the file input box so it can be displayed inside the GWT panel. But once you press the "upload" button, the upload is done by the browser.
You could do file manipulation with another technology however. Java applets for example. But that is outside of GWT area...
Using GWT, there is no way to read files on the client side yet. However, in HTML5, you can read files without uploading to a server using the "File API".
Links are provided below.
File API tutorial on html5rocks.com
Example of how to use File API in GWT via JSNI
I'm pretty sure that because GWT code compiles to pure JavaScript, there isn't a way without requiring some third-party browser plugin.
Do you mean from an <input type="file"...> file upload field in a form?
The short answer is no-- file uploads are handled by the browser, and are sent directly to the server (as an ENCODING_MULTIPART POST). And security restrictions on JavaScript mean there's no way to workaround that restriction.