Rails - how to save text data with Uploadify? - ruby-on-rails

I have a page, where I can put a text and to this text I would need to add several images. For uploading images I want to use Uploadify.
Now I am solving the problem, that when I choose images and send the form, the data are not sent, only the Uploadify start to transfer files. But the text information are not transferred.
I am doing it this way:
%script{:type => "text/javascript"}
- session_key = Rails.application.config.session_options[:key]
$(document).ready(function() {
$('#file_upload').click(function(event){
event.preventDefault();
});
$('#file_upload'). ({
'uploader' : '/uploadify/uploadify.swf',
'cancelImg' : '/assets/uploadify-cancel.png',
'multi' : true,
'auto' : false,
'queueID' : "file_queue",
'script' : '/users/#{params[:user_id]}/listings',
'onClearQueue' : true,
onAllComplete : function(queueData) {
$('#upload_next').removeClass('disabled');
},
'onComplete' : false,
'scriptData' : {
'_http_accept': 'application/javascript',
/'format' : 'json', ?????????????
'_method': 'post',
'#{session_key}' : encodeURIComponent('#{u cookies[session_key]}'),
'authenticity_token': encodeURIComponent('#{u form_authenticity_token}'),
'text1' : $('#text1').val(),
'text2' : $('#text2').val(),
'text3' : $('#text3').val(),
'text4' : $('#text4').val()
}
});
$('#photo_submit').click(function(event){
event.preventDefault();
$('#file_upload').uploadifyUpload();
});
});
Is there any way to attach these text data to upload? And also, how to make redirect when the upload (all data from form are saved) is done?
Thanks a million times!

This can done by sending your data along with the image using the formData attribute in uploadify.
scriptData attribute is not in use.
For setting up uploadify with rails you can visit
http://vignesh.info/blog/rails-4-uploadify-paperclip/

Related

big files upload twice on dropzone

I'm using dropzone to handle uploads in a rails app. It works just fine with small files, but unfortunately, when it comes to files > 300MB, things go sour: The upload animation freezes (nevers reaches its 'complete' state), user must reload the page, only to see that his file uploaded twice.
var myDropzone = new Dropzone("#resources-dropzone", {
url: "<%= upload_resources_path %>",
maxFilesize: 1000
});
myDropzone.on("complete", function(file) {
location.reload();
});
$(document).ready(function() {
var url = document.location.toString();
if (url.match('#')) {
$('.order-tabs a[href=#'+url.split('#')[1]+']').click();
}
});
Is there a way to prevent this behaviour ?

Unable to pass additional parameters in plupload

I'm using plupload, the JQuery UI implementation. I'm trying to pass additional parameters to the server, but I can't make it work. It should be pretty straightforward, the parameters are already set when the function is executed, so that should not be a problem. I've tried this:
function GetPlUploader(m)
{
$("#divOpplaster").plupload(
{
// General settings
runtimes: 'flash,html5,silverlight',
url: 'upload.php',
max_file_size: '10mb',
chunk_size: '1mb',
unique_names: true,
multipart: true,
multipart_params: [
{
'ordre': ordreibruk,
'mode': m}
],
// Specify what files to browse for
filters: [
{
title: "Bildefiler",
extensions: "jpg,gif,png,bmp"}
],
// Flash settings
flash_swf_url: 'plupload/js/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: 'plupload/js/plupload.silverlight.xap',
init: {
FileUploaded: function(up, file, info)
{
// Called when a file has finished uploading
console.log('[FileUploaded] File:', file, "Info:", info);
}
}
});
console.log("Ordre: " + ordreibruk + ". Mode: " + m)
$("#divOpplaster").dialog(
{
autoOpen: false,
width: 650,
show: "fade",
hide: "fade"
})
$("#divOpplaster").dialog("open")
// Client side form validation
$('form').submit(function(e)
{
var uploader = $('#uploader').plupload('getUploader');
// Files in queue upload them first
if (uploader.files.length > 0)
{
// When all files are uploaded submit form
uploader.bind('StateChanged', function()
{
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed))
{
$('form')[0].submit();
}
});
uploader.start();
}
else
alert('Du må velge minst én fil for opplasting.');
return false;
});
}
I've also tried to add this in the $('form').submit section:
uploader.bind('BeforeUpload', function(up)
{
up.settings.multipart_params =
{
'ordre': ordreibruk,
'mode': m
};
});
But to no avail.
I'm sure I'm overlooking something really simple, but what?
Kind regards,
Anders
I must confess I use to put my parameters as query string parameters in the url :
during init : url: '/upload.aspx?id='+Id,
or later : upldr.settings.url = upldr.settings.url + '&token=' + myToken;
It works fine.
Hope this will help
Had the same issue. Stumbled upon this snippet that can easily translated into coffescript as well that works for my project. Allows you to pass multipart params after initialization (like in the case a field can change before the upload is hit)
var myUploader = $('#uploader').plupload('getUploader');
myUploader.bind('BeforeUpload', function(up, file) {
up.settings.multipart_params = {path : $("#path").val()};
});
Call it after you do your normal initialize and setup of $("#divOpplaster").plupload(...) (and set your ID appropriately to your uploader field, of course)

How to display twitter search parse?

