Personalizing the fileTemplate selection in FineUploader

My English is not the best, so apologies in advance. I'm struggling to customize the FineUploader FileTemplate option. I don't want to use fineUploaderBasic; I want total customization. Initially, I managed to hide the file name and size after a successful upload. However, customizing the delete button has proven to be an issue. After the upload, the delete button appears but remains disabled, making it impossible to click. Below is my code:

var restricteduploader = new qq.FineUploader({
                        element: $('#restricted-fine-uploader')[0],
                        text: {
                            uploadButton: '<div><i class="icon-upload icon-white"></i>Subir Imagen</div>',
                            deleteButton: '<input type="button" id="btnDelete" value="Eliminar imagen" />'
                        },

                        template:
                        '<div class="qq-uploader">' +
                            '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
                            '<div class="qq-upload-button">{uploadButtonText}</div>' +
                            '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
                            '<ul class="qq-upload-list"></ul>' +
                        '</div>',
                        fileTemplate:
                            '<li>' +
                                '<div class="qq-progress-bar"></div>' +
                                '<span class="qq-upload-spinner"></span>' +
                                '<span class="qq-upload-finished"></span>' +
                                '<span class="qq-edit-filename-icon"></span>' +
                                '<span class="hide-file"></span>' +
                                '<div>IMAGEN SUBIDA CON EXITO!!</div>' +
                                '<input class="qq-edit-filename" tabindex="0" type="text">' +
                                '<span class="hide-size"></span>' +
                                '<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
                                '<a class="qq-upload-retry" href="#">{retryButtonText}</a>' +
                                '<div class="qq-upload-delete">{deleteButtonText}</div>' +
                                '<span class="qq-upload-status-text">{statusText}</span>' +
                            '</li>',
                        classes: {
                            file: 'hide-file',
                            size: 'hide-size'
                        },
                        request: {
                            endpoint: '<%= Url.Action("UploadBatchDataFile", "Account") %>'
                        },
                        deleteFile: {
                            enabled: true,
                            endpoint: '<%= Url.Action("DeleteFile", "Account") %>',
                            method: 'POST'
                        },
                        multiple: false,
                    validation: {
                        allowedExtensions: ['jpeg', 'jpg', 'png'],
                        sizeLimit: 411062 // 50 kB = 50 * 1024 bytes
                    },
                    showMessage: function (message) {
                        $('#restricted-fine-uploader').append('<div class="alert-error">' + message + '</div>');
                    },
                    messages: { typeError : "{file} no es un tipo de imagen valido. Imagenes valida(s): {extensions}." },
                    callbacks: {
                        onSubmitDelete: function(event, id) {
                            var filename = $(this).fineUploader('getName', id);
                            $(this).fineUploader('setDeleteFileParams', {filename: filename}, id);
                        },
                        onComplete: function (id, filename, responseJSON) {
                            if (responseJSON.success) {
                                $('div div.alert-error').remove();

                                $('#imgUploaded').attr("src", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);
                                $('#hidImage').attr("value", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);

                            }
                        }
                    }
                });

I find customizing the fileTemplate challenging. Previously, I attempted to integrate the FileTemplate into a table by modifying the template as follows:

'<ul class="qq-upload-list"></ul>' to '<table class="qq-upload-list"></table>'

and adjusting the fileTemplate like this:

'<li>' to '<tr><td>' and '</li>' to </td></tr>

Unfortunately, these changes didn't result in the desired outcome. Following a successful upload, FineUploader failed to display the FileTemplate.

jqueryhtmlcssfine-uploader

Answer №1

Initially, in the onComplete handler, there is a syntax error that needs to be corrected. Update

$('#imgUploaded').attr("src", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);
$('#hidImage').attr("value", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);

to

$('#imgUploaded').attr("src", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);
$('#hidImage').attr("value", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);

Next, within the text option properties, ensure you are providing text instead of HTML for button labels. Adjust

text: {
    uploadButton: '<div><i class="icon-upload icon-white"></i>Subir Imagen</div>',
    deleteButton: '<input type="button" id="btnDelete" value="Eliminar imagen" />'
},

to

text: {
    uploadButton: 'Subir Imagen',
    deleteButton: 'Eliminar imagen'
},

If customization like adding an upload icon is desired, modify the template option properties:

