read json data returned by the controller Rails

Question

I am working with the jquery file upload plugin. here

I upload a file and generate a json response as follows:

 @upload = Upload.new(params[:upload])
    respond_to do |format|
      if @upload.save
        format.json {render :json => [ @upload.to_jq_upload ].to_json}
      end

What I would like to do is get the info from the json object when it is sent back but I can't figure out where it is sent. Can anyone help figure out how to get at this information?

There is also a callback function in my application.js as follows:

$('#fileupload').bind('fileuploaddone', function (e, data) { }

I looked at this data and I can't figure out how to parse it. If I do data.url it gives me the url to delete without the id so this is the upload data. What I want is to parse the returned data. data.result for example but this just gives me object Object.

Any help would be appreciated.

Here is the view:

<div id="fileupload">
    <%= form_for @upload, :html => { :multipart => true } do |f| %>
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
                <span>Add files... or drop them to upload</span>
                <%= f.file_field :photo, :id => "upload_photo" %>                
            </label>
        </div>
    <% end %>
    <div class="fileupload-content">
        <table class="files"></table>
        <div class="fileupload-progressbar"></div>
    </div>
</div>

<script id="template-upload" type="text/x-jquery-tmpl">
    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
        <td class="preview"></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        {{if error}}
            <td class="error" colspan="2">Error:
                {{if error === 'maxFileSize'}}File is too big
                {{else error === 'minFileSize'}}File is too small
                {{else error === 'acceptFileTypes'}}Filetype not allowed
                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                {{else}}${error}
                {{/if}}
            </td>
        {{else}}
            <td class="progress"><div></div></td>
            <td class="start"><button>Start</button></td>
        {{/if}}
        <td class="cancel"><button>Cancel</button></td>
    </tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
    <tr class="template-download{{if error}} ui-state-error{{/if}}">
        {{if error}}
            <td></td>
            <td class="name">${name}</td>
            <td class="size">${sizef}</td>
            <td class="error" colspan="2">Error:
                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
                {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
                {{else error === 3}}File was only partially uploaded
                {{else error === 4}}No File was uploaded
                {{else error === 5}}Missing a temporary folder
                {{else error === 6}}Failed to write file to disk
                {{else error === 7}}File upload stopped by extension
                {{else error === 'maxFileSize'}}File is too big
                {{else error === 'minFileSize'}}File is too small
                {{else error === 'acceptFileTypes'}}Filetype not allowed
                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
                {{else error === 'emptyResult'}}Empty file upload result
                {{else}}${error}
                {{/if}}
            </td>
        {{else}}
            <td class="preview">
                {{if thumbnail_url}}
                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
                {{/if}}
            </td>
            <td class="name">
                <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
            </td>
            <td class="size">${sizef}</td>
            <td colspan="2"></td>
        {{/if}}
        <td class="delete">
            <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
        </td>
    </tr>
</script>

GtotheB · Accepted Answer · 2011-12-02 18:27:48Z

I'm not familiar with ruby. However, in the fileuploaddone bind, the "data" object contains the data to parse or access directly.

data.jqXHR.responseText should contain the json string of the returned data. With that, you can (in Javascript at least) call the following (depending on what you have for JSON) to get the JSON object:

jQuery.parseJSON(data.jqXHR.responseText)

-or-

JSON.parse(data.jqXHR.responseText)

Alternatively (and much more easily), you can check to see if data.result is valid. If so, it would look something like:

[Object { name="image.jpg", size=43554, type="image/jpeg", more...}]

To access the file name (e.g.), you would get it via:

data.result[0].name

Hope this helps.

jwako · Accepted Answer · 2013-04-16 09:45:50Z

0

Please try this in your controller.

render :json => { files: [@upload.to_jq_upload] }

answered Apr 16, 2013 at 9:45

jwako

1732 silver badges12 bronze badges

Collectives™ on Stack Overflow

read json data returned by the controller Rails

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related