My first question with Stackoverflow. How do I display/read twitter search parse data in my webpage?
Below is the code I am working with. I can see 15 object in console.log() but I have no idea on how to show this in web page view.
My coding is below:
$
.ajax({
url : "http://search.twitter.com/search.json?q=gaga&callback=?",
dataType : "json",
timeout:1000,
success : function(data)
{
console.log(data.results);
//console.log(data.results);
//$('#twitter').html(data);// parse data here
},
error : function()
{
alert("Failure!");
},
});
See if this helps http://jsfiddle.net/2cxfN/
$.ajax({
url : "http://search.twitter.com/search.json?q=gaga&callback=?",
dataType : "json",
timeout:1000,
success : function(data)
{
console.log(data.results);
//console.log(data.results);
//$('#twitter').html(data);// parse data here
$.each(data.results, function(i,o){
console.log(o);
$('<img/>', {src:o.profile_image_url}).appendTo('body');
$('<div/>').text(o.from_user).appendTo('body');
});
},
error : function()
{
alert("Failure!");
},
});​
Ah, I see you have a div with an id twitter - you would parse that HTML into what you want using the variables in each object that's in data.results, which I've extracted as o, then appendTo('#twitter');

Pass data to a html page opened in jQuery UI dialog

I have succeeded in opening a html page in a jQuery dialogbox. I have also passed a data called 'vendorid' to it, but do not know how to retrieve it in the html page that opens.
$('#btnShowSupplierStats').click(function () {
showUrlInDialog('../supplierstats.htm?vendorId=' + $(this).attr('vendorId')); return false;
//showUrlInDialog('../Default2.aspx'); return false;
});
function showUrlInDialog(url) {
var vid = $(this).attr('vendorId')
var tag = $("<div id='statsDiv' vid ='"+ vid +"'></div>");
$.ajax({
url: url,
success: function (data) {
tag.html(data).dialog({ show: "fadein", hide: "fadeout",
modal: true, minHeight: 550, minWidth: 800, autoOpen: false,
close: function (event, ui) { $(this).remove(); }, buttons: [{
text: "Close", click: function () { $(this).dialog('close');
return false; } }] }).data("vendorid", vid).dialog('open');
return false;
}
});
}
UPDATE: The answer from Farrukh would do this job ( i.e. second option he mentioned, since I am using a 100% client-side approach). But I did not store the data to be passed in a hiddent field. Instead I used the following approach which also works always:
When you are about to open the dialog through jQuery, just before this, set the attribute for the button which is the opener of dialog. In my case, I set an attribute called 'vendorid' on this button. Let's say the id of the opener button is 'btnOpenVendorDialog'. So need to use the following code.
$('#btnOpenVendorDialog').attr('vendorid', 'Vendor1234');
//open your dialog here ....
2.Then, in the html page that opens in dialog window, I can easily retrieve this attribute without any problems.
var vid = $('#btnOpenVendorDialog').attr('vendorid');
THAT's IT. YOU ARE ALL READY TO do whatever you want with this passed data.
There are two ways to do this:
Use server side and get the passed data in post or get(in your case vendor ID is get) and use it to populate a hidden element or data-vendorID attribute of any available element.
If you are using javascript then data vendorID that you have passed as vid is available after success function so place it in as a hidden input field or place it as a data-vendor-id on one of the other DOM elements and access it from there.

Sencha touch XML response to JSON

I have recently started a project in Sencha touch with existing Web-services.
Being very new to the technology, I am facing certain issues in accomplishing some functionality.
Problem
I have to call login service and the request goes like:
http://domain.sub.com/Service.asmx/LoginService?body={"Username":"maj#smaj.com","Password":"p12345","Token":122112321123212123,"Method":"Login","LabId":"(null)","Hash":"fr3f33f3334348u8yy8hfuhdu8bdy7y89u89x8998c89789c87d78r9","DeviceType":"iPhone Simulator","DeviceId":"91BF3299-A94C-5AD3-9C35-A5C9BBBB6AA8","ApplicationType":"iPhone","Id":"998390494"}
but the response is coming in XML format as:
RESPONSE:
<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://domain2.sub2.com/MobileWebService/">{"Id":"null","Message":"Logged In.","Status":true,"LoggedIn":true}</string>
I have to parse this xml to json to get : {"Id":"null","Message":"Logged In.","Status":true,"LoggedIn":true} out of the response.
then use the Status, LoggedIn and Id to verify the login.
My Idea
I am not sure whether its right, I am trying to create two stores, xmlStore and JsonStore.
??
How will I store the xml response inside a string.
How Will I pass this string to Json Store (at the place of url?)
I may sound very naive to this, but this is my problem ;)
Please guide.
EDIT:
I realized tha I am diving cross domain request.
is that what is causing problems or confusion. How to deal with it suppose I did not had cross domain requests?
If you are doing cross domain requests use scripttag in your proxy in place of ajax. Here is a json example
ex.
mApp.stores.onlineStore = new Ext.data.Store({
model: 'XPosts',
proxy: {
type: 'scripttag',
url : 'http://domain.com/data.json',
reader: new Ext.data.JsonReader({
root: 'pages'
}),
timeout: 3000,
listeners: {
exception:function () {
console.log("onlineStore: failed");
},
success: function(){
console.log("onlineStore: success");
}
}
},
autoLoad: true
});
Offline store:
mApp.stores.offlineStore = new Ext.data.Store({
model: 'XPosts',
proxy: {
type: 'localstorage',
id: 'appdata',
reader: new Ext.data.JsonReader({
root: 'pages'
})
},
autoLoad: true
});
Then, in your launch :
this.stores.onlineStore.addListener('load', function () {
console.log("onlineStore: online");
mApp.stores.offlineStore.proxy.clear();
console.log("offlineStore: cleared");
this.each(function (record) {
console.log("offlineStore: adding record");
mApp.stores.offlineStore.add(record.data)[0];
});
mApp.stores.offlineStore.sync();
console.log("offlineStore: synced");
mApp.stores.offlineStore.load();
});
this.stores.onlineStore.load();
May have some bugs so beforewarned!

Resources