template:
    '<div class="qq-uploader">' +
        '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
        '<div class="qq-upload-button"><i class="icon-upload icon-white"></i>{uploadButtonText}</div>' +
        '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
        '<ul class="qq-upload-list"></ul>' +
        '</div>',

Lastly, ensure consistency by using jQuery throughout your FineUploader instance. Consider leveraging the FineUploader jQuery plugin for improved functionality and ease of use:

$("#restricted-fine-uploader").fineUploader({
    // .. define your options here, same as above ...
}).on('submitDelete', function (event, id) {
    var filename = $(this).fineUploader('getName', id);
    $(this).fineUploader('setDeleteFileParams', {filename: filename}, id);

}).on('complete', function (event, id, filename, responseJSON) {
    if (responseJSON.success) {
        $('div div.alert-error').remove();

        $('#imgUploaded').attr("src", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);
        $('#hidImage').attr("value", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);

    }
});

Refer to this documentation for utilizing the jQuery plugin

Update

Below is additional code illustrating proper usage of the jQuery plugin with events and incorporating an input element for the delete button.

Note: Requires FineUploader version 3.7.1 or higher

JavaScript

$(function () {
    $("#restricted-fine-uploader").fineUploader({
        text: {
            uploadButton: "<i class='icon-upload icon-white'></i>Subir Imagen"
        },
        fileTemplate:
            '<li>' +
            '<div class="qq-progress-bar"></div>' +
            '<span class="qq-upload-spinner"></span>' +
            '<span class="qq-upload-finished"></span>' +
            '<span class="hide-file"></span>' +
            '<div>IMAGEN SUBIDA CON EXITO!!</div>' +
            '<span class="hide-size"></span>' +
            '<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
            '<a class="qq-upload-retry" href="#">{retryButtonText}</a>' +
            '<input class="qq-upload-delete" type="button" value="{deleteButtonText}" />' +
            '<span class="qq-upload-status-text">{statusText}</span>' +
            '</li>',

        classes: {
            file: 'hide-file',
            size: 'hide-size'
        },
        request: {
            endpoint: '<%= Url.Action("UploadBatchDataFile", "Account") %>'
        },
        deleteFile: {
            enabled: true,
            endpoint: '<%= Url.Action("DeleteFile", "Account") %>',
            method: 'POST'
        },
        multiple: false,
        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'png'],
            sizeLimit: 411062 // 50 kB = 50 * 1024 bytes
        },
        showMessage: function (message) {
            $('#restricted-fine-uploader').append('<div class="alert-error">' + message + '</div>');
        },
        messages: {
            typeError: "{file} no es un tipo de imagen valido. Imagenes valida(s): {extensions}."
        }
    }).on('submitDelete', function (event, id) {
        var filename = $(this).fineUploader('getName', id);
        $(this).fineUploader('setDeleteFileParams', {
            filename: filename
        }, id);
    }).on('complete', function (id, filename, responseJSON) {
        if (responseJSON.success) {
            $('div div.alert-error').remove();

            $('#imgUploaded').attr('src', '<%: Url.Content("~/Images/") %>' + responseJSON.filename);
            $('#hidImage').attr('value', '<%: Url.Content("~/Images/") %>' + responseJSON.filename);

        }
    });
});

HTML

<ul id="restricted-fine-uploader"></ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on Updating Array Value with jQuery

I have been working on using jQuery to edit array values. Here is my approach: From a modal, each time I click the "Add item" button, it pushes values to an array and appends the data to a table. var iteminfo = { "row": 'row' + cnt, "ma ...

htmljqueryhtml-table

Utilizing Javascript to filter data across multiple columns in tables

I've been experimenting with the JavaScript code below to filter table rows. The original code is from w3schools, but I made some modifications to target all input values. It works well for filtering one column, however, when I try to input a value in ...

javascriptjquerydom

How is it possible to encounter a Javascript unexpected token ] error within an HTML code?

While working on my project, I encountered a JavaScript error in the console of Chrome. The error message stated "Unexpected token ]" and it was pointing to a specific line of raw HTML code. I am puzzled about what could be causing this issue. Unfortunatel ...

javascriptjqueryhtmlgoogle-chrome

The child fieldset is oversized with a height of 100%

