BlueImp jQuery FIle Upload - Adding addition data to each file

Question

I have recently undertaken a project to create a simple multiple file upload system where you can assign a title to each file uploaded. Now I was recommended to go with Blueimp's jQuery File uploader as it provides a drag n drop ability.

So here is where I am getting confused. I have looked at the tutorial or description given by blueimp on GitHub Link here. I can do the adding an additional field but this applies to all files uploaded. (I am using CodeIgniter to handle the files to DB).

So how would I go about adding an individual title to each file added? As I cannot make sense of the tut on github. (Maybe a jsfiddle example which I can go away an learn from?)

Edit*

Now I have managed to get the extra input box added...rather simple to add in the end (doh!). SO this is what I have in my index.html file

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            {% if (file.error) { %}
                <div><span class="label label-important">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td class="title"><label>File Title: <input name="title[]" required="required"></label></td>
        <td>
            <p class="size">{%=o.formatFileSize(file.size)%}</p>
            {% if (!o.files.error) { %}
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            {% } %}
        </td>
        <td>
            {% if (!o.files.error && !i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>

I have also added this to the bottom of the main.js file

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    var inputs = data.context.find(':input');
    if (inputs.filter('[required][value=""]').first().focus().length) {
        return false;
    }
    data.formData = inputs.serializeArray();

The next question I have is how do I assign the title as the filename now?

Shan · Accepted Answer · 2014-12-28 19:24:16Z

2

Just add the file.name without extension as value for the text field.

<td class="title"><label>File Title: <input name="title[]" value="{%= file.name.split('/').pop().split('.').shift()%}"  required="required"></label></td>

answered Dec 28, 2014 at 19:24

Shan

6634 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

BlueImp jQuery FIle Upload - Adding addition data to each file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related