Tag: forms

Multiple Instances of Component Firing Incorrect onChange – ReactJS

Hi everyone,

I ran into a bit of an issue today while trying to render multiple instances of a component on a single page. Each component had a file input that was bound with an onChange event. When triggered the onChange function referenced the first component placed on the page no matter which instance was clicked.

The issue ended up being that the id of the input fields coincidentally overlapped. This meant that there were multiple instances of the field on the page with the same id value. Ensuring that each one was unique resolved the issue.

Took a fair while to narrow this one down so hopefully it’ll be able to help someone else!

Thanks,
Chris

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

index.js:2178 Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Hi everyone,

Bit of a silly error I ran into today. This one took an embarrassingly long time to figure out unfortunately:

index.js:2178 Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

It turned out that the error was a result of not having added the state variable in the constructor. It was then being created onChange and converting the input element into a controlled input.

I was trying to use a checkbox in my form and had copied the input from another view:

Ticket
 {this.handleChange(event)}} />

HandleChange is as follows:

/* Sets a state value based on the name of the input changed */
handleChange: function (caller, event) {

    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    caller.setState({ [name]: value });
}

Bit of a silly one, but hopefully it will be able to help out anyone else who runs into it!

Cheers,
Chris

Select Not Showing Selected Values – AngularJs

Hey everyone,

I had a bit of trouble getting a selected option to show up with AngularJs. It turned out that I needed to add an ng-selected attribute:

    {{command.Status}}
    
        Enabled
        Disabled
        Deleted

Check out this Stackoverflow post for more info: http://stackoverflow.com/a/18336858/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

Select List (ng-select) – AngularJS

Hey everyone,

Just a quick post on how to do up a select list in AngularJS. This one took a bit of time to work out, particularly the display/value pairing.

HTML:


    

        Status:

JavaScript:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.status_options = [
            { display: 'Enabled', value: 'enabled' },
            { display: 'Disabled', value: 'disabled' },
            { display: 'Deleted', value: 'deleted' }
        ];
    
    $scope.lesson = {
        BusinessId: 0,
        Description: null,
        Duration: 0,
        Price: 0,
        ProductId: 0,
        Quantity: 0,
        Start: "/Date(-62135596800000)/",
        Status: 'enabled', //Change to null in order to remove default
        Title: null,
        Type: null
    };
}

If you’re just following along, I’ve added a quick JSFiddle: http://jsfiddle.net/rtR6e/5/

You’ll notice that in the markup, the value is actually an index. This is pretty misleading, but Angular will actually assign the appropriate value to the model (“enabled”, “disabled”, etc).

Another thing that you can do fairly easily, is to remove the default value. Simply make the status null. You can test both these by outputting the JSON or using http://jsfiddle.net/rtR6e/5/.

Check out the following StackOverflow post for more info: http://stackoverflow.com/a/13808743/522859
Or the documentation: http://docs.angularjs.org/api/ng.directive:select

Excon::Errors::SocketError Broken pipe (Errno::EPIPE) – Ruby on Rails

Hey everyone,

I was having a bit of trouble with CarrierWave on Amazon S3 today. When attempting to upload files that were larger than ~150kb I received one of the following errors (depending on config):

getaddrinfo: Name or service not known carrierwave
Excon::Errors::SocketError in PhotosController#create
Broken pipe (Errno::EPIPE)

 

Despite the vague error, the solution was fairly simple. The region configured in my initialiser was different to the one my bucket was created in.

In order to find out which region you need, logon to your AWS console and browse to an uploaded image. Check the endpoint URL (properties > static website hosting) and simply copy the region. For examples:

Endpoint: testbucket123321.s3-website-us-west-2.amazonaws.com
Region: us-west-2

A couple of final tips if this doesn’t work for you:

  • You need the region codes, not the name. For instance, “Oregon” won’t work
  • Don’t forget to restart your app after making changes to the initialiser

    •  

    Fields Missing from jQuery Post – Serialize Data

    Hey everyone,

    I was using jquery’s serialize method to post completed form data only to find that a number of my fields were missing.

    
                //Display loader and disable forms
		disable_form_fields(true);

                //Post via ajax
		$.ajax({
			type: 'POST',
			url: 'uploads/add',
			data: $(form).serialize(),
			success: function(data, text_status, oHTTP){
				handle_form_response(data, text_status, oHTTP, $(form).data('file_id'))
			},
			error: function(){

				//Hide loader etc
				set_form_loading(false);

				//Unspecified error
				alert('An error has occurred.');
			},
			dataType: 'json'			
		});

    Thanks to this stackoverflow post I realised that the data wasn’t being serialised because I’d disabled most of the fields beforehand. This was done in order to prevent the user from changing the values. To get around this I simply had to serialise the data BEFORE disabling anything. 

    
                //Post via ajax
		$.ajax({
			type: 'POST',
			url: 'uploads/add',
			data: $(form).serialize(),
			success: function(data, text_status, oHTTP){
				handle_form_response(data, text_status, oHTTP, $(form).data('file_id'))
			},
			error: function(){

				//Hide loader etc
				set_form_loading(false);

				//Unspecified error
				alert('An error has occurred.');
			},
			dataType: 'json'			
		});

               //Display loader and disable forms - DO THIS AFTER SERIALISING
		disable_form_fields(true);

    Let me know if you have any issues.

    Blocking Duplicate Payment – Paypal

    Hey everyone,

    Just a quick post on how to block duplicate payments with PayPal. All you have to do is pass an invoice parameter and then select the ‘block multiple payments per invoice ID’ option in PayPal. I’ve attached an extract from PayPal’s documentation below:

    1. Login at https://www.paypal.com
    2. Click the ‘Profile’ subtab
    3. Under ‘Selling Preferences’ click ‘Payment Receiving Preferences’
    4. Choose ‘Yes, block multiple payments per invoice ID’ if you wish to utilize this feature while passing the “invoice” variable
    5. Scroll to the bottom and click the ‘Save’ button

    To pass the invoice number for Website Payments Standard, you will need to add a line of code to your existing button code. You cannot add this code to a button originally created as encrypted. Example below:

    <input type=”hidden” name=”invoice” value=”001″>

    The documentation is available at the following link:
    https://ppmts.custhelp.com/app/answers/detail/a_id/165