I'm trying to see what is the best way to implement a mechanism as in use here: https://sortfolio.com/signup . Essentially, one selects a picture to be uploaded. Picture uploads in the background and then it appears on the page with no refresh required.
So far I manage to do the POST of the image (I'm posting to an IFrame, using a jQuery plugin) and show the progress bat. I don't quite understand, when / how to pull the image back.
I'm using paperclip for processing.
Any thoughts ?
Thanks.
I did some time ago an example application for a similar problem. You can find it here. It renders the image on a modal window, but I'm quite sure you can find some ideas on how to solve your problem.
In your Rails controller, when responding to an AJAX request, send back the newly uploaded image URL, the entire image as a JSON object (w/ URL included), or the partial HTML to render the image.
For example, using the first method, use jQuery to set the src of the img.
Something like within the callback of the AJAX request:
$('#image').attr('src', /* url sent back from AJAX request */);
Related
I am trying to upload file without refreshing the page.
I got 1 form, 1 submit, 1 file input and 1 iframe in order to prevent refreshing.
Form sending data via iframe, so my form have target attribute.
After my c# function's work, I want to return result data, such as message, issuccess etc.
I don't know how to return result data without using http header.
Maybe it's also not possible with http header. I don't know. I am here to learn how to do.
Transferring result data via http header makes sense? Is it preferable way?
Does it occurs vulnerability?
Any other suggestions?
Thanks in advance.
Typically it's hard to get a file over the wire without a form post.
What I've done often is use an invisible iframe for a form post and then have the iframe call a function in the parent page upon load. This assumes you can't just use jquery or a recent version of dojo to take care of this for you.
http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/
If you can use jquery it's much nicer. Edit: this is under the mit license
http://blueimp.github.com/jQuery-File-Upload/
Why not take advantage of the HTML5 File API. These links should point you in the right direction.
http://www.html5rocks.com/en/tutorials/file/dndfiles/
http://timothypoon.com/blog/2011/05/10/ajax-uploading-with-html5s-file-api/
http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-2 shows how to upload files. However I would like to have someone show me the code example where I can display the progress of the file upload using ProgressMessageHandler class. So far I was able to find examples of the class being used in WPF or console application, but I would like to use it either on the MVC controller method or the WebAPI method directly and show the upload progress to JQuery UI progress bar. Can someone post the sample code of how it can be done?
So you want to display the send progress on the client, by tracking the receive progress on the server? Keep in mind that the ProgressMessageHandler class is server-side code.
In order to do what you're proposing, every time the server receives a packet, it would need to send back to the client the details of the progress. But in order for a web browser to receive any data, it must first request it. So the browser would have to upload the file, and simultaneously be asking the server for progress updates?
I think you've got this all backwards. If you're wanting to display file upload progress in a web browser you need to look at browser technologies. Like the HTML5 upload (there's plenty of examples out there of using HTML5 to track file upload progress). Or one of the pre-HTML5 options that got a lot of mileage was Shockwave Flash plugins. GMail does, or at least did use a Shockwave Flash plugin for progress reporting on attachment uploads for example.
I am wondering if this is possible or not(if not any suggestions).
I have an asp.net mvc 3 site that will have a form with many fields. This form will be submitted by ajax through jquery library.
I want to allow the user to upload one image. I know there are uploaders for jquery that I can use but from what I seen is they got their own upload button.
I am wondering if it is possible to have they select the image but not upload. They then hit the submit button and then everything gets submitted in one go.
Or do I have to first specially upload the image and store it in a session or something then when they submit the form put everything together and do whatever is needed?
There is no direct way if you are using FileUpload and Ajax together. There are several plug-in available for this.
1.Uploadify
2.jQuery Form Plugin
Hope this information help you. If you still want to do normal way than wait until HTML5 become popular.
I am using JQuery mobile in asp.net web form website. I have the following code at the page "pageA.aspx".
View Saved Orders
When I am clicking on this link I am successfully redirected to the PageB, but the URL I am getting is
http://localhost:3244/MyFirstJQueryApp/PageA.aspx#PageB.aspx
But I want URL like this further processing, please help
http://localhost:3244/MyFirstJQueryApp/PageB.aspx
I have done it by setting target="_top" property.
Is this a good practice ?
There are a couple of mods out there (can't find the one I wanted) to remove the hash in the URL, but you have to edit the jQM framework.
You could try using the changePage() http://jquerymobile.com/demos/1.0a4.1/#docs/api/methods.html and set the transition without tracking it in history option to true (I think it's true)
Here is some more documentation on navigation as well: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html
mightbe able to think of another way
The idea behind jQuery Mobile is that you don't do it the way you're trying to do it! Check Dynamic pages with jQuery Mobile, which shows you how to let jQm do the work in the background by loading new data into the DOM.
I have a rails app with posts and post comments. At the top of the post page, I want to display thumbnails (automated) of all of the image contained within the post and post comments. As users add post comments with images, the thumbnails at the top will be updated to reflect the new images. Two options come to mind, but none of them seem perfect:
1) Scrape the page using ScrAPI or similar
2) Create methods in post and post_comment models that scan content for images, which would require some kind of image regex and database queries
It seems like there should be a better way, with some Javascript magic or something. Any ideas?
URL regexes are a solved problem, so I'd venture for option 2 that checks the posted content for URLs. Then you can go one step further and do a HEAD request against the image to check to see its content-type.
If the content type is a known image, download it and store it somewhere (db/s3, etc) for rendering later.
I'd put these on a background queue like Delayed Job, though, as those external requests would affect the user's experience.
You want to have the updated images after every post, so option 1 sounds better. And this would still work for browsers that don't support javascript.