MvcFileUploader add/edit custom field

Question

I'm using MVCFileUploader https://github.com/marufbd/MvcFileUploader

This works really well for uploading images in my MVC project and associating them with an entity.

When I try to add a title field for each image that can be edited I can't get it to work. I'm not sure if I'm approching this the correct way. I've modified the templates in _MvcFileLoad.cshtml to have the additional field. I can get the title input in the controller at each upload but I don't know how to send it back to the view using the implementation of this project.

This is _MvcFileUpload.cshtml, I've added autoUpload:true

  $('#@(formId)').fileupload('option', { 
    autoUpload: true,
    maxFileSize: @Model.MaxFileSizeInBytes,
    resizeMaxWidth: 1920,
    resizeMaxHeight: 1200,
    acceptFileTypes: @Model.FileTypes
}); 

I've added an input for title

<form id="@formId" action="@Model.UploadUrl" method="POST" enctype="multipart/form-data">        
    <div class="row fileupload-buttonbar">                    
        <div class="col-lg-7">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>

            </span>
            Title: <input name="title" required />

At each autoUpload I can save the title and associate it with the file and Entity in the controller. I can't get it back to the view to edit it if the user wants to. I tried to modify the template-download in _MvcFileUpload.cshtml

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
        Title: <input name="title" required />
             </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <button class="btn btn-save" data-type="What to put here?" data-url="What to put here?" >
                    <i class="glyphicon glyphicon-save"></i>
                    <span>Save</span>
                </button>
            {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>

The next issue I see is if I get the title back for editing how can send the updated input back? There's only UploadFile and DeleteFile methods to call.

In summary I'm trying to modify this so the user can upload multiple photos and edit their titles.
MvcFileUploader uses blueimp jQuery-File-Upload. I've looked at that documentation, there is something like what I'm asking for in the documentation for PHP but I couldn't get it to work with MVC. https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-MySQL-database-integration

Answer 1

As long as your Controller method is an HttpPost, you can add a (string title) parameter to the method and it will grab the value from the input box automatically. Otherwise, you'll need to add a data property to the javascript ajax call.

For editing the title after it's been uploaded, you should have a different page. Let them view the images, and have something that will bring up a textbox with the title in an editable field and then have a submit button there. You won't have to upload the image again, just have the ID of the image in the form.