I am attempting to make a fieldset child stretch to 100%, but the child (ul) is too large and causing overflow (getting cut off in my scenario). Is there a way to stretch the fieldset child to 100% without causing overflow? fieldset { height: 300px; ...

htmlcssflexbox

Is there a problem with textbox support for multi-line strings?

I'm having trouble getting a textbox to display multiple lines of text. For instance, when I copy three lines of text from Microsoft Word and paste it into the textbox, only the first line appears. The other two lines are not showing up, and I'm ...

javajavascripthtmljsp

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

cssuser-interfaceloopbackjsstrongloop

How come the previous sibling element appears on top when the initial sibling is set to a position of absolute?

I have encountered an issue with two sibling sections. I applied position:absolute to the first section, but the second section is overlapping it. Even after trying to use position:relative on the second section, the problem persists. https://i.stack.imgur ...

htmlcss

Tips for designing websites using HTML and CSS

current result: https://i.sstatic.net/eXLPv.png desired output: https://i.sstatic.net/vgl6z.png I am aiming to center the text. add image description here add image description here ...

htmlcsslayout

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For ...

javascriptjqueryhtmlcss

How can you inform TypeScript about a file that will be included using a script tag?

I am currently utilizing TypeScript for my front-end JavaScript development, and I have a situation where I am loading two scripts from my index.html file as shown below: <script src="replacements.js"></script> <script src="socket.js">&l ...

javascripthtmltypescriptscopefrontend

Is it possible to use multiple stylesheets with PhoneGap?

Currently, I am storing a stylesheet (CSS file) from the web server into device storage using the file system access method provided in the phonegap guide for File. I need to apply this stylesheet to my app from the device storage, and will be updating the ...

jquerycsscordovaphonegap-build

Adjustable TextBox (multiline input field)

In need of some assistance, I am working with a MultiLine asp:Textbox (similar to a standard html textarea) that I would like to have auto-sized to fit its content using only CSS. My goal is to have it display at a specified height in the web browser, with ...

asp.nethtmlcss

Determining the Source Page of a JQuery Call using the HttpHandler Object

One of the challenges I am facing involves the HTTP Handler FaqsJson.ashx, which is responsible for generating a JSON using StringBuilder. Within this Handler Object, I am invoking a StoredProcedure and passing a single Variable, FactTypeID, which is curre ...

jqueryasp.net

Can someone explain the significance of '{}' within the function shown below?

I've been able to grasp most of this code, but I'm unsure about "{}". Can anyone clarify its meaning? var Toggle = function(section, expand) { this.section = section || {}; this.expand = expand | ...

javascriptjquery

Leveraging JSON data to dynamically create HTML elements with multiple class names and unique IDs, all achieved without relying on

Recently, I've been working on creating a virtual Rubik's cube using only JS and CSS on CodePen. Despite my limited experience of coding for less than 3 months, with just under a month focusing on JS, I have managed to develop two versions so far ...

javascripthtmlcssjsonrubiks-cube

Struggles with arranging HTML header components

I've been attempting to insert a Twitter logo into the header of my website (which is styled using Bootstrap CSS), but unfortunately, it's causing some alignment issues. My initial goal was to position them next to each other, however, they ended ...

csshtmltwitter-bootstrapalignment

Solving the issue of .css being blocked due to MIME type while building tailwind is a common problem faced by

https://i.stack.imgur.com/nrDgJ.png While working on my tailwind CSS project, I ran npm run build. However, upon opening the built index.html file, I noticed that the CSS file was not loading properly. How can I resolve this issue? I am unsure of what st ...

cssnpmtailwind-cssweb-development-servernpm-publish

Move the DIV element to the bottom of the webpage

On my website, I have implemented a countdown timer and a responsive wallpaper. My goal now is to center the div at the bottom of the page and make sure it always stays there. I've tried some code snippets from StackOverflow, but they either gave me a ...

htmlcss

Retrieve the HTTP Code and Response Header for a successful AJAX request

I am attempting to retrieve the HTTP Response Code/Response Header from my AJAX request. Below is the initial script I used: $("#callContact1").click(function() { $.ajax({ url: "https://www.server.com?type=makecall", data: {}, type: ...

javascriptjqueryajax

Locate the chosen radio button within a group of <label> tags using the selenium webdriver

How can I iterate through all the label items within a div? There are multiple label tags with radio buttons inside. I'm using Selenium WebDriver and need to identify the selected radio button. Here are the two things I need to accomplish: Determine ...

javahtmlseleniumselenium-webdriverwebdriver