Context:
I setup a photo upload that uses an iframe to upload the image, then that has an optional jCrop step.
the client doesn't want to have to wait for the image to be uploaded. here's what the client said:
"You shouldn't have to wait for anything on the server end.
I don't care if the cropping happens on the server or client.
The interaction for cropping shouldn't wait on upload"
Is the client crazy, or is there some kind of way for me to have the image available for front-end manipulation instantly?
Edit:
TLDR: using a <input type="file"/>, if a user picks an image, can I immediately reference that local file somehow? would that show up as the input's value after change?
I can think of three technics to do a browser based image manipulation possible:
- java applet
- flash
- html5: file api (to read the image) and canvas (to show and manipulate it). But the browser support for the file api is not quite good as far as I know.
Related
We have a single-page application (Rails back-end, Ember.js front-end) where we're currently moving away from a server-side image uploader to a client-side image uploader. We previously used the Carrierwave gem to do resizing and sending to S3 on the server. Now we want to the resizing (using HTML5 Canvas and File API) and sending to S3 directly on the client.
This works well when the user selects an image from his computer. It's definitely way faster for the user and puts less load on the server.
However, our users have gotten used to the "Upload by URL" functionality that we offered. It works like the "Search by image" functionality on Google Image Search. Instead of selecting a file from his computer, the user pastes a URL to an image.
Because of the same-origin policy, we cannot use Canvas API on an external image (it becomes tainted, see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Using_images_from_other_domains).
I see two possible solutions:
In order to be able to upload to S3 directly from the client, we need to generate a pre-signed key on the server. We could pass the URL to the image in that same request, download it on the server while we generate the pre-signed key, and put the image as base64 payload in the response.
Use a proxy on our domain and use it to bypass the SOP. So access the image on the client as https://www.mydomain.com/?link=http://www.link.to/image/selected/by/user.jpg.
My questions are:
Do you know any other way to bypass the same-origin policy to provide a "Upload by URL" functionality?
Which solution do you think is best?
How hard is it to setup 2)? I have no experience in setting up proxies. FWIW, we host our application on Heroku.
I hope the situation I described is clear enough.
Thank you!
Yoran
Yes, you could force your clients to download the other-domain image to their local drives and then upload that copy from their local drives.
"Best" is subjective & relative to your configuration. The traditional workaround is your option#2--bounce the image off your server. Really all you're doing is having your server upload the image and re-serve it to the client. If you're expecting a huge volume of images, then forcing the client to download their own images might be better rather than gumming up your server by "cleaning" their images.
How hard to set up? It's fairly easy...after all you're just having some server code pull a remote image and save it to a specified server directory. The only modestly hard part is:
Make sure the server never interprets one of those client-inspired urls as executable (viruses!)
Clear the new directory often so the server is not over-weighted with images loaded for the client
Set limits on the size and quantity of images the client can upload to your server (denial-of-service attack!).
I have a page with a <source> for an HMTL5 video player; I need to obtain its file size.
Is it possible to check the size in MB of a video uploaded on the server from a <source>?
Does the HTML5 API provide some functions for this? Solutions with PHP or JavaScript are both fine.
While the best way to do this would be via a server side script that responds to (say) and Ajax request, reads the size of the file and responds (or depending on how the pages are being generated you could add it as a custom property to the element when you create the page the only way I can think of to answer your specific question would be to load the file itself via an ajax request and check the size of the respond - see Why don't all videos load on page in Chrome? for an example of how to do that
its common place to use javascript like in this exsample:
Example: http://www.htmlite.com/JS019.php
My question is: Does the second image download each time or is it cached when the page first loads. If so how does the server know to cache the image?
Are you asking if the image is cached in your browser or in the server?
In both cases, the answer would be yes if cache is on.
Basically, your server knows the image must be put in cache when it receives a request from a client asking to download this image. So the behavior is the same with or without javascript on your HTML page. This only applies in the case where cache is activated on the server, obviously.
It seems to me if information is already being output to a user by a browser it ought to be accessible in the DOM in some manner via javascript. When you upload a file using a webkit browser (and possibly others) using the good old iframe trick the browser displays an upload percent in the status bar at the bottom of the browser window. It would be pretty amazing to be able to tap into that instead of needing to query the server for that same information. Has anyone ever tried to do so?
I have try something like this. If using old method with iframe for uploading files you can get upload information only if you have APC enable on server side (for php). With javascript the maximum that you can know is the start and the end of the upload (by using iframe onload event). So you can use an animated gif when file upload start and remove the animated gif when it ends (that causes the onload event of the iframe).
Then after upload iframe will contain any errors message of the upload status. You can do some more trick by returning file info as JSON when upload finish.
Is there any Jquery Plugin to perform the image dimension operation on an image before being uploaded using uplodify. i want the plugin to check the image dimension with the fixed define size and then only process for uploading.
right now i am doing it with PHP function, instead of server side validation i want to adopt the client side validation.
I do not believe that this is possible, since JavaScript is not allowed to access the local filesystem (for security reasons).
Have you considered any other alternatives?
I have similar problem as you do, though i am using asp.net C#
this is my solution:
of course, obvious user guidance of the image uploading control
use server end image thumbnail
facility, automatically resize the
image into the right size that your
system required.
display result preview for user
doing final review after upload.
it is ideal to check in client end first, however JS may causing compatibility issue.
secondly, always check on server end, since client end is not always reliable.