jQuery and input type=file

  • a small test project on rails+backbone. The point is: creation of picture posts and signatures. The model is:


    class TestBackbone.Models.Post extends Backbone.Model
        paramRoot: 'post'
            title: null
            path: null
    class TestBackbone.Collections.PostsCollection extends Backbone.Collection
        model: TestBackbone.Models.Post
        url: '/posts'

    Rowater posts_router.js.coffee:

    class TestBackbone.Routers.PostsRouter extends Backbone.Router
      initialize: (options) ->
        @posts = new TestBackbone.Collections.PostsCollection()
        @posts.reset options.posts

    "new" : "newPost"
    "index" : "index"
    ":id/edit" : "edit"
    ":id" : "show"
    ".*" : "index"

    newPost: ->
    @view = new TestBackbone.Views.Posts.NewView(collection: @posts)

    index: ->
    @view = new TestBackbone.Views.Posts.IndexView(collection: @posts)

    show: (id) ->
    post = @posts.get(id)

    @view = new TestBackbone.Views.Posts.ShowView(model: post)

    edit: (id) ->
    post = @posts.get(id)

    @view = new TestBackbone.Views.Posts.EditView(model: post)

    New post template.jst.ejs:

    <h1>New post</h1>

    <form id="new-post" name="post" enctype="multipart/form-data">
    <div class="field">
    <label for="title"> title:</label>
    <input type="text" name="title" id="title" value="<%= title %>" >

    <div class="field">
    <label> path:</label>
    <input type="file" name="path" id="path">

    <div class="actions">
    <input type="submit" value="Create Post" />


    <a href="#/index">Back</a>

    submission new_view.js.coffee:

    TestBackbone.Views.Posts ||= {}

    class TestBackbone.Views.Posts.NewView extends Backbone.View
    template: JST["backbone/templates/posts/new"]

    "submit #new-post": "save"

    constructor: (options) ->
    @model = new @collection.model()

    @model.bind("change:errors", () =&gt;

    save: (e) ->

    @model.set("iframe", true)
    @model.set("path", this.$('form :file'))
      success: (post) =&gt;
        @model = post
        window.location.hash = "/#{@model.id}"
      error: (post, jqXHR) =&gt;
        @model.set({errors: $.parseJSON(jqXHR.responseText)})

    render: ->
    @$el.html(@template(@model.toJSON() ))

    return this


    #= require_self
    #= require_tree ./templates
    #= require_tree ./models
    #= require_tree ./views
    #= require_tree ./routers

    window.TestBackbone =
    Models: {}
    Collections: {}
    Routers: {}
    Views: {}

    As long as I didn't have a file, the line was great. But I should have replaced it on the file - when I choose the file, I get an exception.

    Uncaught InvalidStateError: Failed to set the 'value' property on
    'HTMLInputElement': This input element accepts a filename, which may
    only be programmatically set to the empty string.

    On jQuery's file for jQuery.fn.extend.
    I understand this, for security purposes, does not change the local user file. But I'm not trying to change the file, I'm just counting it. I don't know what the reason for this behavior is? I'll be grateful to any advice.

  • JavaScript of the browser cannot access arbitrary files (although). That's right. If you're trying to tie your scruple logic to such a function, redo the logic. For example, by downloading the file on the server, following the results of his contents on the page.

Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2