jQuery and input type=file



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

    post.js.coffee:

    class TestBackbone.Models.Post extends Backbone.Model
        paramRoot: 'post'
        defaults:
            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
    

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

    newPost: ->
    @view = new TestBackbone.Views.Posts.NewView(collection: @posts)
    $("#posts").html(@view.render().el)

    index: ->
    @view = new TestBackbone.Views.Posts.IndexView(collection: @posts)
    $("#posts").html(@view.render().el)

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

    @view = new TestBackbone.Views.Posts.ShowView(model: post)
    $("#posts").html(@view.render().el)
    

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

    @view = new TestBackbone.Views.Posts.EditView(model: post)
    $("#posts").html(@view.render().el)
    

    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>

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

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

    </form>

    <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"]

    events:
    "submit #new-post": "save"

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

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

    save: (e) ->
    e.preventDefault()
    e.stopPropagation()

    @model.unset("errors")
    @model.set("iframe", true)
    @model.set("path", this.$('form :file'))
    
    @collection.create(@model.toJSON(),
      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() ))

    this.$("form").backboneLink(@model)
    
    return this
    

    test_backbone.js.coffee:

    #= 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