Rails - creating a system for drag-and-drop download - ruby-on-rails-3

This is a problem I'm trying to think about how to approach -- I haven't actually started it yet.
What I want to do is create a system where there is a gallery of images. These images can be dropped into a folder or some icon in one part of the screen. Then, the images that have been placed in this folder should be able to be downloaded as a zip.
I was intending to use jQuery to do the drag and drop, probably with some AJAX to accomplish the rest of the stuff, but I'm really just not sure how I would accomplish doing this, or if it's even possible (like if the web application can compress the folder of images).
Also, I'd be programming in Rails 3.
Any ideas?

Sounds like a neat interface. I think jQuery drag and drop is the way to go. Once an image is dropped, trigger an AJAX request GET '/photos/download/#{photo_id}'. This action could then utilize Rails send_file, http://apidock.com/rails/ActionController/Streaming/send_file.
def download
#photo = Photo.find(params[:id])
send_file #photo.image
end

Related

how to implement cross-component upload progressbar in AngularDart

I have been implementing a small AngularDart projecjt which contains serveral components. One of those components can upload file to server. I would like to implement an upload progressbar that keep upload the file and show upload progress while user navigate to other components. (like other file upload website such as Dropbox, Google Drive. User can go to other section of website while the uploading keep working). Is there any guide or solution to implement such functiionality? (For now, I can implement asynchronous upload and progressbar yet.The Problem is get it to work across components.)
Thanks for any help. :)
PS. sorry for my broken English.
You can implement your GUI in a view and place it using ng-view. When you put your progress bar outside the of the ng-view it should stay on the screen when the view changes.

Dynamic User Interface in iOS

Im struggling with a thought here. Let's say a user has his own CMS where he can fill the content for our app. One of his options is to create a view by uploading images and typing text. Well keep it very simple and imagine he only uploads a image (320 x 20) and some text. So an image on top and some textlines below.
What would be the best way to let my app know of this layout and download the contents? I was thinking of a downloadable XML file which defines the layout but don't really know how to implement this or if its even the best way.
Oh and the content and layout must be downloadable for offline use too.
Another option what I was thinking of is showing the layout in a webview but I can't figure out how to download the mobile website for offline use.
A push in the right direction would be appreciated!
We use a custom XML and it is working good. All texts inside 'label tags' are in XHTML
remember to:
be specific when defining the xml to save some effort
write a limiting XSD! So nothing 'surprising' creeps into the xml
remember not include everything in ONE xml file as that would get rather large rather quickly. Choose a scheme for portioning the XML

Fine Uploader: resizing large files before upload?

I'm evaluating Fine Uploader compared to various other options, specifically JQuery File Upload.
I generally prefer the Fine Uploader approach as it's more lightweight, compared to JQuery File Uploader which has dependencies on Bootstrap and JQuery UI.
However it's important to be able to resize images: e.g., a user may select a large file from their camera and this may be very large - uploading the full resolution photo may take a very long time. JQuery File Upload doe this.
Additionally we don't have much use for very high resolution files.
If possible (I'm aware some browsers may not support this), I'd like to be able to resize images client size.
Is this possible?
Fine Uploader does not currently have any native support for image manipulation. This is a feature in our backlog, but we have not had many users tell us they are interested in this. This is one of the reasons why such a feature has yet to be implemented natively. There is a case, #707 that marks the start of native image-editing support for Fine Uploader. It is tentatively scheduled for 4.0.
However, you can certainly make use of FileReader and Canvas to resize the image. You can then submit this resized image as a Blob to Fine Uploader via the addFiles API method. At that point, the file has been submitted and Fine Uploader is ready to upload the item.
Essentially, the steps you would follow to handle this specific scenario, before Fine Uploader natively supports image manipulation:
Provide your own file input element(s) or make use of Fine Uploader's file/folder drag and drop support to get a handle on some files selected by the user.
Use FileReader to read the contents of the image.
FileReader will provide you with a URL for the image, assign that to the src attribute of an img element.
Draw the img onto a canvas element. This is where the resizing occurs.
Grab the URL of the resized image from the canvas element (canvas.toDataURL(...)).
Convert the URL to a Blob.
Pass the Blob to the addFiles API method of Fine Uploader.
The intent is to take care of most if not all of this for integrators such as yourself in the future by adding native image manipulation support to Fine Uploader.
Hope this helps.

Multiple photo upload using struts1

We happened to get requirement to upload the multiple files ( like the gmail attachments ) using struts 1.3.5 and Ajax.
I happened to go thorough lot of resources but no luck.
Can someone shed light on this possibly by suggesting or pointing to some useful resources.
I was also looking for a multiple file upload solution for my struts2 application. Since ajax form submit do not support image submission the only option to use was a hidden iframe strategy. However, i found this wonderful plugin which uploads multiple files withour reloading the page and also shows a cool progress bar. The best thing about this plugin is that it doesn't uses flash and works on IE too. I strongly recommend using this plugin
Donot use taglibrary defined file upload for uploading. You can still use
common- fileupload to handle file upload. By doing this you can dynamically
add one more input type file element below the current input type upload using
javascript. I doubt if there is any way to do this using pure struts 1.3.5 :) .

How to access Local file system using Silverlight 4 (Webbrowser control)

Our Silverlight application needs to show to the user previews of HTML pages it generates dynamically, so we want to use the WebBrowser to show these pages. The problem is that the HTML contains links to other local files such as images, flash objects, CSS and javascript files. The CSS and javascript could be placed inline in the HTML, but I haven't found a way to embed images. Something simple like this just doesn't work:
Creating the HTML file and the image file in the isolated storage is doable, but I can't get the path to the created HTML file to pass on to WebBrowser.Navigate(uri).
Reading the contents of the HTML file and calling WebBrowser.NavigateToString(string) will show the page, but not any linked images or scripts.
Linking to online sources is not an option as the application needs to work offline (i.e. out of browser) and performance would be much better if the images and flash objects were able to be cached locally.
So, is there any way in Silverlight of showing in the WebBrowser control a local HTML file that contains an image from the local file system, or is it impossible?
Thanks, sandeep agrawal
The only way to make that work is to make the Silverlight an OOB application, and then you can still only access the My* folders.
I heard that someone wrote a browser control that can be used without going OOB but not sure about that. This is a real pain, but a necessary one I guess.