Web API 2 – ExceptionMessage=No MediaTypeFormatter is available to read an object of type ‘HttpPostedFileBase’ from content with media type ‘multipart/form-data’.

Hi everyone,

I ran into the following error while trying to get image uploads working with Web API 2:

ExceptionMessage=No MediaTypeFormatter is available to read an object of type ‘HttpPostedFileBase’ from content with media type ‘multipart/form-data’.

I had been trying to copy the following from an mvc controller in another project:

public IHttpActionResult Upload(HttpPostedFileBase file, Models.Image.ImageAssociationType associationType, int associationId)

The fix was to use the following instead:

public IHttpActionResult Upload(Models.Image.ImageAssociationType associationType, int associationId)
{
var file = HttpContext.Current.Request.Files.Count > 0 ? HttpContext.Current.Request.Files[0] : null;

Thanks to this stackoverflow post for the info: https://stackoverflow.com/a/28370156/522859

Dragging a File from File Explorer Causes Google Chrome to Crash

Hey everyone,

A team member found an interesting bug today that caused chrome to go non-responsive. The cause was simply dragging a file from the file explorer onto a drag and drop upload area. It is reproducible on every site I’ve tested, including Gmail and Dropbox.

Reproduce

  • Go to https://mail.google.com
  • Click compose
  • Click attach files (close any of the annoying popups that appear)
  • DRAG a number of files from the file selector window to the new message screen (they will start to upload) (IMPORTANT: these need to be dragged from the file selector popup, NOT a new explorer window)
  • While they are still uploading hit cancel on the file browser window. Browser will go non-responsive

A bug has been reported here: https://code.google.com/p/chromium/issues/detail?id=388661

Detecting FileSize – jQuery

Hey everyone,

Just a quick post on how to detect a file’s size with jQuery. I’m currently using a version of this for basic client side validation:



    Upload image:
    

$(document).ready(function(){
    $('#image-file').bind('change', function() {
        
        var fileSize = this.files && this.files.length > 0 && this.files[0].size ? this.files[0].size / 1024 / 1024 : 0;
        
        if(fileSize > 0){
            $('body').append('
' + fileSize + ' MB
'); } else{ $('body').append('
' + fileSize + ' MB
'); } }); });
.file{
padding: 5px 7px;
border-radius: 3px;
background-color: green;
color: white;
margin: 5px;
}

.file.valid{
background-color: rgb(127, 197, 127);
}

.file.invalid{
background-color: rgb(197, 127, 127);
}

Here’s the link to the full fiddle: http://jsfiddle.net/nLLMF/

There’re also a whole heap of other options listed on this StackOverflow post if you’re chasing something a bit more robust: http://stackoverflow.com/a/13249924/522859

http://jsfiddle.net/nLLMF/embedded/

POST http://192.168.1.3:3000 406 (Not Acceptable) – AJAX with Ruby on Rails

Just a quick post on an error I ran into today when trying to create an AJAX image upload with Ruby on Rails. When submitting an AJAX form I received the following error:

POST http://192.168.1.3:3000/uploads 406 (Not Acceptable)

It turns out that there is a fairly simple (and admittedly obvious) solution. Ensure that your controller has an appropriate response for JavaScript files:

i.e.
Form:

{:multipart => true}, :remote => 'true') do |f| %>
  
    

prohibited this image from being saved:

  • 'button' %>
    @upload.product_id %>

    Form JavaScript:

    /* Wait for document to load */
    $(document).ready(function() {
        create_ajax_form('new_upload');
    })
    
    /* Create an ajax form */
    function create_ajax_form(form_id){
    
       //Handle ajax submission
       $j('#' + form_id).submit(function(){
    
           //Send for data
           $j.post($j(this).attr("action"), $j(this).serialize(), null, "script");
    
           //Return false
           return false;
       });
    }
    

    Controller Action:

    #Create an upload
      def create
    
        #Create vars
        @upload = Upload.new(params[:upload])
    
        #Create responses
        respond_to do |format|
          if @upload.save
    
            #Retrieve product
            @product = Product.find_by_id(@upload.product_id)
    
            #Create success responses
            format.html { redirect_to @product, :notice => 'Image Added Successfully!'}
            format.js
          else
    
            #Create error responses
            format.html { render :action => 'new'}
            format.js
          end
        end
      end
    

    JavaScript Response:

    alert('test');
    

    Not Recognised by the ‘identify’ command – Paperclip

    Just a quick post on another problem I ran into while setting up PaperClip. When attempting to submit a form WITHOUT an image I received the following error message:

     
    Assets asset /tmp/stream20120218-22611-dgnkr-0.exe is not recognized by the 'identify' command.
    

    Apparently the most common cause of this issue is one of two things:

    #1: You don’t have RMagick installed
    The easiest fix for this is to simply install the rmagick gem. Simply add rmagick to your Gemfile and run bundle install. Restart your server and you should be ready to go.

    #2: Your command_path isn’t set correctly
    Run the following command from your console:

    chris@chris-VirtualBox:~/site$ which identify
    /usr/bin/identify
    

    Then add the path that is returned to your environment settings:

    Paperclip.options[:command_path] = "/usr/bin"
    

    #3: If all else fails

    If none of the above seem to be causing your issue, try adding the following to your model:

     def asset?
        !(asset_content_type =~ /^image.*/).nil?
      end
    

    This will simply prevent the file being processed if it’s not an image, avoiding the issue all together. Hopefully this’ll help someone out, let me know if you come across any other solutions.

    UPDATE:
    Apparently a more recent cause of this issue is an update to the cocaine gem, rolling back to version 0.3.2 appears to resolve the issue. Thanks to Ahmed and Fabrice for bringing it to my attention:
    https://github.com/thoughtbot/paperclip/issues/1038
    http://stackoverflow.com/a/12760881/522859

    PaperClip Issues – Ruby on Rails

    I finally decided to replace all my existing code to handle images with Paperclip. I was following the screencast by Emerson Lackey, #134 Paperclip, however I ran into a couple of issues. Thankfully they were all very easily fixed, and probably wouldn’t have occurred at all if I’d simply watched the whole screencast instead of trying to rush on ahead.

    Issue #1:
    The first issue I encountered was that my asset fields weren’t appearing on the page:

    
          
            

    I spent way too much time trying to work this one out, especially considering how obvious the solution is – the screencast is simply missing an “=” after the initial “<%" in "<% f.fields_for". Simply amend it as follows:

    
          
            

    Issue #2:
    The second one is actually encountered and addressed by Emerson himself. Unfortunately I started trying to find a solution before seeing his, so just in case someone else does a Google search I’ll include the issue here:

    undefined method `symbolize_keys!' for "/system/assets/1/original/mack_truck.jpg?1329550205":String
    
         
           
           

    The problem here is simply that the parenthesis are in the wrong place, simply amend your code as follows:

         
           
           

    Anyway, hopefully this helps someone else out – let me know if there are any issues.

    Update: Don’t name your model assets!
    Unfortunately I followed the tutorials naming example and called my model Asset. While this may have been fine in earlier version of rails it causes quirky conflicts with the asset pipeline. I strongly encourage you to use a different name i.e. Uploads